es6編譯打包後報錯

㈠ 在給vue打包的時候 npm run dev 運行項目 調試 後 彈不出來瀏覽器出現報錯

這明顯是 babel沒有起作用，還在es6的語法在瀏覽器當中運行。
看看你的webpack配置有沒有問題， 記得要在 mole下面加上
{
test: /\.js$/,
loader: 'babel',
exclude: /node_moles/
},

㈡ 移動端使用es6語法需要編譯嗎

然而, Babel默認只轉換新的JavaScript句法（syntax），而不轉換新的API，比如Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise等全局對象，以及一些定義在全局對象上的方法（比如Object.assign）都不會轉碼。而且像import和export這兩個命令現在在任何瀏覽器中都是不支持的, 同時babel也無法將其轉換為瀏覽器支持的ES5, 原因在於:
babel只是個翻譯，假設a.js 里 import 了 b.js, 對a.js進行轉碼，只是翻譯了a.js，並不會把b.js的內容給讀取合並進來, 如果想在最終的某一個js里，包含 a.js，b.js 的代碼，那就需要用到打包工具
所以我在這里講解一下如何使用webpack工具將帶有import和export語法的JS文件, 通過打包工具生成所有瀏覽器都支持的單個JS文件.
1. 下載node.js和webpack
Node.js是一個基於Chrome JavaScript運行時建立的平台， 用於方便地搭建響應速度快、易於擴展的網路應用。可以說就是伺服器端的JS. webpack是一個打包工具, 而它是依賴於node.js運行的.
下載node.js可以通過官網:
具體的安裝步驟網上可以搜到很多, 這里不再贅述. 安裝完畢後打開node.js自帶的命令行工具
這里寫圖片描述
然後輸入如下命令全局安裝webpack工具
npm install -g webpack
接著通過命令行工具定位到你的工程文件的根目錄下, 再次安裝webpack到你的工程中
npm install webpack
2. 編寫webpack.config.js文件
在根目錄下創建webpack.config.js, 這個文件是用來描述一些要使用webpack工具進行打包的配置信息, 文件內容如下:
這里寫圖片描述
通過該文件可以使用webpack打包工具, webpack會從import.js進入, 對該文件中的內容進行編譯並打包, 最終會在dist目錄下生成打包好的文件bundle.js, 編譯打包過程中用到的工具在mole對象的loaders中聲明, 這里使用了babel-loader來對JS文件進行編譯(包括從ES6轉換為ES5以及打包)
3. 創建import.js
創建一個import.js, 內容如下:
這里寫圖片描述
在該文件中通過ES6語法import從export.js中引入firstName和lastName變數. 並且通過console.log將引入的兩個變數列印到控制台.
4. 創建export.js
這里寫圖片描述
在該文件中通過ES6語法export將文件中的幾個變數作為模塊輸出給別的文件引用.
5. 創建HTML文件
在HTML文件中直接將webpack最終打包生成的bundle.js文件引入即可, 因為通過webpack工具已經將export.js和import.js的所有內容都打包到一個文件bundle.js中了, 因此在HTML文件中引入該文件即可以將兩個JS文件中的代碼都執行.
這里寫圖片描述
6. 配置.babelrc文件
在工程文件的根目錄下創建一個.babelrc文件(注意前面有個點), 這個文件是用來描述我要根據什麼樣的規則、或者是將JS文件編譯成什麼版本的文件(比如說ES5). 該文件的內容如下:
這里寫圖片描述
7. 下載相關依賴模塊
方式1: 可以像下面這樣, 直接在項目根目錄下創建一個package.json文件, 並且在文件中指定devDependencies對象, 在該對象中寫上我編譯及打包中所要使用到的依賴模塊, 圖片中的webpack就是用於打包的工具, 而其他的以babel開頭的選項都是編譯JS文件並打包所需要用到的依賴模塊.
這里寫圖片描述
創建好package.json文件後, 在命令行中輸入
npm install
npm工具就會根據該文件中devDependencies選項下載對應的依賴模塊.
方式2(推薦): Ctrl+R打開運行, 然後輸入cmd打開命令行工具, 通過命令行工具一個個安裝, 這樣可以直接通過npm去下載依賴模塊最新的穩定的版本, 同時也不需要自己去記這些模塊的版本號
npm install babelnpm install babel-clinpm install babel-corenpm install babel-loadernpm install babel-preset-es2015
8. 使用 webpack打包
使用命令行工具定位到項目的根目錄下, 然後輸入如下指令
webpack
等待一會兒就會發現工程文件的目錄下多了一個dist文件夾, 裡面放著的就是打包好了的bundle.js文件, 在HTML文件中通過下面的代碼引入js文件

然後在瀏覽器上運行html文件, 使用F12打開開發者工具, 就可以看到console選項中輸出兩行記錄」Micheal」, 「Jackson」

㈢ webpack打包react項目babel-loader轉換es6語法中『...』錯誤

三個點只能在最後，不能在第一位出現的吧

㈣ web前端打包報錯 webpack 打包成功但是會報錯 怎麼解決

你應該把報錯貼出來，這樣才知道是什麼問題。
我之前遇到過和你一樣的問題，報了一堆錯，但是打包完成，那時候是ES6轉ES5沒成功，那個js文件沒有用babel。還有一次是npm該升級了，不知知道你這個是什麼問題

㈤ vue項目打包,npm run build時報錯,怎麼把ES6轉為ES5試了好幾種方法都沒成功,請問有詳細的步驟操作嗎

1、ES6轉換ES5，使用babel-loader包

2、看到截圖問題，估計是sass編譯出錯吧，導致文件壓縮報錯
最好附上debug.log日誌，就看截圖，不好定位錯誤問題

㈥ 白鷺發布ES6時uglify-js不支持es6的解決方案

試了一下發布ES6，結果報錯，不支持uglify-js，需要換插件。從論壇中找到如下鏈接：

https://bbs.egret.com/forum.php? ... 52516&highlight=es6

但是看了一下發現並不是很合適，因為Egret中有不少地方用到了uglify-js，換起來有點麻煩。

這里我直接使用uglify-js的harmony分支uglify-es，源在github上：

https://github.com/mishoo/UglifyJS2/tree/harmony

按以下步驟操作：

1.按上面鏈接的文檔進行安裝，我直接npm安裝的，沒有替換Egret集成的uglify-js

2.安裝完後找到Egret庫中的utils.js，我的Mac目錄在：/Users/xxxxxx/Library/Application Support/Egret/engine/5.2.14/tools/lib/utils.js

3.打開utils.js進行修改：

找到：

修改為：

完成第一步，此處使用剛安裝好的庫

然後找到：

修改為：

此處是為了處理egret publish的時候會引起的編譯錯誤。

4.執行egret publis，可以正常發布。

目前我這么處理還沒問題，不知道是否有隱藏問題，感謝指正。

ES6越來越廣泛，期待Egret官方能夠把常用集成庫都處理成支持ES6的版本。

5.備註：

uglify在對第三方庫生成.min.js時，如果想集成到Egret中，不要加參數，直接輸出即可。示例如下：

1.錯誤寫法，能正常debug能正常release但不能正常運行：

2.正確寫法，全部正常：

** 補充：如果編譯目標可為es5，忽略以上全部說明，直接在lib中添加es6配置即可，如下