如何解決es6 import報錯問題

es6 import報錯的解決方法：1.使用bebal把es6轉化為es5；2、透過webpack進行打包，把所有的依賴都合併為一個文件，再使用babel進行轉換即可。

本文操作環境：windows7系統、ECMAScript 6版、Dell G3電腦。

如何解決es6 import報錯問題?

現在絕大多數的瀏覽器都不支援ES6,所以使用es6時需要使用bebal把es6轉換為es5，

專案目錄：

• demo1：單一js檔案的轉換

src檔案下的test1.js    

const aa="this is test1";
console.log("this is from test1",aa);\

 

在專案根目錄中引入bebal檔案

.babel

內容：

{
　　presets:["es2015"]
}

 

安裝babel-cli

cnpm i babel-cli -g

因為要轉es6到es5所以還要安裝babel-preset-es2015

cnpm i babel-preset-es2015 --save-dev

轉換test1.js

babel src --out-dir dist

(把src目錄下的js檔案轉換成es5到dist檔案下)

頁面引入dist下的test1.js 運行不會報錯

• #demo2:多個檔案項目引入，並轉換

src檔下：

test2.js

const bb="this is bb";
export {bb}

 

#test3.js

import {bb} from 'test2.js'
console.log(bb);

 

轉換babel src --out- dir dist

頁面引入dist檔案下的test2.js test3.js

報錯

由於我們透過node；來編譯ES6成es5,node模組就是參考CommonJS的規格來的，而且現在的瀏覽器和node都不支援大部分的ES6

解決方案

##可以透過webpack進行打包，把所有的依賴合併為一個文件，同時使用babel進行轉換，然後再引入html文件中就可以了

推薦學習：《

javascript基礎教程 》

以上是如何解決es6 import報錯問題的詳細內容。更多資訊請關注PHP中文網其他相關文章！