用 ES6 编写 Webpack 的配置文件

概述

我最近在整理一个 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


David Chen 的编程大杂烩
前端,后端,编程技巧,各种被坑经验,无所不包(其实就是想什么放什么)
1.4k 声望
67 粉丝
0 条评论
推荐阅读
用 JavaScript 实现链表操作 - 18 Recursive Reverse
麻烦的地方就在最后,把节点加入链表的末尾需要首先遍历整个链表,这无疑非常低效。我们在上一个 kata 的循环里是怎么解决的呢?维护一个 result 变量代表反转链表,然后每次把新节点放到 result 的头部,同时把...

darkbaby123阅读 2.6k

从零搭建 Node.js 企业级 Web 服务器(零):静态服务
过去 5 年,我前后在菜鸟网络和蚂蚁金服做开发工作,一方面支撑业务团队开发各类业务系统,另一方面在自己的技术团队做基础技术建设。期间借着 Node.js 的锋芒做了不少 Web 系统,有的至今生气蓬勃、有的早已夭折...

乌柏木150阅读 12.4k评论 10

正则表达式实例
收集在业务中经常使用的正则表达式实例,方便以后进行查找,减少工作量。常用正则表达式实例1. 校验基本日期格式 {代码...} {代码...} 2. 校验密码强度密码的强度必须是包含大小写字母和数字的组合,不能使用特殊...

寒青56阅读 7.9k评论 11

JavaScript有用的代码片段和trick
平时工作过程中可以用到的实用代码集棉。判断对象否为空 {代码...} 浮点数取整 {代码...} 注意:前三种方法只适用于32个位整数,对于负数的处理上和Math.floor是不同的。 {代码...} 生成6位数字验证码 {代码...} ...

jenemy46阅读 6.1k评论 12

从零搭建 Node.js 企业级 Web 服务器(十五):总结与展望
总结截止到本章 “从零搭建 Node.js 企业级 Web 服务器” 主题共计 16 章内容就更新完毕了,回顾第零章曾写道:搭建一个 Node.js 企业级 Web 服务器并非难事,只是必须做好几个关键事项这几件必须做好的关键事项就...

乌柏木66阅读 6.2k评论 16

再也不学AJAX了!(二)使用AJAX ① XMLHttpRequest
「再也不学 AJAX 了」是一个以 AJAX 为主题的系列文章,希望读者通过阅读本系列文章,能够对 AJAX 技术有更加深入的认识和理解,从此能够再也不用专门学习 AJAX。本篇文章为该系列的第二篇,最近更新于 2023 年 1...

libinfs40阅读 6.4k评论 12

封面图
从零搭建 Node.js 企业级 Web 服务器(一):接口与分层
分层规范从本章起,正式进入企业级 Web 服务器核心内容。通常,一块完整的业务逻辑是由视图层、控制层、服务层、模型层共同定义与实现的,如下图:从上至下,抽象层次逐渐加深。从下至上,业务细节逐渐清晰。视图...

乌柏木44阅读 7.5k评论 6

1.4k 声望
67 粉丝
宣传栏