フロントエンド自動化開発のためのNode.js環境構築チュートリアル


1。フロントエンド開発を自動化する理由 span>


どんな言語を学んでも、開発を学ぶ人は誰でも、開発者として、あなたの最大のエネルギーは創造性にあるべきだと言っていると思います。開発プロセスでは、多くの場合、操作が繰り返されることが多いため、これらの操作の時間を節約し、作成するためにより多くの時間を解放する必要があります。


自動開発で実現できる自動化:

strong>
1.自動コンパイル(less、sassなどの自動コンパイル)


2.自動的にマージします(ページにインポートされた複数のjsファイルまたはcssファイルを1つにマージして圧縮します)


3.自動更新(IDEが保存し、ブラウザーを更新する必要がなく、効果が自動的に表示されます)


4.自動デプロイメント(プロジェクトを指定されたディレクトリに自動的にパッケージ化してデプロイします)


5.自動同期(複数のブラウザウィンドウ、同期クリック、入力、デバッグを簡単に実現できます)
それが私たちにたくさんのことをするのを助けることができることにとても興奮していると思いますか、それでそれを作りましょう。このビルドには、環境の構築、ツールの構築、プロジェクトアーキテクチャの構築、シリアル化、今日の記事、環境の構築が含まれます。最初に、nodejs環境が構築されます。
次に、Node.jsとは何ですか? strong> span>


Node.js®は、ChromeのV8 JavaScriptエンジン上に構築されたJavaScriptランタイムです。
Node.jsは、イベント駆動型の非ブロッキングI / Oモデルを使用して、軽量で効率的なものにします。
Node .jsのパッケージエコシステムであるnpmは、世界最大のオープンソースライブラリのエコシステムです。

翻訳:Node.jsは、ChromeV8エンジンに基づくJavaScriptランタイム環境です。それは使用しますイベント駆動型のノンブロッキングI/Oモデルで、非常に軽量で効率的です。そのパッケージ管理ツールであるnpmは、世界最大です。オープンソースライブラリエコシステム。


つまり、ブラウザが表示されているWebサイトを表示すると、ページレンダリング、jsレンダリングなどの多くの処理が実行され、ノードはjsレンダリングエンジンを取り出してGoogleのV8を使用し、APIのレイヤーをカプセル化します。その外部では、ファイルの読み取りと書き込み、ネットワークなどの操作を実行でき、サーバー側の操作環境を提供しますが、実行中のjavasciptです。そのため、nodejsはフロントエンド開発業界に産業革命をもたらしました。
3番目に、Node.jsをインストールします strong> span>


インストールには多くの方法があります。https://nodejs.org/en/インストールバージョンを公式Webサイトから直接ダウンロードしてインストールできます。この方法は非常に単純で失礼です。次のステップで解決します。の上使用中に複数のバージョンのノードを使用することがあり、nvmを使用すると使用中にバージョンを簡単に切り替えることができるため、nvmをインストールする方法があります。
最初のステップは、次のNVMパッケージhttps://github.com/coreybutler/nvm-windows/releasesです。最初のパッケージを選択します。nvm-noinstall.zipダウンロードが完了したら、次のような場所に解凍します。 :C:\\ dev \
vmのファイルリストは次のとおりです:elevate.cmd、elevate.vbs、install.cmd、LICENSE、nvm.exe


install.cmdをダブルクリックすると、「圧縮ファイルが解凍またはコピーされる絶対パス」を入力するように求められます。気にしないで、Enterキーを押してください。成功すると、settings.txtテキストがCドライブのルートディレクトリに生成されます。ファイル、このファイルをC:\\ dev \
vmディレクトリに切り取り、その内容を次のように変更します。




root:C:\\ dev \
vm
path:C:\\ dev \
odejs
arch:64
proxy:none

それから私達は詐欺を始めますinstall.cmdファイルをクリックしただけなので、環境変数を計算します。環境変数のシステム変数に2つの環境変数が生成されます。NVM_HOMEとNVM_SYMLINKこれら2つの変数名の変数の変更を開始します。値:変数値NVM_HOMEのは次のとおりです。C:\\ dev \
vm; NVM_SYMLINKの変数値は次のとおりです。C:\\ dev \
odejs


次に、%NVM_SYMLINK%、%NVM_HOME% code>、

を追加するために、PATH環境変数を構成します。
cmdを開き、コマンド nvm -v code>を入力してバージョン情報を表示します。これは、インストールが成功したことを意味します


次に、nodejsをダウンロードし、コマンド nvm install lastest code>を入力して、ノードの最新バージョンをダウンロードします。バージョンを指定する場合は、 nvm install 6.4.0を使用することもできます。コンピュータが32ビットの場合、デフォルトは64ビットであるため、最後に32を追加することに注意してください。 nvm install 6.4.0 32 code>
4番目、npmのインストール strong> span>


インストールする各ノードバージョンにはすでにnpmが付属していますが、ノードバージョンを切り替える可能性があるため、統一のためにグローバルnpmをインストールする必要があります
まず、コマンドモードに入り、 npm config set prefix "C:\\ dev \
vm \
pm" code>と入力し、Enterキーを押します。これにより、グローバルインストールパスが構成されます。 npmの、そしてユーザーフォルダの下に.npmrcファイルが生成されます。メモ帳で開くと、次のコンテンツが表示されます。 prefix = C:\\ dev \
vm \
pm code>


次に、次のコマンドを入力し続けます。 npm install npm -g code> Enterキーを押すと、C:\\ dev \
vm \
pmディレクトリダウンロード内のファイルを確認すると、将来npmを使用してパッケージをインストールするときに、-gを追加するだけで、グローバルpatにパッケージをインストールできます。h設定したばかりです。


このnpmの環境変数を構成します。変数名はNPM_HOME、変数値はC:\\ dev \
vm \
pm


パスの前に追加します。 %NPM_HOME% code>、これは%NVM_SYMLINK% code>の前に追加する必要があるため、PathForemostに直接配置することに注意してください


最後に、新しいコマンドウィンドウを開き、npm-vと入力します。現時点では、均一にダウンロードしたnpmパッケージを使用しています。


同様に、npmミラーライブラリの中国語版であるcnpmツールをインストールすることもできます。アドレスはここにあります:https://cnpmjs.org/、これはnpmの公式コピーでもあります。これは、壁で外界から隔てられているため、この国内のものを使用する方が高速です。 Taobaoは、npmと同じミラーライブラリhttp://npm.taobao.org/も作成しました。これは、公式のnpmと10分ごとに同期します。インストール方法:



>
npm install -g cnpm --registry = http://r.cnpmjs.org

または、Taobaoの npm install -g cnpm --registry = https://registry.npm.taoba.org code>

を使用します
cnpmをインストールした後、 cnpm install bower -gなどのcnpminstallパッケージ名を直接実行します。 -gは、パッケージをグローバルパスにインストールするだけです。グローバルにインストールしない場合は、-gを指定せずに現在のディレクトリにインストールすることもできます。
V。 nrmのインストール span>


nrmとは何ですか?

strong>
nrmは、npmのミラーソース管理ツールであるnpmレジストリマネージャーです。外部リソースが遅すぎる場合があるため、これを使用してソースのようなミラーを切り替えることができます。

次のコマンドを渡す必要があります: npm install -g nrmをインストールします。


注: strong> span> -gは、インストール直後に配置できます。このように、cmdで上下の矢印を使用して最新のコマンドを切り替えることができると、変更が簡単になり、操作がより便利になるため、将来的に使用することをお勧めします。インストールが完了すると、使用できるようになります。
コマンド: nrm ls code>は、切り替え可能なすべてのミラーアドレスを表示するために使用されます


コマンド: nrm use cnpm code>このようにして、cnpmに直接切り替えることができます。もちろん、上記の他の内容に合わせて切り替えることもできます。
概要 span>
上記はこの記事の全内容です。この記事の内容があなたの研究や仕事に役立つことを願っています。ご不明な点がございましたら、メッセージを残して交換させていただきますので、よろしくお願いいたします。