NPM vs. Bower vs. Browserify vs. Gulp vs. Grunt vs. Webpack

1949
VB_ 2016-01-29 03:28.

最も人気のあるJavaScriptパッケージマネージャー、バンドラー、およびタスクランナーに関する知識を要約しようとしています。私が間違っている場合は私を訂正してください:

  • npmbowerはパッケージマネージャーです。彼らは依存関係をダウンロードするだけで、自分でプロジェクトを構築する方法を知りません。彼らは何を知っていることは呼び出すことですwebpack/ gulp/gruntすべての依存関係を取得した後。
  • bowerに似てnpmいますが、フラット化された依存関係ツリーを構築します(npm再帰的に行うのとは異なります)。意味npmが、(数回同じフェッチすることができる)、各依存性をフェッチに依存関係をbower手動でサブ依存性を含むことを期待。時には、bower及びnpm(各メガバイトは、フロントエンドには問題かもしれないので)、それぞれのフロントエンドとバックエンドのために一緒に使用されています。
  • gruntそしてgulp、自動化できるすべてのものを自動化するタスクランナーです(つまり、CSS / Sassのコンパイル、イメージの最適化、バンドルの作成、およびそれの縮小/トランスパイル)。
  • gruntvs. gulpmavenvs。gradleまたは構成vs.コードのようなもの)。Gruntは、個別の独立したタスクの構成に基づいており、各タスクはファイルを開く/処理する/閉じる。Gulpは必要なコードの量が少なく、ノードストリームに基づいているため、パイプチェーンを構築でき(同じファイルを再度開くことなく)、高速になります。
  • webpackwebpack-dev-server)-私にとっては、変更をホットリロードするタスクランナーであり、すべてのJS / CSSウォッチャーを忘れることができます。
  • npm/ bower+プラグインがタスクランナーを置き換える場合があります。それらの能力はしばしば交差するため、gulp/ gruntover npm+プラグインを使用する必要がある場合はさまざまな影響があります。ただし、タスクランナーは、複雑なタスクには間違いなく優れています(たとえば、「ビルドごとにバンドルを作成し、ES6からES5にトランスパイルし、すべてのブラウザーエミュレーターで実行し、スクリーンショットを作成し、ftp経由でドロップボックスにデプロイする」)。
  • browserifyブラウザ用のノードモジュールをパッケージ化できます。browserifynodeさんはrequire、実際にあるCommonJS対AMD

質問:

  1. webpack&とはwebpack-dev-server公式ドキュメントによると、これはモジュールバンドラーですが、私にとっては単なるタスクランナーです。違いは何ですか?
  2. どこで使いbrowserifyますか?node / ES6のインポートでも同じことはできませんか?
  3. いつgulp/ gruntover npm+プラグインを使用しますか?
  4. 組み合わせて使用​​する必要がある場合の例を教えてください

8 answers

1050
Dan Macák 2016-01-29 04:34.

WebpackとBrowserify

WebpackとBrowserifyはほぼ同じ仕事をします。それは、ターゲット環境で使用されるコードを処理することです(主にブラウザーですが、ノードなどの他の環境をターゲットにすることもできます)。このような処理の結果は、1つ以上のバンドル(ターゲット環境に適したアセンブルされたスクリプト)です。

たとえば、モジュールに分割されたES6コードを作成し、それをブラウザーで実行できるようにしたいとします。これらのモジュールがノードモジュールである場合、それらはノード環境にのみ存在するため、ブラウザはそれらを理解しません。ES6モジュールは、IE11などの古いブラウザでも機能しません。さらに、ブラウザがまだ実装していない実験的な言語機能(ESの次の提案)を使用した可能性があるため、そのようなスクリプトを実行するとエラーがスローされます。WebpackやBrowserifyなどのツールは、このようなコードをブラウザが実行できる形式に変換することで、これらの問題を解決ます。その上、それらはそれらのバンドルに多種多様な最適化を適用することを可能にします。

ただし、WebpackとBrowserifyは多くの点で異なり、Webpackはデフォルトで多くのツール(コード分割など)を提供しますが、Browserifyはプラグインをダウンロードした後にのみこれを実行できますが、両方を使用すると非常に類似した結果が得られます。それは個人的な好みに帰着します(Webpackはよりトレンディです)。ところで、Webpackはタスクランナーではなく、ファイルのプロセッサであり(いわゆるローダーとプラグインによってファイルを処理します)、タスクランナーによって(他の方法の中でも)実行できます。


Webpack Dev Server

Webpack Dev Serverは、Browsersyncと同様のソリューションを提供します。これは、作業中にアプリを迅速にデプロイし、開発の進行状況をすぐに確認できる開発サーバーです。開発サーバーは、コードの変更や変更されたコードの伝播でブラウザーを自動的に更新します。いわゆるホットモジュール交換でリロードせずにブラウザに。


タスクランナーとNPMスクリプト

私はその簡潔さと簡単なタスク作成のためにGulpを使用してきましたが、後でGulpもGruntもまったく必要ないことがわかりました。私が今まで必要としていたことはすべて、NPMスクリプトを使用してAPIを介してサードパーティのツールを実行することで実行できたはずです。Gulp、Grunt、またはNPMスクリプトのいずれかを選択するかどうかは、チームの好みと経験によって異なります。

GulpまたはGruntのタスクは、JSにあまり詳しくない人でも読みやすいですが、それは必要な学習が必要なもう1つのツールであり、個人的には依存関係を絞り込んで単純にすることを好みます。一方、これらのタスクを、NPMスクリプトとそれらのサードパーティツールを実行する(適切にはJS)スクリプトの組み合わせ(たとえば、ノードスクリプトの構成とクリーニング目的でのrimrafの実行)に置き換えることは、より困難な場合があります。しかし、ほとんどの場合、これら3つは結果の点で同等です。


例として、このReactスタータープロジェクトをご覧になることをお勧めします。このプロジェクトでは、ビルドとデプロイのプロセス全体をカバーするNPMスクリプトとJSスクリプトの優れた組み合わせを示しています。これらのNPMスクリプトはpackage.json、ルートフォルダーのscripts。という名前のプロパティにあります。そこでは、主にのようなコマンドに遭遇しますbabel-node tools/run start。Babel-nodeはCLIツール(本番用ではありません)であり、最初にES6ファイルtools/runツールにあるrun.jsファイル)をコンパイルします。これは基本的にランナーユーティリティです。このランナーは関数を引数として受け取り、それを実行します。この場合は、ソースファイル(クライアントとサーバーの両方)をバンドルし、アプリケーションと開発サーバー(開発サーバーはおそらくWebpack Devのいずれか)を起動するstart別のユーティリティ(start.js)です。サーバーまたはBrowsersync)。

より正確に言えばstart.js、クライアント側とサーバー側の両方のバンドルを作成し、Expressサーバーを起動し、起動が成功した後、ブラウザー同期を初期化します。これは、執筆時点では次のようになっています(最新のコードについてはreactスタータープロジェクトを参照してください)。

const bs = Browsersync.create();  
bs.init({
      ...(DEBUG ? {} : { notify: false, ui: false }),

      proxy: {
        target: host,
        middleware: [wpMiddleware, ...hotMiddlewares],
      },

      // no need to watch '*.js' here, webpack will take care of it for us,
      // including full page reloads if HMR won't work
      files: ['build/content/**/*.*'],
}, resolve)

重要な部分はproxy.target、プロキシするサーバーアドレス(http:// localhost:3000)を設定し、Browsersyncがhttp:// localhost:3001でリッスンしているサーバーを起動し、生成されたアセットが自動変更で提供されることです。検出とホットモジュールの交換。ご覧のとおりfiles、個々のファイルまたはパターンを持つ別の構成プロパティがあります。Browser-syncは変更を監視し、変更が発生した場合はブラウザーを再読み込みしますが、コメントにあるように、WebpackはHMRを使用してjsソースを単独で監視するため、連携します。そこ。

今、私はそのようなGruntまたはGulp構成の同等の例を持っていませんが、Gulpを使用すると(そしてGruntとある程度同様に)、gulpfile.jsに次のような個々のタスクを記述します。

gulp.task('bundle', function() {
  // bundling source files with some gulp plugins like gulp-webpack maybe
});

gulp.task('start', function() {
  // starting server and stuff
});

ここでは、スターターキットと基本的にほぼ同じことを行います。今回はタスクランナーを使用します。これにより、いくつかの問題が解決されますが、使用法の学習中に独自の問題といくつかの問題が発生します。依存関係が多ければ多いほど、うまくいかない可能性があります。そして、それが私がそのようなツールを取り除くのが好きな理由です。

692
trungk18 2016-10-03 20:23.

2018年10月の更新

フロントエンド開発についてまだ不明な点がある場合は、ここで優れたリソースを簡単に調べることができます。

https://github.com/kamranahmedse/developer-roadmap

2018年6月の更新

あなたが最初からそこにいなかったならば、現代のJavaScriptを学ぶことは難しいです。あなたが新参者であるならば、より良い概観を持っているためにこの優れた書かれたものをチェックすることを忘れないでください。

https://medium.com/the-node-js-collection/modern-javascript-explained-for-dinosaurs-f695e9747b70

2017年7月の更新

最近、2017年にフロントエンド開発に取り組む方法についてGrabチームから包括的なガイドを見つけました。以下のように確認できます。

https://github.com/grab/front-end-guide


そこにはたくさんのツールがあり、それぞれが異なる面で私たちに利益をもたらすので、私もこれをかなり長い間探してきました。コミュニティは、のようなツールに分かれていますBrowserify, Webpack, jspm, Grunt and Gulp。についても聞くかもしれませんYeoman or Slush。それは問題ではありません、それは前進する明確な道を理解しようとするすべての人にとって混乱するだけです。

とにかく、何か貢献したいです。

目次

  • 目次
  • 1.パッケージマネージャー
    • NPM
    • バウアー
    • BowerNPM
    • jspm
  • 2.モジュールローダー/バンドル
    • RequireJS
    • Browserify
    • Webpack
    • SystemJS
  • 3.タスクランナー
    • グラント
    • gulp
  • 4.足場ツール
    • スラッシュとヨーマン

1.パッケージマネージャー

パッケージマネージャーは、プロジェクトの依存関係のインストールと更新を簡素化します。プロジェクトの依存関係は、次のようなライブラリjQuery, Bootstrapです。サイトで使用され、ユーザーが作成したものではないすべてのもの。

すべてのライブラリWebサイトの閲覧、アーカイブのダウンロードと解凍、プロジェクトへのファイルのコピー—これらはすべて、ターミナルのいくつかのコマンドに置き換えられます。

NPM

これはNode JS package manager、ソフトウェアが依存するすべてのライブラリを管理するのに役立ちます。と呼ばれるファイルでニーズを定義し、コマンドラインでpackage.json実行npm installします...次にBANG、パッケージがダウンロードされ、使用できるようになります。front-end and back-endライブラリの両方に使用できます。

バウアー

フロントエンドパッケージ管理の場合、概念はNPMと同じです。すべてのライブラリは、という名前のファイルに保存され、コマンドラインでbower.json実行さbower installれます。

Bowerは、ユーザーがnpmまたはyarn移行することをお勧めします。お気をつけください

BowerNPM

最大の違いBowerとは、NPMバウアーは、以下のようにフラットな依存関係ツリーを必要としながら、NPMは、ネストされた依存関係ツリーを行うということです。

Bowerとnpmの違いは何ですか?からの引用

NPM

project root
[node_modules] // default directory for dependencies
 -> dependency A
 -> dependency B
    [node_modules]
    -> dependency A

 -> dependency C
    [node_modules]
    -> dependency B
      [node_modules]
       -> dependency A
    -> dependency D

バウアー

project root
[bower_components] // default directory for dependencies
 -> dependency A
 -> dependency B // needs A
 -> dependency C // needs B and D
 -> dependency D

にいくつかの更新がありnpm 3 Duplication and Deduplicationます。詳細については、ドキュメントを開いてください。

最近JavaScript 公開された新しいパッケージマネージャー。にFacebook比べていくつかの利点がありNPMます。また、Yarnを使用すると、NPMBowerレジストリの両方を使用してパッケージをフェッチできます。以前にパッケージをインストールしたことがある場合yarnは、を容易にするキャッシュコピーを作成しますoffline package installs

jspm

JSPMはSystemJS、動的ES6モジュールローダーの上に構築されたユニバーサルモジュールローダーのパッケージマネージャーです。これは、独自のルールセットを備えた完全に新しいパッケージマネージャーではなく、既存のパッケージソースの上で機能します。箱から出して、それはで動作GitHubしてnpmBowerベースのパッケージのほとんどはに基づいているためGitHub、を使用しjspmてそれらのパッケージをインストールすることもできます。インストールを容易にするために、一般的に使用されるフロントエンドパッケージのほとんどをリストするレジストリがあります。

間で異なる参照してくださいBowerjspmパッケージマネージャを:JSPM対バウアー


2.モジュールローダー/バンドル

あらゆる規模のほとんどのプロジェクトでは、コードが複数のファイルに分割されます。各ファイルに個別の<script>タグを含めることもできますが<script>、新しいHTTP接続を確立します。モジュール化の目標である小さなファイルの場合、接続のセットアップにかかる時間は、データの転送よりも大幅に長くなる可能性があります。スクリプトのダウンロード中は、ページのコンテンツを変更できません。

  • ダウンロード時間の問題は、単純なモジュールのグループを1つのファイルに連結し、それを縮小することで大部分解決できます。

例えば

<head>
    <title>Wagon</title>
    <script src=“build/wagon-bundle.js”></script>
</head>
  • ただし、パフォーマンスには柔軟性が犠牲になります。モジュールに相互依存性がある場合、この柔軟性の欠如は目を見張るものになる可能性があります。

例えば

<head>
    <title>Skateboard</title>
    <script src=“connectors/axle.js”></script>
    <script src=“frames/board.js”></script>
    <!-- skateboard-wheel and ball-bearing both depend on abstract-rolling-thing -->
    <script src=“rolling-things/abstract-rolling-thing.js”></script>
    <script src=“rolling-things/wheels/skateboard-wheel.js”></script>
    <!-- but if skateboard-wheel also depends on ball-bearing -->
    <!-- then having this script tag here could cause a problem -->
    <script src=“rolling-things/ball-bearing.js”></script>
    <!-- connect wheels to axle and axle to frame -->
    <script src=“vehicles/skateboard/our-sk8bd-init.js”></script>
</head>

コンピューターはそれをあなたよりもうまく行うことができるので、ツールを使用してすべてを自動的に1つのファイルにバンドルする必要があります。

その後、我々は話を聞いたRequireJSBrowserifyWebpackおよびSystemJS

RequireJS

これはJavaScriptファイルとモジュールのローダーです。ブラウザ内での使用に最適化されていますが、などの他のJavaScript環境でも使用できますNode

例:myModule.js

// package/lib is a dependency we require
define(["package/lib"], function (lib) {
  // behavior for our module
  function foo() {
    lib.log("hello world!");
  }

  // export (expose) foo to other modules as foobar
  return {
    foobar: foo,
  };
});

ではmain.jsmyModule.js依存関係としてインポートして使用できます。

require(["package/myModule"], function(myModule) {
    myModule.foobar();
});

そして、では、HTMLでの使用を参照できますRequireJS

<script src=“app/require.js” data-main=“main.js” ></script>

詳細読むCommonJSAMD簡単に理解を取得します。 CommonJS、AMD、RequireJSの関係は?

Browserify

CommonJSブラウザでフォーマットされたモジュールの使用を許可するように設定します。したがって、Browserifyモジュールローダーはモジュールバンドラーほどではありません。Browserify完全にビルドタイムツールであり、クライアント側でロードできるコードのバンドルを生成します。

nodeとnpmがインストールされているビルドマシンから始めて、パッケージを入手します。

npm install -g –save-dev browserify

モジュールをCommonJSフォーマットで書く

//entry-point.js
var foo = require("../foo.js");
console.log(foo(4));

そして、満足したら、バンドルするコマンドを発行します。

browserify entry-point.js -o bundle-name.js

Browserifyは、エントリポイントのすべての依存関係を再帰的に検索し、それらを1つのファイルにアセンブルします。

<script src="”bundle-name.js”"></script>

Webpack

JavaScript画像、CSSなどを含むすべての静的アセットを1つのファイルにバンドルします。また、さまざまなタイプのローダーを介してファイルを処理することもできます。JavaScriptwithCommonJSまたはAMDmodules構文を書くことができます。それは根本的により統合された意見のある方法でビルド問題を攻撃します。ではBrowserify、あなたの使用Gulp/Gruntして仕事を得るために変換し、プラグインの長いリスト。Webpack通常は必要GruntないGulp、またはまったく必要としない十分な電力を箱から出して提供します。

基本的な使い方は単純ではありません。BrowserifyのようなWebpackをインストールします。

npm install -g –save-dev webpack

そして、コマンドにエントリポイントと出力ファイルを渡します。

webpack ./entry-point.js bundle-name.js

SystemJS

これは、実行時に現在使用されている一般的な形式のモジュールをインポートできるモジュールローダーです(CommonJS, UMD, AMD, ES6)。ES6モジュールローダーポリフィルの上に構築されており、使用されているフォーマットを検出して適切に処理するのに十分なほどスマートです。SystemJSまたES6コードtranspile(とすることができBabel又はTraceur)等のような他の言語TypeScriptCoffeeScriptプラグインを使用。

何が、node moduleなぜそれがブラウザ内にうまく適応していないのかを知りたい。

より有用な記事:


なぜjspmそしてSystemJS

主な目標の一つES6モジュール性は、(インターネット上のどこからでも任意のJavaScriptライブラリをインストールして使用することが本当に簡単にすることですGithubnpmなど、)。必要なものは2つだけです。

  • ライブラリをインストールするための単一のコマンド
  • ライブラリをインポートして使用するための1行のコード

だから、でjspm、あなたはそれを行うことができます。

  1. 次のコマンドでライブラリをインストールします。 jspm install jquery
  2. 1行のコードでライブラリをインポートします。HTMLファイル内で外部参照する必要はありません。

display.js

var $ = require('jquery');

$('body').append("I've imported jQuery!");
  1. 次にSystem.config({ ... })、モジュールをインポートする前に、これらを構成します。通常、実行jspm initすると、config.jsこの目的のために名前が付けられたファイルがあります。

  2. これらのスクリプトを実行させるために、我々は負荷に必要system.jsconfig.jsHTMLページに。その後display.jsSystemJSモジュールローダーを使用してファイルをロードします。

index.html

<script src="jspm_packages/system.js"></script>
<script src="config.js"></script>
<script>
  System.import("scripts/display.js");
</script>

注意:使用することもできnpmWebpack角度2がそれを適用しているよう。jspmと統合するために開発されSystemJS、既存のnpmソースの上で機能するので、あなたの答えはあなた次第です。


3.タスクランナー

タスクランナーとビルドツールは、主にコマンドラインツールです。それらを使用する必要がある理由:一言で言えば:自動化ミニファイ、コンパイル、単体テスト、リンティングなどの反復的なタスクを実行するときに行う必要のある作業が少なくて済みます。これまでは、コマンドラインや手動で行うのに多くの時間がかかりました。

グラント

開発環境の自動化を作成して、コードを前処理したり、構成ファイルを使用してビルドスクリプトを作成したりできますが、複雑なタスクを処理するのは非常に難しいようです。ここ数年人気があります。

のすべてのタスクGruntは、さまざまなプラグイン構成の配列であり、厳密に独立した順次の方法で次々に実行されます。

grunt.initConfig({
    clean: {
    src: ['build/app.js', 'build/vendor.js']
    },

    copy: {
    files: [{
        src: 'build/app.js',
        dest: 'build/dist/app.js'
    }]
    }

    concat: {
    'build/app.js': ['build/vendors.js', 'build/app.js']
    }

    // ... other task configurations ...

});

grunt.registerTask('build', ['clean', 'bower', 'browserify', 'concat', 'copy']);

gulp

自動化と同じですGruntが、構成の代わりにJavaScript、ノードアプリケーションのようにストリームを使用して書き込むことができます。最近を好む。

これはGulpサンプルのタスク宣言です。

//import the necessary gulp plugins
var gulp = require("gulp");
var sass = require("gulp-sass");
var minifyCss = require("gulp-minify-css");
var rename = require("gulp-rename");

//declare the task
gulp.task("sass", function (done) {
  gulp
    .src("./scss/ionic.app.scss")
    .pipe(sass())
    .pipe(gulp.dest("./www/css/"))
    .pipe(
      minifyCss({
        keepSpecialComments: 0,
      })
    )
    .pipe(rename({ extname: ".min.css" }))
    .pipe(gulp.dest("./www/css/"))
    .on("end", done);
});

詳細:https//preslav.me/2015/01/06/gulp-vs-grunt-why-one-why-the-other/


4.足場ツール

スラッシュとヨーマン

それらを使用してスタータープロジェクトを作成できます。たとえば、HTMLとSCSSを使用してプロトタイプを作成し、scss、css、img、fontsなどのフォルダーを手動で作成する代わりに計画しているとします。yeoman簡単なスクリプトをインストールして実行するだけです。その後、あなたのためにここにすべて。

詳細はこちらをご覧ください

npm install -g yo
npm install --global generator-h5bp
yo h5bp

詳細:https//www.quora.com/What-are-the-differences-between-NPM-Bower-Grunt-Gulp-Webpack-Browserify-Slush-Yeoman-and-Express


私の答えは質問の内容と一致していませんが、Googleでこの知識を検索しているときは、常に質問が一番上に表示されるので、要約して答えることにしました。皆さんのお役に立てば幸いです。

この投稿が気に入ったら、trungk18.comの私のブログで詳細を読むことができます。訪問していただきありがとうございます:)

64
Alireza 2017-05-21 17:43.

OK、それらはすべていくつかの類似点があります、それらは異なるそして同様の方法であなたのために同じことをします、私はそれらを以下のように3つの主要なグループに分けます:


1)モジュールバンドラー

webpackとbrowserifyは人気のあるものとして機能し、タスクランナーのように機能しますが、柔軟性が高く、設定としてすべてをバンドルするため、たとえばCSSとJavascriptを含む1つのファイルでbundle.jsとして結果を指定できます。それぞれの詳細については、以下の詳細をご覧ください。

webpack

webpackは、最新のJavaScriptアプリケーション用のモジュールバンドラーです。webpackがアプリケーションを処理するとき、アプリケーションが必要とするすべてのモジュールを含む依存関係グラフを再帰的に作成し、それらすべてのモジュールを少数のバンドル(多くの場合1つのみ)にパッケージ化してブラウザーにロードします。

信じられないほど設定可能ですが、開始するには、エントリ、出力、ローダー、プラグインの4つのコアコンセプトを理解するだけで済みます。

このドキュメントは、詳細な概念固有のユースケースへのリンクを提供しながら、これらの概念の概要を説明することを目的としています。

詳細はこちら

browserify

Browserifyは、ブラウザーで使用するためにコンパイルするnode.jsスタイルのモジュールを作成できるようにする開発ツールです。ノードと同様に、モジュールを個別のファイルに書き込み、module.exports変数とexports変数を使用して外部メソッドとプロパティをエクスポートします。require関数を使用して他のモジュールを要求することもできます。相対パスを省略すると、node_modulesディレクトリ内のモジュールに解決されます。

詳細はこちら


2)タスクランナー

gulpとgruntはタスクランナーであり、基本的にはタスクを作成し、必要なときに実行します。たとえば、プラグインをインストールしてCSSを縮小し、毎回実行して縮小を実行します。それぞれの詳細は次のとおりです。

gulp

gulp.jsは、Fractal InnovationsとGitHubのオープンソースコミュニティによるオープンソースのJavaScriptツールキットであり、フロントエンドWeb開発でストリーミングビルドシステムとして使用されます。これは、Node.jsとNode Package Manager(npm)に基づいて構築されたタスクランナーであり、縮小、連結、キャッシュバスティング、単体テスト、リンティング、最適化などのWeb開発に関連する時間のかかる反復的なタスクの自動化に使用されます。タスクを定義するためのコードオーバーコンフィギュレーションアプローチと、それらを実行するための小さな単一目的のプラグインに依存します。gulpエコシステムには、1000以上のそのようなプラグインが用意されています。

詳細はこちら

うなり声

GruntはJavaScriptタスクランナーであり、縮小、コンパイル、単体テスト、リンティングなどの頻繁に使用されるタスクを自動的に実行するために使用されるツールです。コマンドラインインターフェイスを使用して、ファイル(Gruntfileと呼ばれる)で定義されたカスタムタスクを実行します。 。GruntはBenAlmanによって作成され、Node.jsで記述されています。npm経由で配布されます。現在、Gruntエコシステムでは5000を超えるプラグインが利用可能です。

詳細はこちら


3)パッケージマネージャー

パッケージマネージャーは、アプリケーションで必要なプラグインを管理し、package.jsonを使用してgithubなどを介してプラグインをインストールします。モジュールの更新、インストール、アプリの共有に非常に便利です。それぞれの詳細は次のとおりです。

npm

npmは、JavaScriptプログラミング言語のパッケージマネージャーです。これは、JavaScriptランタイム環境Node.jsのデフォルトのパッケージマネージャーです。これは、npmとも呼ばれるコマンドラインクライアントと、npmレジストリと呼ばれるパブリックパッケージのオンラインデータベースで構成されています。レジストリにはクライアントを介してアクセスし、利用可能なパッケージはnpmWebサイトを介して参照および検索できます。

詳細はこちら

バウアー

Bowerは、HTML、CSS、JavaScript、フォント、さらには画像ファイルを含むコンポーネントを管理できます。Bowerは、コードを連結したり縮小したりすることはありません。必要なパッケージとその依存関係の適切なバージョンをインストールするだけです。まず、Bowerは、世界中からパッケージをフェッチしてインストールし、探しているものを探し、見つけ、ダウンロードし、保存することで機能します。Bowerは、これらのパッケージをマニフェストファイルbower.jsonで追跡します。

詳細はこちら

見逃してはならない最新のパッケージマネージャーです。実際の作業環境では、以前私が主に使用していたnpmと比較して若くて高速です。モジュールを再インストールするために、node_modulesフォルダーを再確認してモジュールの存在を確認します。また、モジュールのインストールにかかる時間も短いようです。

Yarnは、コードのパッケージマネージャーです。これにより、世界中の他の開発者とコードを使用および共有できます。ヤーンはこれを迅速、安全、そして確実に行うので、心配する必要はありません。

Yarnを使用すると、さまざまな問題に対して他の開発者のソリューションを使用できるため、ソフトウェアの開発が容易になります。問題が発生した場合は、問題を報告したり、貢献したりできます。問題が修正されたら、Yarnを使用してすべてを最新の状態に保つことができます。

コードは、パッケージ(モジュールと呼ばれることもあります)と呼ばれるものを介して共有されます。パッケージには、共有されているすべてのコードと、パッケージを説明するpackage.jsonファイルが含まれています。

詳細はこちら


51
dcohenb 2016-05-01 23:04.

npmcompareでいくつかの技術的な比較を見つけることができます

browserify、grunt、gulp、webpackの比較

ご覧のとおり、webpackは非常によく維持されており、平均して4日ごとに新しいバージョンがリリースされます。しかし、Gulpはそれらすべての中で最大のコミュニティを持っているようです(Githubに2万以上の星があります)Gruntは(他のものと比較して)少し無視されているようです

だから、どちらかを選択する必要がある場合は、Gulpを使用します

43
DeadWoroz 2016-04-15 05:53.

npmに関する小さな注意:npm3はフラットな方法で依存関係をインストールしようとします

https://docs.npmjs.com/how-npm-works/npm3#npm-v3-dependency-resolution

15
prosti 2016-11-22 15:23.

webpack&webpack-dev-serverとは何ですか?公式ドキュメントによると、これはモジュールバンドラーですが、私にとっては単なるタスクランナーです。違いは何ですか?

webpack-dev-serverは、Webpack開発者が何をしているかを即座にフィードバックするために使用するライブリロードWebサーバーです。開発中にのみ使用する必要があります。

このプロジェクトは、nof5ユニットテストツールに大きく影響を受けています。

名前が示すように、WebpackWebのSINGLE パッケージを作成します。パッケージは最小化され、単一のファイルに結合されます(私たちはまだHTTP 1.1時代に生きています)。Webpackは、リソース(JavaScript、CSS、画像)を組み合わせて、次のように注入するという魔法を実行します<script src="assets/bundle.js"></script>

モジュールの依存関係、および依存関係を取得してそれらをバンドルする方法を理解する必要があるため、モジュールバンドラーと呼ぶこともできます

どこでbrowserifyを使用しますか?node / ES6のインポートでも同じことはできませんか?

Webpackを使用するのとまったく同じタスクでBrowserifyを使用できます。–ただし、Webpackはよりコンパクトです。

Webpack2のES6モジュールローダー機能System.importを使用していることに注意してください。これは、単一のブラウザーがネイティブにサポートしているわけではありません。

npm +プラグインでgulp / gruntを使用するのはいつですか?

Gulp、Grunt、Brokoli、Brunch、Bower忘れる ことができます。代わりに、直接NPMコマンドラインスクリプトを使用して、あなたがのためにここにこのような追加パッケージを排除することができますガルプ

var gulp        = require('gulp'),
  minifyCSS     = require('gulp-minify-css'),
  sass          = require('gulp-sass'),
  browserify    = require('gulp-browserify'),
  uglify        = require('gulp-uglify'),
  rename        = require('gulp-rename'),
  jshint        = require('gulp-jshint'),
  jshintStyle   = require('jshint-stylish'),
  replace       = require('gulp-replace'),
  notify        = require('gulp-notify'),

プロジェクトの構成ファイルを作成するときに、GulpおよびGrunt構成ファイルジェネレーターを使用できる可能性があります。この方法では、Yeomanまたは同様のツールをインストールする必要はありません。

13
Dmitry Sheiko 2017-08-14 23:43.

Webpackバンドラーです。同様にBrowserfy、それはモジュールの要求(のためのコードベースを検索しますrequireimport)と再帰的にそれらを解決します。さらに、WebpackJavaScriptのようなモジュールだけでなく、CSS、画像、HTML、文字通りすべてを解決するように構成できます。特にワクワクWebpackするのは、コンパイルされたモジュールと動的にロードされたモジュールの両方を同じアプリに組み合わせることができることです。したがって、特にHTTP / 1.xを介して、実際のパフォーマンスが向上します。ここで例を挙げて説明しましたhttp://dsheiko.com/weblog/state-of-javascript-modules-2017/ バンドラーの代替として考えることができますRollup.jshttps://rollupjs.org/) 、コンパイル中にコードを最適化しますが、見つかった未使用のチャンクをすべて削除します。

の場合AMD、代わりにRequireJSネイティブを使用できますES2016 module systemが、System.jshttps://github.com/systemjs/systemjs)をロードします

また、私はそれを指すことになりnpm、多くの場合のような自動化ツールとして使用されていますgruntgulphttps://docs.npmjs.com/misc/scriptsをチェックしてください。私は個人的に、他の自動化ツールを避けてnpmスクリプトを使用していますが、以前は非常に興味がありましたgrunt。他のツールでは、パッケージ用の無数のプラグインに依存する必要があります。これらのプラグインは、適切に記述されておらず、積極的に保守されていないことがよくあります。npmそのパッケージを知っているので、次のような名前でローカルにインストールされたパッケージのいずれかを呼び出します。

{
  "scripts": {
    "start": "npm http-server"
  },
  "devDependencies": {
    "http-server": "^0.10.0"
  }
}

パッケージがCLIをサポートしている場合、実際には原則としてプラグインは必要ありません。

13
Ellone 2016-10-15 05:58.

Yarnは最近のパッケージマネージャーであり、おそらく言及する価値があります。
だから、ここにあります:https//yarnpkg.com/

私の知る限り、npmとbowerの両方の依存関係をフェッチでき、その他の優れた機能があります。

Related questions

MORE COOL STUFF

「水曜日」シーズン1の中心には大きなミステリーがあります

「水曜日」シーズン1の中心には大きなミステリーがあります

Netflixの「水曜日」は、典型的な10代のドラマ以上のものであり、実際、シーズン1にはその中心に大きなミステリーがあります.

ボディーランゲージの専門家は、州訪問中にカミラ・パーカー・ボウルズが輝くことを可能にした微妙なケイト・ミドルトンの動きを指摘しています

ボディーランゲージの専門家は、州訪問中にカミラ・パーカー・ボウルズが輝くことを可能にした微妙なケイト・ミドルトンの動きを指摘しています

ケイト・ミドルトンは、州の夕食会と州の訪問中にカミラ・パーカー・ボウルズからスポットライトを奪いたくなかった、と専門家は言う.

一部のファンがハリー・スタイルズとオリビア・ワイルドの「非常に友好的な」休憩が永続的であることを望んでいる理由

一部のファンがハリー・スタイルズとオリビア・ワイルドの「非常に友好的な」休憩が永続的であることを望んでいる理由

一部のファンが、オリビア・ワイルドが彼女とハリー・スタイルズとの間の「難しい」が「非常に友好的」な分割を恒久的にすることを望んでいる理由を見つけてください.

エリザベス女王の死後、ケイト・ミドルトンはまだ「非常に困難な時期」を過ごしている、と王室の専門家が明らかにする 

エリザベス女王の死後、ケイト・ミドルトンはまだ「非常に困難な時期」を過ごしている、と王室の専門家が明らかにする&nbsp;

エリザベス女王の死後、ケイト・ミドルトンが舞台裏で「非常に困難な時期」を過ごしていたと伝えられている理由を調べてください.

セントヘレナのジェイコブのはしごを登るのは、気弱な人向けではありません

セントヘレナのジェイコブのはしごを登るのは、気弱な人向けではありません

セント ヘレナ島のジェイコブズ ラダーは 699 段の真っ直ぐ上る階段で、頂上に到達すると証明書が発行されるほどの難易度です。

The Secrets of Airline Travel Quiz

The Secrets of Airline Travel Quiz

Air travel is far more than getting from point A to point B safely. How much do you know about the million little details that go into flying on airplanes?

Where in the World Are You? Take our GeoGuesser Quiz

Where in the World Are You? Take our GeoGuesser Quiz

The world is a huge place, yet some GeoGuessr players know locations in mere seconds. Are you one of GeoGuessr's gifted elite? Take our quiz to find out!

バイオニック読書はあなたをより速く読むことができますか?

バイオニック読書はあなたをより速く読むことができますか?

BionicReadingアプリの人気が爆発的に高まっています。しかし、それは本当にあなたを速読術にすることができますか?

フィリップス40インチ4Kカーブモニターレビュー:ゴーストをあきらめる

フィリップス40インチ4Kカーブモニターレビュー:ゴーストをあきらめる

フィリップスのBDM4037UWは、最大4つのフルHD入力を同時に表示できる40インチのウルトラHD曲面LCDモニターであり、マルチプラットフォームゲーマーに最適な大型モニターのようです。そして、それは、2、3の小さな失敗と1つの大きなつまずきがなければ、そうなるでしょう。

アトランタは2018年まで戻ってきませんが、ドナルドグローバーはFX用のテレビをもっと作っています

アトランタは2018年まで戻ってきませんが、ドナルドグローバーはFX用のテレビをもっと作っています

(写真:Rodin Eckenroth / Getty Images)良いニュースと悪いニュースがあります。前者?FXは本日、ドナルドグローバーがFXプロダクションと独占的な全体的な制作契約を結んだことを発表しました。つまり、グローバーからのより多くの番組がFXや他の場所で行われることを意味します。

スクリームクイーンズは、いくつかの「ゴーストストーリー」で地獄のようにメタを取得します

スクリームクイーンズは、いくつかの「ゴーストストーリー」で地獄のようにメタを取得します

ライアン・マーフィーのように、毎ターンショーランナーのIDについて多くを学ぶことはめったにありません。その奇妙なことは、特定の瞬間にライアンマーフィーの工芸品について言えることのすべてですが、彼がグリーの特徴を使ってスピンザボトルをプレイしている場合でも、アメリカンホラーストーリーの壁で衝撃画像のスパゲッティを投げている場合でも、それは光ります。

イーロンマスクは、Twitterのフィードバックに基づいてテスラの車に基本的な機能を追加し続けています

イーロンマスクは、Twitterのフィードバックに基づいてテスラの車に基本的な機能を追加し続けています

自動車のパイオニアでありテスラのCEOであるイーロンマスクは、ツイッターでのテスラの所有者のフィードバックに応えて、今週末に多くの時間を費やしました。フィードバックは建設的であり、すぐにより良い車になる可能性がありますが、フォーラムでは急速に成長している自動車メーカーのカスタマーサービスの問題に焦点を当てています。

ケイト・ミドルトンとウィリアム王子は、彼らが子供たちと行っているスパイをテーマにした活動を共有しています

ケイト・ミドルトンとウィリアム王子は、彼らが子供たちと行っているスパイをテーマにした活動を共有しています

ケイト・ミドルトンとウィリアム王子は、子供向けのパズルの本の序文を書き、ジョージ王子、シャーロット王女、ルイ王子と一緒にテキストを読むと述べた.

事故で押しつぶされたスイカは、動物を喜ばせ水分補給するために野生生物保護団体に寄付されました

事故で押しつぶされたスイカは、動物を喜ばせ水分補給するために野生生物保護団体に寄付されました

Yak's Produce は、数十個のつぶれたメロンを野生動物のリハビリ専門家であるレスリー グリーンと彼女のルイジアナ州の救助施設で暮らす 42 匹の動物に寄付しました。

デミ・ロヴァートは、新しいミュージシャンのボーイフレンドと「幸せで健康的な関係」にあります: ソース

デミ・ロヴァートは、新しいミュージシャンのボーイフレンドと「幸せで健康的な関係」にあります: ソース

8 枚目のスタジオ アルバムのリリースに向けて準備を進めているデミ ロヴァートは、「スーパー グレート ガイ」と付き合っている、と情報筋は PEOPLE に確認しています。

Plathville の Kim と Olivia Plath が数年ぶりに言葉を交わすことへようこそ

Plathville の Kim と Olivia Plath が数年ぶりに言葉を交わすことへようこそ

イーサン プラスの誕生日のお祝いは、TLC のウェルカム トゥ プラスビルのシーズン 4 のフィナーレで、戦争中の母親のキム プラスと妻のオリビア プラスを結びつけました。

仕事の生産性を高める 8 つのシンプルなホーム オフィスのセットアップのアイデア

仕事の生産性を高める 8 つのシンプルなホーム オフィスのセットアップのアイデア

ホームオフィスのセットアップ術を極めよう!AppExert の開発者は、家族全員が一緒にいる場合でも、在宅勤務の技術を習得しています。祖父や曽祖父が共同家族で暮らしていた頃の記憶がよみがえりました。

2022 年、私たちのデジタル ライフはどこで終わり、「リアル ライフ」はどこから始まるのでしょうか?

20 年前のタイムトラベラーでさえ、日常生活におけるデジタルおよびインターネットベースのサービスの重要性に驚くことでしょう。MySpace、eBay、Napster などのプラットフォームは、高速化に焦点を合わせた世界がどのようなものになるかを示してくれました。

ニューロマーケティングの秘密科学

ニューロマーケティングの秘密科学

マーケティング担当者が人間の欲望を操作するために使用する、最先端の (気味が悪いと言う人もいます) メソッドを探ります。カートをいっぱいにして 3 桁の領収書を持って店を出る前に、ほんの数点の商品を買いに行ったことはありませんか? あなたは一人じゃない。

地理情報システムの日: GIS 開発者として学ぶべき最高の技術スタック

地理情報システムの日: GIS 開発者として学ぶべき最高の技術スタック

私たちが住んでいる世界を確実に理解するには、データが必要です。ただし、空間参照がない場合、このデータは地理的コンテキストがないと役に立たなくなる可能性があります。

Language