运用 Webpack 与 Babel 设置 ES6 开辟环境

装置 Webpack

装置：

# 当地装置
$ npm install --save-dev webpack webpack-cli

# 全局装置
$ npm install -g webpack webpack-cli

在项目根目录下新建一个设置文件—— webpack.config.js 文件：

const path = require('path');

module.exports = {
  mode: 'none',
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  }
}

在 src 目录下新建 a.js 文件：

export const isNull = val => val === null

export const unique = arr => [...new Set(arr)]

在 src 目录下新建 index.js 文件：

import { isNull, unique } from './a.js'

const arr = [1, 1, 2, 3]

console.log(unique(arr))
console.log(isNull(arr))

实行编译打包敕令，完成后翻开 bundle.js 文件发明 isNull 和 unique 两个函数没有被编译，和 webpack 官方说法一致：webpack 默许支撑 ES6 模块语法，要编译 ES6 代码依旧须要 babel 编译器。

装置设置 Babel 编译器

运用 Babel 必须先装置 @babel/core 和 @babel/preset-env 两个模块，个中 @babel/core 是 Babel 的中心存在，Babel 的中心 api 都在这个模块内里，比方：transform。而 @babel/preset-env 是一个智能预设，许可您运用最新的 JavaScript，而无需微观治理您的目的环境须要哪些语法转换（以及可选的浏览器polyfill）。因为这里运用的打包东西是 Webpack，所以还须要装置 babel-loader 插件。

装置：

$ npm install --save-dev @babel/core @babel/preset-env babel-loader

新建 .babelrc 文件：

{
  "presets": [
    "@babel/preset-env"
  ]
}

修正 webpack 设置文件（webpack.config.js）：

const path = require('path');

module.exports = {
  mode: 'none',
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test: /\.js$/,
          loader: 'babel-loader',
          exclude: /node_modules/
      }
    ]
  }
}

因为 babel 默许只转换 ES6 新语法，不转换新的 API，如：Set、Map、Promise等，所以须要装置 @babel/polyfill 转换新 API。装置 @babel/plugin-transform-runtime 优化代码，@babel/plugin-transform-runtime 是一个能够重复运用 Babel 注入的协助程序代码来节约代码的插件。

装置 @babel/polyfill、@babel/plugin-transform-runtime 两个插件：

$ npm install --save-dev @babel/polyfill @babel/plugin-transform-runtime

修正 .babelrc 设置文件：

{
  "presets": [
    ["@babel/preset-env", {
      "useBuiltIns": "usage", // 在每一个文件中运用polyfill时，为polyfill增加特定导入。应用绑缚器只加载一次雷同的polyfill。
      "modules": false // 启用将ES6模块语法转换为其他模块范例，设置为false不会转换模块。
    }]
  ],
  "plugins": [
    ["@babel/plugin-transform-runtime", {
      "helpers": false
    }]
  ]
}

末了，设置兼容的浏览器环境。在 .babelrc 设置文件中设置 targets 属性：

{
  "presets": [
    ["@babel/preset-env", {
      "useBuiltIns": "usage",
      "modules": false,
      "targets": {
        "browsers": "last 2 versions, not ie <= 9"
      }
    }]
  ],
  "plugins": [
    ["@babel/plugin-transform-runtime", {
      "helpers": false
    }]
  ]
}

实行敕令编译代码，完成后搜检 bundle.js 文件，是不是胜利转换新 API 。假如发明以下代码即申明转换胜利：

// 23.2 Set Objects
module.exports = __webpack_require__(80)(SET, function (get) {
  return function Set() { return get(this, arguments.length > 0 ? arguments[0] : undefined); };
}, {
  // 23.2.3.1 Set.prototype.add(value)
  add: function add(value) {
    return strong.def(validate(this, SET), value = value === 0 ? 0 : value, value);
  }
}, strong);

其他关于 js 紧缩和 Webpack 启用 tree shaking 功用的设置本文不在赘述。

设置文件概况概览

package.json 文件：

{
  "name": "demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.3.4",
    "@babel/plugin-transform-runtime": "^7.3.4",
    "@babel/polyfill": "^7.2.5",
    "@babel/preset-env": "^7.3.4",
    "babel-loader": "^8.0.5",
    "webpack": "^4.29.6",
    "webpack-cli": "^3.2.3"
  }
}

webpack.config.js 文件：

const path = require('path');

module.exports = {
  mode: 'none',
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test: /\.js$/,
          loader: 'babel-loader',
          exclude: /node_modules/
      }
    ]
  }
}

.babelrc 文件：

{
  "presets": [
    ["@babel/preset-env", {
      "useBuiltIns": "usage",
      "modules": false,
      "targets": {
        "browsers": "last 2 versions, not ie <= 9"
      }
    }]
  ],
  "plugins": [
    ["@babel/plugin-transform-runtime", {
      "helpers": false
    }]
  ]
}

符录

usuallyjs 项目是本人近来建立的开源项目，迎接感兴趣的偕行交换。

usuallyjs: https://github.com/JofunLiang/usuallyjs