impulse
1.0.0
コードをあきらめることなく、ブラウザで最新のWebサイトを構築します。
IMPULSE.DEV |不和
@krogovoyと@ivolchenskovによって作られました
Impulseは、DEVモードのReact Webサイト（つまり、LocalHostで実行されていることを意味する）で作業するために作成されました。
これにより、ブラウザでUIを正しく編集し、コードを手動で実行する方法を自動的に変更できます。これは、コードエディターを超えたコードエディター拡張機能のようなものです。
？ Impulse.devのDemosを参照してください
手動でコードを書くのと比較して：
言語：
レンダリングライブラリ：
React FrameworksとBundlers：
CSSフレームワーク：
ブラウザ：
（インパルスは、クロムベースのブラウザでのみうまく機能するファイルシステムアクセスAPIに依存しています）
編集者統合：
衝動を試すには3つの方法があります。
以下のコードをブラウザのコンソールにコピーして貼り付けます。
d = document ; s = d . createElement ( 'script' ) ; s . src = `https://cdn.jsdelivr.net/npm/@impulse.dev/runtime@latest/inject.js` ; d . body . appendChild ( s )何もインストールせずにツールでプレイする簡単な方法ですが、ページを更新すると消えます。
チーム全体のセットアップ。
npm i -D @impulse.dev/runtime@latest常にインポートされるファイルに貼り付けます。通常、それはnext.jsの_app.jsxなどの「メイン」Reactファイルになります。
if ( process . env . NODE_ENV === 'development' ) {
import ( '@impulse.dev/runtime' ) . then ( ( impulse ) => impulse . run ( ) )
}<body>の最後にこのスクリプトタグを貼り付けます
{
process . env . NODE_ENV === 'development' && (
< script src = "https://cdn.jsdelivr.net/npm/@impulse.dev/runtime@latest/inject.js" > </ script >
)
}重要：生産ビルドに衝動を出荷していないことを確認してください！それはあなたのバンドルサイズを膨らませます！
ほとんどのバンドラーはif (process.env.NODE_ENV === 'development') { ... }内のすべてのコードを切り取りますが、生産ビルドを作成し、バンドルサイズを以前のものと比較することをお勧めします。
インストールされると、インパルスは仕事の準備ができています。以下は、あなたのために最善を尽くすために衝動のために設定したいと思うかもしれないいくつかのことです。
Braveを使用している場合は、ファイルシステムアクセスAPIを有効にします。
file system access apiを検索しますインパルスは、ブラウザを使用するのと同じコンピューターで開発環境を実行する場合にのみ機能します。他のコンピューターでファイルを編集できないため、リモート環境ではインパルスが機能しません。
セキュリティ上の理由から、ファイルシステムアクセスAPIは、http：//が使用される場合にのみlocalhostで機能します。環境がローカルであるにもかかわらず、別のホスト名を使用している場合は、次のようにしてください。
Insecure origins treated as secureを検索しますImpulseはコードを編集します。デフォルトでは、これらの変更を可能な限り最小限に抑えるために最善を尽くします。
ただし、コードをフォーマットする方法は本当にわかりません。
各コードが変更された後にきれいに使用したい場合（推奨）、configを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')
+ }))
} Tailwindで標準テーマを拡張した場合は、 tailwind.config.jsを渡してrun()に渡します。
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'),
+ }))
}
あなたができること：
<div></div>を挿入します要件：
リポジトリのクローン：
git clone [email protected]:impulse-oss/impulse.git && cd impulse依存関係をインストールします：
npm install開発サーバーを実行します：
npm run devhttp：// localhost：3005/を開きます。これは、アプリを開発およびテストするための遊び場です。
