怎么解決es6中import報錯的問題

這篇文章將為大家詳細講解有關怎么解決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文件中就可以了

關于“怎么解決es6中import報錯的問題”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。