用 ES6 编写 Webpack 的配置文件

Rocture 发布于2019-08-21 10:44 / 1424人阅读

摘要：在执行时会先用把配置文件转成代码再继续处理。只要你把配置文件命名成，就会用相应的去转换一遍配置文件。它没改的文件名，但配置文件和各种脚本都是完全的语法。这是提供的一个命令行工具，你可以用它代替去执行文件。总结得益于，几乎已经是现在的标配了。

概述

我最近在整理一个 Ionic + Webpack 的项目模板，因为项目代码都是 ES6 的，所以我也想在其他地方也用 ES6 。其中一个地方就是 webpack.config.js 。目前有三种方法可以做到这一点，不过各有利弊。

方法 1：升级到 Node.js 4

Node.js 4 合并了 io.js ，所以自然带有所有 io.js 的特性，其中就包括部分 ES6 特性的支持。不过目前的版本 (4.2.1) 只支持部分特性，尤其是以下几个很常用的都不支持：

函数默认值

解构和其相关的所有功能

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

云服务器 idc机房托管用java编写的应用用高级语言编写的程序头文件的编写头用高级语言编写的程序为

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/86113.html

webpack学习（二）—— 进阶

摘要：上篇文章中简单介绍了的最基本用法，且项目结构十分简单，只有一个页面一个页面两个文件。本文将介绍如何使用对具有较为规范的结构的项目进行构建。这说明监测到了文件的变化，但是我们的加载的文件并没有变。后续还会更深入地学习，希望和大家一同进步。上篇文章中简单介绍了webpack的最基本用法，且项目结构十分简单，只有一个html页面、一个css页面、两个js文件。本文将介绍如何使用webpac...

singerye 2019-08-21 14:42 评论0 收藏0
用ES6编写AngularJS程序是怎样一种体验

摘要：不用我赘述，前端开发人员一定耳熟能详。命令会用这个配置，生成的结果都会给文件名加，文件也会压缩。可用工具介绍启动调试服务器，使用作为配置，不直接生成物理文件，直接内存级别响应调试服务器资源请求。 AngularJS不用我赘述，前端开发人员一定耳熟能详。有人称之为MVWhatever框架，意思是使用AngularJS，你可以参考任意范式进行应用开发，无论是MVC、还是MVVVM都信手拈来...

lastSeries 2019-08-19 18:17 评论0 收藏0
webpack+babel+react练习流程记录

摘要：简介来构建用户界面的库，不是框架关注于层虚拟单向数据流这些概念如何使用下载文件也可以使用，需要用到的模块介绍是编写组件的一种语法规范，可以看为是的扩展，它支持将和混写在一起，最后使用编译为常规的，方便浏览器解析编写第一个例子使用编写组件 react简介来构建用户界面的库，不是框架关注于view层虚拟DOM 单向数据流 JSX这些概念如何使用react 下载文件 rea...

DDreach 2019-08-19 18:25 评论0 收藏0
webpack实战

摘要：和类似的预处理器还有等。的用处非常多，包括给自动加前缀使用下一代语法等，目前越来越多的人开始用它，它很可能会成为预处理器的最终赢家。 webpack实战查看所有文档页面：全栈开发，获取更多信息。快马加鞭，加班加点，终于把这个文档整理出来了，顺便深入地学习一番，巩固知识，就是太累人，影响睡眠时间和质量。极客就是想要把事情做到极致，开始了就必须到达终点。原文链接：webpack实战，原...

cyrils 2019-08-22 17:32 评论0 收藏0
webpack4 系列教程(二): 编译 ES6

摘要：今天介绍怎么编译的各种函数和语法。对于相关的匹配规则，除了匹配结尾的文件，还应该去除文件夹下的第三库的文件发布前已经被处理好了。它需要在我们项目的入口文件中被引入，或者在中配置。个人网站原文链接系列教程二编译今天介绍webpack怎么编译ES6的各种函数和语法。敲黑板：这是webpack4版本哦, 有一些不同于webpack3的地方。 >>> 本节课源码 >>> 所有课程源码 1....

graf 2019-08-23 10:34 评论0 收藏0