impulse
1.0.0
Erstellen Sie moderne Websites in Ihrem Browser, ohne Code aufzugeben.
Impulse.dev | Zwietracht
Gemacht von @krogovoy und @ivolchenskov
Impulse wurde erstellt, um mit React -Websites im Dev -Modus zu arbeiten (dh auf Ihrem Localhost).
Sie können Ihre Benutzeroberfläche direkt im Browser bearbeiten, während Sie Ihren Code automatisch so ändern, wie Sie ihn manuell tun würden. Es ist wie eine Code -Editor -Erweiterung, die über den Code -Editor hinausgeht.
? Siehe Demos bei Impulse.dev
Im Vergleich zum manuellen Schreiben von Code:
Sprachen:
Bibliotheken rendern:
React -Frameworks und Bundler:
CSS -Frameworks:
Browser:
(Impulse basiert auf der API des Dateisystemzugriffs, die nur in Chrombasis-Browsern gut funktioniert.)
Editor -Integration:
Es gibt drei Möglichkeiten, Impulse zu versuchen.
Kopieren Sie den Code unten in die Konsole Ihres Browsers.
d = document ; s = d . createElement ( 'script' ) ; s . src = `https://cdn.jsdelivr.net/npm/@impulse.dev/runtime@latest/inject.js` ; d . body . appendChild ( s )Einfache Möglichkeit, mit dem Tool zu spielen, ohne etwas zu installieren, aber es wird verschwinden, sobald Sie die Seite aktualisiert haben.
Ein für alle Mal für alle für das gesamte Team einrichten.
npm i -D @impulse.dev/runtime@latest Fügen Sie in jede Datei ein, die immer importiert wird. Normalerweise ist es die "Haupt" -React -Datei wie _app.jsx in Next.js.
if ( process . env . NODE_ENV === 'development' ) {
import ( '@impulse.dev/runtime' ) . then ( ( impulse ) => impulse . run ( ) )
} Fügen Sie dieses Skript -Tag am Ende von <body> ein
{
process . env . NODE_ENV === 'development' && (
< script src = "https://cdn.jsdelivr.net/npm/@impulse.dev/runtime@latest/inject.js" > </ script >
)
}WICHTIG: Stellen Sie sicher, dass Sie keinen Impuls in Ihrem Produktionsbau schicken! Es wird Ihre Bündelgröße aufblähen!
Die meisten Bundler haben den gesamten Code in einem if (process.env.NODE_ENV === 'development') { ... } ausgestrahlt, aber es wird empfohlen, eine Produktion zu erstellen und die Bündelgröße mit dem zu vergleichen, was es zuvor war.
Nach der Installation ist der Impuls für die Arbeit bereit. Im Folgenden finden Sie einige Dinge, die Sie für den Impulse einrichten möchten, um am besten für Sie zu funktionieren.
Wenn Sie Brave verwenden, aktivieren Sie die Dateisystemzugriffs -API:
file system access apiImpulse funktioniert nur, wenn Sie Ihre Entwicklungsumgebung auf demselben Computer ausführen, den Sie mit dem Browser verwenden. Impulse funktioniert nicht mit Remote -Umgebungen, da es keine Dateien auf anderen Computern bearbeiten kann.
Aus Sicherheitsgründen funktioniert die Dateisystemzugriffs -API nur für localhost , wenn http: // verwendet wird. Wenn Sie einen anderen Hostnamen verwenden, obwohl die Umgebung lokal ist, sollten Sie:
Insecure origins treated as secureImpulse bearbeitet Ihren Code. Standardmäßig versucht es das Beste, diese Änderungen so minimal wie möglich vorzunehmen.
Es weiß jedoch nicht wirklich, wie Sie Ihren Code formatieren können.
Wenn Sie möchten, dass es nach jeder Codeänderung (empfohlen) schöner verwendet wird, übergeben Sie Ihre Konfiguration an run() :
if (process.env.NODE_ENV === 'development') {
- import('@impulse.dev/runtime').then((impulse) => impulse.run())
+ import('@impulse.dev/runtime').then((impulse) => impulse.run({
+ prettierConfig: require('./path_to/.prettierrc.js')
+ }))
} Wenn Sie das Standardthema im Rückenwind erweitert haben, geben Sie Ihren tailwind.config.js an run() weiter:
if (process.env.NODE_ENV === 'development') {
- import('@impulse.dev/runtime').then((impulse) => impulse.run())
+ import('@impulse.dev/runtime').then((impulse) => impulse.run({
+ tailwindConfig: require('./path_to/tailwind.config.js'),
+ }))
}
Was Sie tun können:
<div></div> einAnforderungen:
Klonen Sie das Repo:
git clone [email protected]:impulse-oss/impulse.git && cd impulseAbhängigkeiten installieren:
npm installFühren Sie den Dev -Server aus:
npm run devÖffnen Sie http: // localhost: 3005/. Dies ist ein Spielplatz zum Entwicklung und Testen der App.
