Transpiling React代碼，但離開ES6

我正在使用ES6/React/Redux babel和Gulp編寫Chrome擴展。Transpiling React代碼，但離開ES6

我正在使用巴貝爾預設ES2015，階段2和反應。

然後我意識到，因爲我只針對Chrome，我可以擺脫es2015/estage-2階段，因爲它支持Chrome。

所以我第一次嘗試的是獲得.babelrc並刪除對es2015和stage-2的引用。

沒那麼快......在運行之前webpack gulp腳本無法運行。我第一次嘗試的是隻使用兼容的gulp文件ES5。

然後我得到了不支持的傳播運算符錯誤，所以我重新添加了「stage-2」加載程序。

然後，我在不同的模塊有錯誤：

> WARNING in ./background/src/index.html Module parse failed: 
> /my_path/my_project/src/index.html Unexpected token (1:0) You may need 
> an appropriate loader to handle this file type. SyntaxError: 
> Unexpected token (1:0) 
>  at Parser.pp$4.raise (/my_path/my_project/node_modules/acorn/dist/acorn.js:2221:15)

爲了幫助理解我的代碼是如何構建的，它在三個主要文件夾：背景，內容和彈出。每個代表一個Chrome環境。對於每一個，我都有一個獨立的webpack.config.js文件，與此類似：https://pastebin.com/hseVyQaw Gulp然後在構建過程中爲每個配置文件調用webpack併爲每個配置文件生成包輸出文件。

有一種方法可以使Gulp/Webpack與ES6語法一起工作，而不是爲了部署而對其進行轉譯？這個問題最好的辦法是什麼？

咕嘟咕嘟版本

> [17:32:27] Requiring external module babel-register 
> [17:32:27]CLI version 3.9.1 
> [17:32:27] Local version 3.9.1

的WebPack版本：1.14.0

UPDATE 添加HTML裝載機由@邁克爾Jungo公司的建議似乎運行正常，但它給了我一個警告後，是不知道如何不好忽略它：

WARNING in ./background/src/index.js 
Critical dependencies: 
17:29-52 the request of a dependency is an expression 
@ ./background/src/index.js 17:29-52

更新2 哦，Chrome的抱怨我的擴展模塊語法，但基於我讀它的假設得到支持：通天塔或任何ES6功能

Uncaught SyntaxError: Unexpected token import

來源

2017-04-07 danielfranca

你的錯誤是沒有關係的。您正試圖導入HTML文件./background/src/index.html，但在您發佈的配置中，沒有可以處理這些文件的.html的規則，因此webpack會告訴您可能需要適當的加載程序來處理此文件類型。

您可以使用html-loader並添加下面的規則，以你的loaders陣列：

{ 
    test: /\.html$/, 
    loader: 'html-loader' 
}

至於你的通天塔的配置，它應該工作，你想要的。請記住，如果您使用的是ES模塊（import/export），您仍然需要將它們編譯或切換到webpack 2，這些模塊支持開箱即用。此外，UglifyJs不理解ES6語法，如果您想要使用ES6，則必須使用其他類似babili和babili-webpack-plugin。

來源

2017-04-07 15:53:04

謝謝，我會試試看。我正在考慮遷移到webpack2，但由於它仍處於測試階段，我不確定。 – danielfranca

現在已經發布了很長一段時間，第一個版本['v2.2.0']（https://github.com/webpack/webpack/releases/tag/v2.2.0）是在1月份發佈的，當前版本是4天前發佈的['v2.3.3']（https://github.com/webpack/webpack/releases/tag/v2.3.3）。 –

好的，我會試試看。所以我試着只添加html模板...並且只運行webpack（沒有吞嚥），並且它不能理解傳播運算符...所以我只重新添加了「stage-2」，並且它似乎起作用，但它給了我一個警告：https：//pastebin.com/m5yPUFYA 並且內置文件仍在ES5中。我會嘗試webpack2，我希望我能在那裏工作。 – danielfranca

Transpiling React代碼，但離開ES6

回答

相關問題