Javascript五十問-源から詳しく言えばWebpackとGulp

4815 ワード

前言:Webpackとgulpは現在の圏内で比較的活発なフロントエンド構築ツールである.ネット上では両者を比較する文章が多く、面接でもよく見かけるgulp，Webpack という質問です.初心者にとって、両者はよく認識できないが、今日、事件の源から、Webpackとgulpをはっきり言っている.
Gulp
それは2014年で、JQueryの風景は長年ですが、先端は暗流が湧いています.MVVMが提案したばかりで、Angularは急速に成長し、ReactとVueもオープンして1年も経たないうちに、まだ冷たい言語に属している.その時、フロントエンドの労働者が直面している主な矛盾はとにある.開発者はウェブサイトを公開するために、開発とは関係のない仕事を繰り返すことが多く、手動でこれらの仕事を完成すると大きな挫折感をもたらします.この時、自動化構築ツールと運に応じて生まれ、gulpは大波で砂を洗う勝利者である.
Gulpはストリームのフロントエンド構築ツール、nodejsのstream操作に基づいてデータを読み取り、操作する.ファイルの変換、圧縮、マージ、傍受、自動配置などの機能を実現できます.gulpは強力なプラグインライブラリを持ち、基本的に開発ニーズを満たし、開発者も自分のニーズに合わせてカスタムプラグインを開発することができます.せっかくなのでgulpはapiが5つしかなく、使いやすいです.

const gulp = require('gulp');
const sass = require("gulp-sass")

gulp.task("sassStyle",function() {
    gulp.src("style/*.scss")
        .pipe(sass())
        .pipe(gulp.dest("style"))
})

上は基本的なgulpfileプロファイルで、scssファイルからcssファイルへの変換を実現しています.端末にgulp sassStyleを入力すればファイル処理が可能となる.gulpの場合、sass形式のドキュメントをcssファイルに変換するなど、taskがあります.1つのtaskにとって、エントリファイル、すなわちtaskがあり、最もターゲットファイル、すなわちgulp.srcがある.入力されるとgulpはgulp.destと理解され、が入力され、xに従ってfuncionが生成される.
Gulpは簡単で、迅速で、自動化された構築案で、多くの開発者から愛されています.しかし、どのようなチャンスが、webpackに先端工事化の半分を占めたのだろうか.
Webpack
ソリューションは常にニーズに追いついています.ReactとVueのシェアがますます大きくなるにつれて、spa開発モデルの応用はますます多くの分野において、y文法の提出と大規模な応用、ES6 Module開発方式はますます人々の愛顧を受けている.フロントエンドファイル間の依存性が高まっているため、これらの依存を解析し、筋道立ててパッケージ化し、要求を最適化し、ついでにブラウザが認識できる言語に解析するツールが必要です.これはwebpackが担当している仕事です.多くの開発者もreactやvueのプロジェクトからwebpackを手に入れている.
画像はインターネットから来て、削除します
Webpackは、フロントエンドリソースおよびのツールである.多くのばらばらなモジュールを依存とルールに従って、本番環境の導入に適したフロントエンドリソースにパッケージ化できます.また、必要に応じてロードされたモジュールをコード分割し、実際に必要に応じて非同期でロードすることもできます.Webpack公式サイトからです.だからWebpackは2つのことしかできません:必要に応じてロードして、パッケージします.

module.exports = {
  //     ，        ，                   chunk。
  entry: {
    bundle: [
      'webpack/hot/dev-server',
      'webpack-dev-server/client?http://localhost:8080',
      path.resolve(__dirname, 'app/app.js')
    ]
  },
  //       (       )。
  resolve: {
    alias: {
      'react': pathToReact
    }
  },
  //     ，        ，           。
  output: {
    path: path.resolve(__dirname, 'build'),
    filename: '[name].js'
  },
  //             loader ，   css     loader ，es6    loader，     loader。
  module: {
    loaders: [
      {
        test: /\.js$/,
        loader: 'babel',
        query: {
          presets: ['es2015', 'react']
        }
      }
    ],
    noParse: [pathToReact]
  },
  // webpack      ，  webpack             。
  plugins: [
    new webpack.HotModuleReplacementPlugin()
  ]
};

上は比較的簡単なwebpackプロファイルwebpackです.config.js、gulpが1元関数である場合、webpackは多元関数または加工工場である.Webpackはエントリファイルから始まり、依存するすべてのコードブロックを再帰的に探し出し、コードブロックをloaderに従って新しい内容に解析します.Webpackは各特定の時期に対応するイベントをブロードキャストし、プラグインはこれらのイベントを傍受し、あるイベントで特定の操作を行います.一般的に言えば、webpack自体は各ファイル間の依存関係を再帰的に見つけ、この過程でloadersを使用してファイルを解析し、最後に、各異なるイベント段階でプラグインはファイルを統一的に処理することができる.
webpack.configファイルには、次のセクションが含まれます.
1.entry:エントリ、webpackはこのファイルに反復を開始するように尋ねます.
2.output:パッケージ化されたファイル出口.
3.module:モジュールで、webpackの1つのモジュールが1つのファイルに対応します.Webpackはentryから始まり、依存するすべてのモジュールを再帰的に見つけます.
4.loaders:ファイル解析の各種変換器
5.plugin:拡張プラグイン
Webpackのプロファイルと構築方法は複雑ですが、ここでは詳しく説明しません.興味のある学生は私が列挙した参考文献の3番目の文章を参考にしたり、私のコラムに注目したりすることができます.後期にはwebpackに関する学習ノートを出します.
比較
だから、Webpackとgulpはフロントエンドのエンジニアリングの管理ツールですが、両者の側面の重点は違います.gulpは自動化された構築ツールに注目しています.コードを書き終わったら、gulpはコンパイル、圧縮、解析を手伝ってくれます.Webpackはのパッケージ作業に注目しています.依存するファイルを合理的に整理し、オンデマンドでロードする方法に重点を置いています.
まとめ
総じて言えば、webpackはパッケージで起業したが、gulpが実現できる機能は、Webpackもできる.では、私たちはこれから馬首だけを見なければならないのではないでしょうか.いや、いや!Webpackの機能は強いが、その欠点もここから来ている.Webpackは軽量級のツールではなく、学習曲線もgulpほど緩やかではありません.かつてgulpはjsパッケージの不足を補うためにgulp-webpackプラグインの出現もあった.しかしwebpackはこのように強く、es 6ファイルを解析するだけでは、大きなマラ車のような感じがします.私のプロジェクトの実践経験に基づいて、もしあなたが複雑なプロジェクトを構築するならば、プロジェクトはwebpackあるいはvueを使って、モジュール化してリードして、それではWebpackを選んで、Webpackは生まれつきreactで、更にの応用シーンに適して、gulpはSPAの下で明らかに後力が足りません.ツールを開発するだけであればgulpを選択してください.jsパッケージについては、SPAのよりユニークなものがあります.結局、年会抽選ツールを書いて雰囲気を盛り上げるだけで、webpack火種送炭は必要ありません.
まとめると、gulpとWebapckはそれぞれ長所があり、東風が西風を圧倒することは存在しないが、先端工事化の大旗の下では、Webpackとgulpだけではなく、rollupとrollupの一席を見ることができる.そのため、本当の仕事の中で、やはりプロジェクト自身の特徴を結びつけて、browserifyを避けなければなりません.
参考文献
1、JavaScript開発者のツールボックスは非常に実用的である2、Gulp公式サイト3、超詳細なWebpack解読-五星推薦4、端構築ツールの争い-Webpack vs Gulp誰が砂浜で撮られる-五星推薦

Vuex--ステータス管理

フロントエンドエラー収集(Vue.js、微信ウィジェット)