NPM、Yarn、Babel、Webpackとは?

もともと私たちがインタラクティブなwebを作るとき、最もよく使われていたのはjQueryです.しかし、Web開発を深く学ぶにつれて、NPM、Yarn、Babel、Webpackの4つの技術を理解する必要があります.
NPMとYarn

NPMはNode Package Managerの略で、Node環境でパッケージを管理するためのツールであり、すべてのパッケージと使用されているバージョン番号を追跡することができ、開発が依存パッケージを容易に追加または削除することができる.

すべての依存パッケージは「package.json」というファイルに保存されています.

各言語には独自のパッケージマネージャがあり、PHPにはComposerがあり、PythonにはPyPiがあり、JavaにはGradleがある.

npmはNodeに従います.js自動インストール;

Yarnはnpmのいくつかの欠陥を補うために現れたもので、NPMと同じものですが、NPMより2つの利点があります.

Yarnにはyarnという人がいます.lockのファイルは、依存パッケージのバージョンをロックするために使用され、プロジェクトを更新するときに、これらのロックバージョンのパッケージをロードし、余分な操作を開発する必要がなく、前後のプロジェクトの一貫性を維持することができます.

依存パッケージをインストールするとき、Yarnは並列であり、NPMは順序であるため、速度が速い.Yarnコマンドとnpmコマンドの比較

npm install === yarn 
npm install taco --save === yarn add taco
npm uninstall taco --save === yarn remove taco
npm install taco --save-dev === yarn add taco --dev
npm update --save === yarn upgrade

要するに、NPMもYarnもパッケージマネージャです.
Babel
Babelは広く使用されているトランスコーダであり、ES 6コードをES 5コードに変換して既存の環境で実行することができる.これは、既存の環境がサポートされているかどうかを心配することなく、ES 6でプログラムを作成できることを意味します.次に例を示します.ES 6またはES 7でコードを書き込み、BabelでJSに変換することもできます

       
    input.map(item => item + 1);

       
    input.map(function (item) {
      return item + 1;
    });

Webpack
Webpackはオープンソースのフロントエンドパッケージツールです.Webpackのいくつかの特性:

Hot Reloading-開発の過程で、変更を迅速にwebに表示させ、再配置コードの開発とWebページの更新

を必要としない.

Tree Shaking-プロジェクト内の不要なコードを自動的にクリアします.最后のエピソードは、webpackで开発する时、私达はSASS、SCSSに出会って、あれは何がSASSで、SCSSですか?私たちの知る限りでは、CSSはプログラミング言語ではありません.Webスタイルを開発することができますが、プログラミングすることはできません.つまり、CSSは基本的にデザイナーのツールであり、プログラマーのツールではありません.自然に、CSSにプログラミング要素を追加する人がいます.これは「CSSプリプロセッサ」(css preprocessor)と呼ばれています.その基本思想は、専門的なプログラミング言語で、ウェブスタイルの設計を行い、正常なCSSファイルにコンパイルすることです.SCSSはSass 3が導入した新しい構文であり、その構文はCSS 3と完全に互換性があり、Sassの強力な機能を継承している.すなわち、どの標準的なCSS 3スタイルシートも同じ意味を持つ有効なSCSSファイルである.