這篇文章將為大家詳細(xì)講解有關(guān)怎么解決es6中import報(bào)錯(cuò)的問(wèn)題，小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

公司主營(yíng)業(yè)務(wù)：成都網(wǎng)站設(shè)計(jì)、網(wǎng)站建設(shè)、移動(dòng)網(wǎng)站開(kāi)發(fā)等業(yè)務(wù)。幫助企業(yè)客戶真正實(shí)現(xiàn)互聯(lián)網(wǎng)宣傳，提高企業(yè)的競(jìng)爭(zhēng)能力。成都創(chuàng)新互聯(lián)是一支青春激揚(yáng)、勤奮敬業(yè)、活力青春激揚(yáng)、勤奮敬業(yè)、活力澎湃、和諧高效的團(tuán)隊(duì)。公司秉承以“開(kāi)放、自由、嚴(yán)謹(jǐn)、自律”為核心的企業(yè)文化，感謝他們對(duì)我們的高要求，感謝他們從不同領(lǐng)域給我們帶來(lái)的挑戰(zhàn)，讓我們激情的團(tuán)隊(duì)有機(jī)會(huì)用頭腦與智慧不斷的給客戶帶來(lái)驚喜。成都創(chuàng)新互聯(lián)推出寧化免費(fèi)做網(wǎng)站回饋大家。

es6 import報(bào)錯(cuò)的解決辦法：1、使用bebal把es6轉(zhuǎn)化為es5；2、通過(guò)webpack進(jìn)行打包，把所有的依賴都合并為一個(gè)文件，再使用babel進(jìn)行轉(zhuǎn)換即可。

本文操作環(huán)境：windows7系統(tǒng)、ECMAScript 6版、Dell G3電腦。

如何解決es6 import報(bào)錯(cuò)問(wèn)題?

現(xiàn)在絕大多數(shù)的瀏覽器都不支持ES6,所以使用es6時(shí)需要使用bebal把es6轉(zhuǎn)化為es5，

項(xiàng)目目錄：

• demo1：?jiǎn)蝹€(gè)js文件的轉(zhuǎn)化

src文件下的 test1.js

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

在項(xiàng)目根目錄引入bebal文件

.babel

內(nèi)容：

{
　　presets:["es2015"]
}

安裝babel-cli

cnpm i babel-cli -g

因?yàn)橐D(zhuǎn)es6到es5所以還需要安裝babel-preset-es2015

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

轉(zhuǎn)化test1.js

babel src --out-dir dist

(把src目錄下的js文件轉(zhuǎn)換成es5到dist文件下)

頁(yè)面引入dist下的test1.js 運(yùn)行不會(huì)報(bào)錯(cuò)

• demo2:多個(gè)文件項(xiàng)目引入，并轉(zhuǎn)化

src文件下：

test2.js

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

test3.js

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

轉(zhuǎn)換 babel src --out-dir dist

頁(yè)面引入dist文件下的test2.js test3.js

報(bào)錯(cuò)

由于我們通過(guò)node；來(lái)編譯ES6成es5,node模塊就是參照CommonJS的規(guī)范來(lái)的，而且現(xiàn)在的瀏覽器和node都不支持大部分的ES6

解決辦法

可以通過(guò)webpack進(jìn)行打包，把所有的依賴都合并為一個(gè)文件，同時(shí)使用babel進(jìn)行轉(zhuǎn)換，然后再引入html文件中就可以了

關(guān)于“怎么解決es6中import報(bào)錯(cuò)的問(wèn)題”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，使各位可以學(xué)到更多知識(shí)，如果覺(jué)得文章不錯(cuò)，請(qǐng)把它分享出去讓更多的人看到。