你對項目裏的依賴包瞭解嗎

注意：本文全部依賴包是目前最新版本的

如今不少開發朋友對於使用webapck、babel搭建開發環境已經不陌生，但不多去系統性的瞭解項目依賴。

本文從環境依賴包提及，讓你對本身的開發環境有更深的瞭解。

爲了簡單，咱們將依賴分個類：Babel相關🔥、Webpack相關🔥、可選的依賴包。
注意：帶🔥 是指必需的依賴， 下面咱們一個一個來講。

Babel相關🔥

要使用最新的ES6+語法，必須少不了Babel轉碼，那麼要搭建一個徹底體的環境，應該使用哪些依賴呢？

首先，咱們安裝最核心的依賴： @babel/cli、@babel/core、@babel/polyfill、@babel/register、core-js

下面是他們的一些簡單解釋：

{   
    /*
    Babel 自帶了一個內置的 CLI 命令行工具，可經過命令行編譯文件。
    */
    "@babel/cli": "^7.4.3", 
    /*
    看到`core`就知道它是`babel`的核心，一些轉碼操做都是基於它完成的,
    因此它是必須的依賴。
    */
    "@babel/core": "^7.4.3",
    /*
    Babel默認只轉換新的JavaScript語法，可是不轉換新的API，好比 
    `Iterator`、`Generator`、`Set`、`Maps`、`Proxy`、`Reflect`、
    `Symbol`、`Promise` 等全局對象，以及一些定義在全局對象上的方法（比
    如 `Object.assign` ）都不會轉碼。而`@babel/polyfill`就能夠作到。
    */
    "@babel/polyfill": "^7.4.3",

    /*
    讓webpack.config.babel.js也支持ES6語法
    */
    "@babel/register": "^7.4.0",
   
    /*
    通俗說就是動態polyfill，它能夠動態加載須要的新API，具體能夠看https://github.com/zloirock/core-js#readme
    */
    "core-js": "3",
   
  }

下面咱們安裝必需的preset和plugin：@babel/preset-env、@babel/plugin-proposal-class-properties、@babel/plugin-proposal-decorators、@babel/plugin-proposal-object-rest-spread、@babel/plugin-syntax-dynamic-import

下面是它們的一些解釋：

{
    /*
    根據指定環境來轉碼，這個不用說，必裝
    */
    "@babel/preset-env": "^7.4.3",
    
    /*
    對class中屬性初始化語法、static等語法進行處理
    */
    "@babel/plugin-proposal-class-properties": "^7.4.0",
    
    /*
    裝飾器語法處理
    */
    "@babel/plugin-proposal-decorators": "^7.4.0",
    
    /*
    對象rest、spread語法處理
    */
    "@babel/plugin-proposal-object-rest-spread": "^7.4.3",
    
    /*
    import()語法處理
    */
    "@babel/plugin-syntax-dynamic-import": "^7.2.0",
}

安裝好了以上preset和plugins，咱們須要新建一個.babelrc文件來使用它們：

{
  "presets": [
    [
      "@babel/env",
      {
        "useBuiltIns": "usage",
        //若是useBuiltIns選項爲usage，則要申明corejs的版本，這也是爲何要安裝core-js的緣由
        "corejs": "3", 
        "loose": true
      }
    ],
    "@babel/typescript", //若是你的環境有typescript，記得安裝它
    "@babel/react" //若是你使用了react，也要記得安裝哦
  ],
  "plugins": [
    [
      "@babel/plugin-proposal-decorators",
      {
        "legacy": true
      }
    ],
    [
      "@babel/proposal-class-properties",
      {
        "loose": true
      }
    ],

    "@babel/proposal-object-rest-spread",
    "@babel/plugin-syntax-dynamic-import"
  ]
}

以上咱們對於ES6+最新語法的轉碼已經徹底沒有問題了，下面咱們開始說說Webpack有哪些必須要安裝的依賴

Webpack相關🔥

上面的Babel轉碼已經配置完成。但咱們要使用它們，還要依靠webpack來告訴咱們須要轉碼的項目入口以及在轉碼過程當中須要的配置（好比loader）。

既然須要webpack，那麼咱們安裝webapck以及它必需的依賴包：webpack、webpack-cli、webpack-dev-server、babel-loader、html-webpack-plugin

安裝完成後咱們新建webpack.config.babel.js，而後咱們來配置一下：

import webpack from 'webpack';
import path from 'path';
import HtmlWebpackPlugin from 'html-webpack-plugin';

export default {
  mode: 'development',
  entry: {
    app: path.resolve(__dirname, '../src/index.tsx')
  },
  devtool: 'cheap-module-source-map',
  output: {
    path: path.resolve(__dirname, '../build'),
    filename: 'bundle-[name]-[hash].js',
    chunkFilename: 'chunk-[name]-[hash].js'
  },
  resolve: {
    extensions: ['.tsx', '.ts', '.js', '.less', '.json'],
    modules: ['node_modules']
  },
  module: {
    rules: [
      {
        test: /\.(ts|js)x?$/,
        exclude: /node_modules/,
        use: [
          {
            loader: 'babel-loader'
          }
        ]
      }
    ]
  },
  plugins: [
    
    new HtmlWebpackPlugin({
      template: path.resolve(__dirname, '../src/index.ejs'),
      templateParameters: {
        title: 'test'
      }
    })
    
  ],
  devServer: {
    port: 8080,
    host: 'localhost',
    disableHostCheck: true
  }
};

細心的人看出來，上面的配置用的是ES6的寫法，要作到這點須要知足：

1. 文件名稱必須是webpack.config.babel.js
2. 須要安裝@babel/register 這個咱們前面已經安裝了

tips: 這裏我使用的是ejs做爲html的模板。

到這裏，必需的依賴包已經安裝完成了，下面的可選依賴是根據你們項目的具體狀況去安裝，好比樣式、圖片、字體、css壓縮配置等等...

這裏我推薦幾個好用的依賴包：

{
    /*
       將CSS提取爲獨立的文件的插件，對每一個包含css的js文件都會建立一個CSS文件，支持按需加載css和sourceMap
    */
    "mini-css-extract-plugin": "^0.6.0",
    /*
       css壓縮
    */
    "optimize-css-assets-webpack-plugin": "^5.0.1",
    
    /*
        對打包的js進行壓縮處理的webapck插件
    */
    "terser-webpack-plugin": "^1.2.3",

     /*
        多進程處理打包，加快打包速度
    */
    "thread-loader": "^2.1.2",
    
    /*
        webpack打包進度條
    */
    "webpackbar": "^3.2.0"

}

至於webpack裏的各類loader，你們根據本身的項目去安裝吧。

就說到這裏啦，若是你有好用的npm包，歡迎推薦~