用 ES6 编写 Webpack 的配置文件

2019年8月27日 194次阅读 来源: darkbaby123

概述

我最近在整顿一个 Ionic + Webpack 的项目模板，由于项目代码都是 ES6 的，所以我也想在其他处所也用 ES6 。个中一个处所就是 webpack.config.js 。如今有三种要领能够做到这一点，不过各有利弊。

要领 1：升级到 Node.js 4

Node.js 4 兼并了 io.js ，所以天然带有统统 io.js 的特征，个中就包含部份 ES6 特征的支撑。不过如今的版本 (4.2.1) 只支撑部份特征，尤其是以下几个很经常运用的都不支撑：

  1. 函数默认值

  2. 解构和其相干的统统功用

  3. ES6 模块

详细支撑水平可看 这里 。Babel 达到了 71% ，Node.js 4 达到了 53% ，Node.js 5 也只达到了 59% 。真是不容乐观。

总结：这个要领合适依靠少数 ES6 特征，又肯定运用 Node.js 4 及以上版本的人，不能算是群众计划。

要领 2：webpack.config.babel.js

这个最简朴，把 webpack.config.js 更名成 webpack.config.babel.js 就行。统统敕令依旧。Webpack 在实行时会先用 Babel 把设置文件转成 ES5 代码再继承处置惩罚。统统 Babel 支撑的言语特征都能够用。

这是一个 Webpack 支撑，但文档里完全没有提到的特征 （应当立时就会加上）。只需你把设置文件定名成 webpack.config.[loader].js ，Webpack 就会用响应的 loader 去转换一遍设置文件。所以要运用这个要领，你须要装置 babel-loader 和 babel-core 两个包。记着你不须要完全的 babel 包。

理论上这类做法支撑任何 loader ，所以你也能够用 CoffeeScript 或许其他言语去写，只需有响应的 loader 就行。

这个要领另有个优点，假如你在 webpack.config.babel.js 里 import 了其他文件，谁人文件也会被 Babel 编译。比方：

// webpack.config.babel.js

// 这个文件也能够用 ES6 写
import config from './some-config'

export default {
  // webpack config
}

不过，假如你盘算本身写剧本去加载 Webpack 的设置，这个要领就不管用了。

总结：这个要领合适那些不在乎 Node.js 版本，只运用 webpack 和 webpack-dev-server 敕令，不盘算本身写剧本或过量折腾，但想运用完全的 ES6 特征的人。

要领 3：用 babel-node

这是我在 这个题目 中看到的。个中发问者提到的 React Starter Kit 挺有意义。它没改 webpack.config.js 的文件名，但设置文件和种种剧本都是完全的 ES6 语法。这是怎样做到的呢？

症结就在于 babel-node 。这是 Babel 供应的一个敕令行东西，你能够用它替代 node 去实行文件。文件会被 Babel 编译后再交给 node 敕令实行。

让我们看看 React Starter Kit 怎样应用这一点的。起首它用 package.json 里定义的 scripts 来替代 webpack 敕令。能够看到它完全运用了 babel-node 敕令替代 node 。比方：

{
  "scripts": {
    "bundle": "babel-node tools/run bundle",
    ...
  }
}

如许就能够用 npm run bundle 来实行响应的使命了。这个敕令会会先挪用 tools/run.js，然后挪用 tools/bundle.js，然后加载 tools/webpack.config.js 。全部流程中的统统文件都是用 ES6 和 ES7 语法写的，异常整齐美丽。

总结：这个要领合适须要本身写剧本而且想用完全的 ES6 语法的人。不过 babel-node 由于要编译，而且换成效果会存在内存中，所以敕令实行时候会比纯真运用 node 要长（主如果启动时候）。这点就见仁见智了。记着不要在临盆环境下用 babel-node 。

总结

得益于 Babel ，ES6 险些已经是如今的标配了。在不折腾的状况下用用 ES6 是人人都能接收的效果。所以我引荐大部份人用要领 2 。但假如须要写点 npm run xxx 的剧本，不免又会以为不能用 ES6 有点不一致。这类状况我以为要么就都用 ES6 ，要么就干
脆不必。由于我个人以为一致性比用不必 ES6 越发主要。build 剧本委曲也算是后端的一部份，而我们不能强求统统后端代码都写成 ES6 的（比方本身写个 server）。

参考资料

Allow webpack.config.js to be written in ES6
ES6 Compatible Table
StackOverflow – How to use ES6 in Webpack config
React Starter Kit
Babel CLI

    原文作者：darkbaby123
    原文地址: https://segmentfault.com/a/1190000003932889
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞