demo04 webpack + babel7

時間 2019-12-07

標籤 demo04 demo webpack babel7 babel 简体版

原文原文鏈接

1.關於 babel 7 版本

babel 7 於 2018 年 8 月份發佈，在 babel 7 中，全部官方包改名爲以 @babel 爲開頭,而且 babel 7 推薦使用 babel.config.js 來配置 babel 。javascript

關於 babel 7 的重大改變，請參考這篇文章：Babel 7 發佈html

對 babel 7 不熟的請先擼一下 babel 7 的配置文檔：babel.docschina.org/docs/en/java

2.安裝相關依賴包

@babel 相關node

npm install --save-dev @babel/core @babel/preset-env
npm install --save @babel/polyfill //(注意沒有-dev )
複製代碼

webpack 相關webpack

npm install --save-dev babel-loader
複製代碼

相關包介紹：git

@babel/core: babel的核心功能github

@babel/preset-env: @babel/preset-env 是一組官方已經配置好的babel plugins預設，省去了本身配置的plugins的麻煩web

@babel/polyfill: @babel/polyfills 用來實現全部新的javascript功能，好比 Promise , WeadMap , Array.prototype.includes 等chrome

@babel/polyfills 的三種使用方法npm

方法1）在代碼入口 import "@babel/polyfill";

方法2）經過配置 "useBuiltIns: "usage"（推薦用法）

方法3）webpack 的 entry 中引入

entry: ["@babel/polyfill","./src/app.js"] // "@babel/polyfill" 需做爲第一個
複製代碼

注意，@babel/polyfill 須要打包進代碼中，所以須要以 npm install（沒有-dev）--save @babel/polyfill 的形式來安裝

3.目錄結構

// `--` 表明目錄， `-` 表明文件
  --demo04
    --src
      -app.js
    -babel.config.js
    -index.html
    -webpack.config.js
複製代碼

src/app.js

// import "@babel/polyfill";
let func = () => { };

/** * Array.prototype.includes 不兼容 ie 11,詳見 mdn 文檔 * https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/includes * 因此須要經過 @babel/polyfill 來實現 */
const pets = ['cat', 'dog', 'bat'];
console.log(pets.includes('cat'));

/** * new Set不兼容 ie 11,詳見 mdn 文檔 * https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set */
const set1 = new Set([1, 2, 3, 4, 5]);
console.log(set1.has(1));

/** * WeakMap 的 set方法在 ie 11 下不支持，詳見 mdn 文檔 * https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/WeakMap */
var o1 = {},
  o2 = function () { },
  o3 = window;
let weakmap = new WeakMap();
weakmap.set(o1, 1);
weakmap.set(o2, 2);
weakmap.set(o3, 3);
console.log(weakmap.get(o1));   // => 1
複製代碼

4.編寫 babel 配置文件

babel.config.js

const presets = [
  [
    "@babel/env",
    {
      targets: { // 配置須要兼容的瀏覽器
        edge: "17",
        firefox: "60",
        chrome: "67",
        safari: "11.1",
        ie: "11"
      },
      useBuiltIns: "usage"
    },
  ],
];

module.exports = { presets };
複製代碼

useBuiltIns 說明：

經過設置 "@babel/env" 的 "useBuiltIns" 爲 "usage" ，省去了手動導入 @babel/polyfill 的過程，並且更重要的是，經過此方式，babel 只會幫你 import 代碼中所用到的 polyfill，避免導入整個 @babel/polyfill 包（壓縮後將近80k）。

(你能夠把 useBuiltIns 註釋，而且在 app.js 手動 import "@babel/polyfill" 試試，會致使整個包變大。)

5.編寫 webpack 配置文件

webpack.config.js

module.exports = {
  entry: {
    app: "./src/app.js"
  },
  output: {
    filename: "bundle.js"
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /(node_modules)/,
        use: {
          loader: "babel-loader"
        }
      }
    ]
  }
};
複製代碼