用 ES6 编写 Webpack 的配置文件

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-loaderbabel-core 两个包。记住你不需要完整的 babel 包。

理论上这种做法支持任何 loader ,所以你也可以用 CoffeeScript 或者其他语言去写,只要有相应的 loader 就行。

这个方法还有个好处,如果你在 webpack.config.babel.jsimport 了其他文件,那个文件也会被 Babel 编译。比如:

// webpack.config.babel.js

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

export default {
  // webpack config
}

不过,如果你打算自己写脚本去加载 Webpack 的配置,这个方法就不管用了。

总结:这个方法适合那些不在乎 Node.js 版本,只使用 webpackwebpack-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

阅读 10.9k

David Chen 的编程大杂烩
前端,后端,编程技巧,各种被坑经验,无所不包(其实就是想什么放什么)
1.3k 声望
67 粉丝
0 条评论
1.3k 声望
67 粉丝
文章目录
宣传栏