用 ES6 編寫(xiě) Webpack 的配置文件

Rocture 發(fā)布于2019-08-21 10:44 / 1535人閱讀

摘要：在執(zhí)行時(shí)會(huì)先用把配置文件轉(zhuǎn)成代碼再繼續(xù)處理。只要你把配置文件命名成，就會(huì)用相應(yīng)的去轉(zhuǎn)換一遍配置文件。它沒(méi)改的文件名，但配置文件和各種腳本都是完全的語(yǔ)法。這是提供的一個(gè)命令行工具，你可以用它代替去執(zhí)行文件。總結(jié)得益于，幾乎已經(jīng)是現(xiàn)在的標(biāo)配了。

概述

我最近在整理一個(gè) Ionic + Webpack 的項(xiàng)目模板，因?yàn)轫?xiàng)目代碼都是 ES6 的，所以我也想在其他地方也用 ES6 。其中一個(gè)地方就是 webpack.config.js 。目前有三種方法可以做到這一點(diǎn)，不過(guò)各有利弊。

方法 1：升級(jí)到 Node.js 4

Node.js 4 合并了 io.js ，所以自然帶有所有 io.js 的特性，其中就包括部分 ES6 特性的支持。不過(guò)目前的版本 (4.2.1) 只支持部分特性，尤其是以下幾個(gè)很常用的都不支持：

函數(shù)默認(rèn)值

解構(gòu)和其相關(guān)的所有功能

ES6 模塊

具體支持程度可看這里。Babel 達(dá)到了 71% ，Node.js 4 達(dá)到了 53% ，Node.js 5 也只達(dá)到了 59% 。真是不容樂(lè)觀。

總結(jié)：這個(gè)方法適合依賴少數(shù) ES6 特性，又確定使用 Node.js 4 及以上版本的人，不能算是大眾方案。

方法 2：webpack.config.babel.js

這個(gè)最簡(jiǎn)單，把 webpack.config.js 改名成 webpack.config.babel.js 就行。一切命令照舊。Webpack 在執(zhí)行時(shí)會(huì)先用 Babel 把配置文件轉(zhuǎn)成 ES5 代碼再繼續(xù)處理。一切 Babel 支持的語(yǔ)言特性都可以用。

這是一個(gè) Webpack 支持，但文檔里完全沒(méi)有提到的特性 （應(yīng)該馬上就會(huì)加上）。只要你把配置文件命名成 webpack.config.[loader].js ，Webpack 就會(huì)用相應(yīng)的 loader 去轉(zhuǎn)換一遍配置文件。所以要使用這個(gè)方法，你需要安裝 babel-loader 和 babel-core 兩個(gè)包。記住你不需要完整的 babel 包。

理論上這種做法支持任何 loader ，所以你也可以用 CoffeeScript 或者其他語(yǔ)言去寫(xiě)，只要有相應(yīng)的 loader 就行。

這個(gè)方法還有個(gè)好處，如果你在 webpack.config.babel.js 里 import 了其他文件，那個(gè)文件也會(huì)被 Babel 編譯。比如：

// webpack.config.babel.js

// 這個(gè)文件也可以用 ES6 寫(xiě)
import config from "./some-config"

export default {
  // webpack config
}

不過(guò)，如果你打算自己寫(xiě)腳本去加載 Webpack 的配置，這個(gè)方法就不管用了。

總結(jié)：這個(gè)方法適合那些不在乎 Node.js 版本，只使用 webpack 和 webpack-dev-server 命令，不打算自己寫(xiě)腳本或過(guò)多折騰，但想使用完整的 ES6 特性的人。

方法 3：用 babel-node

這是我在這個(gè)問(wèn)題中看到的。其中提問(wèn)者提到的 React Starter Kit 挺有意思。它沒(méi)改 webpack.config.js 的文件名，但配置文件和各種腳本都是完全的 ES6 語(yǔ)法。這是怎么做到的呢？

關(guān)鍵就在于 babel-node 。這是 Babel 提供的一個(gè)命令行工具，你可以用它代替 node 去執(zhí)行文件。文件會(huì)被 Babel 編譯后再交給 node 命令執(zhí)行。

讓我們看看 React Starter Kit 如何利用這一點(diǎn)的。首先它用 package.json 里定義的 scripts 來(lái)代替 webpack 命令。可以看到它完全使用了 babel-node 命令代替 node 。比如：

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

這樣就可以用 npm run bundle 來(lái)執(zhí)行相應(yīng)的任務(wù)了。這個(gè)命令會(huì)會(huì)先調(diào)用 tools/run.js，然后調(diào)用 tools/bundle.js，然后加載 tools/webpack.config.js 。整個(gè)流程中的所有文件都是用 ES6 和 ES7 語(yǔ)法寫(xiě)的，非常整潔漂亮。

總結(jié)：這個(gè)方法適合需要自己寫(xiě)腳本并且想用完整的 ES6 語(yǔ)法的人。不過(guò) babel-node 因?yàn)橐幾g，而且換成結(jié)果會(huì)存在內(nèi)存中，所以命令執(zhí)行時(shí)間會(huì)比單純使用 node 要長(zhǎng)（主要是啟動(dòng)時(shí)間）。這點(diǎn)就見(jiàn)仁見(jiàn)智了。記住不要在生產(chǎn)環(huán)境下用 babel-node 。

總結(jié)

得益于 Babel ，ES6 幾乎已經(jīng)是現(xiàn)在的標(biāo)配了。在不折騰的情況下用用 ES6 是大家都能接受的結(jié)果。所以我推薦大部分人用方法 2 。但如果需要寫(xiě)點(diǎn) npm run xxx 的腳本，難免又會(huì)覺(jué)得不能用 ES6 有點(diǎn)不一致。這種情況我覺(jué)得要么就都用 ES6 ，要么就干
脆不用。因?yàn)槲覀€(gè)人覺(jué)得一致性比用不用 ES6 更加重要。build 腳本勉強(qiáng)也算是后端的一部分，而我們不能強(qiáng)求所有后端代碼都寫(xiě)成 ES6 的（比如自己寫(xiě)個(gè) 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