用 ES6 編寫 Webpack 的配置文件

Rocture 發布于2019-08-21 10:44 / 1531人閱讀

摘要：在執行時會先用把配置文件轉成代碼再繼續處理。只要你把配置文件命名成，就會用相應的去轉換一遍配置文件。它沒改的文件名，但配置文件和各種腳本都是完全的語法。這是提供的一個命令行工具，你可以用它代替去執行文件。總結得益于，幾乎已經是現在的標配了。

概述

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

云服務器 GPU云服務器用java編寫的應用用高級語言編寫的程序頭文件的編寫頭用高級語言編寫的程序為

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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