關(guān)于vuejs-templates/webpack 中 “exports is not define

nicercode 發(fā)布于2019-08-20 16:46 / 2919人閱讀

摘要：利用腳手架搭建的項(xiàng)目，使用的是的模板。但在引用第三方組件的時(shí)候，在瀏覽器中報(bào)錯(cuò)。根據(jù)瀏覽器報(bào)錯(cuò)信息，查詢到報(bào)錯(cuò)來(lái)源是第三方組件的一段代碼這是使用了寫(xiě)法，而在應(yīng)用中并沒(méi)有做相應(yīng)的模塊轉(zhuǎn)換使得瀏覽器能夠識(shí)別。

利用vue-cli腳手架搭建的項(xiàng)目，使用的是vuejs-templates/webpack的模板。
但在引用第三方組件的時(shí)候，在瀏覽器中報(bào)錯(cuò)“exports is not defined”。
根據(jù)瀏覽器報(bào)錯(cuò)信息，查詢到報(bào)錯(cuò)來(lái)源是第三方組件的一段代碼：

Object.defineProperty(exports, "__esModule", {
  value: true
});

這是使用了CommonJs寫(xiě)法，而在應(yīng)用中并沒(méi)有做相應(yīng)的模塊轉(zhuǎn)換使得瀏覽器能夠識(shí)別。而導(dǎo)致這個(gè)問(wèn)題是因?yàn)閎albel的配置文件.babelrc的問(wèn)題：

{
  "presets": [
    ["env", { "modules": false }],
    "stage-2"
  ],
  "plugins": ["transform-runtime"],
  "comments": false,
  "env": {
    "test": {
      "presets": ["env", "stage-2"],
      "plugins": [ "istanbul" ]
    }
  }
}

其中{ "modules": false }阻止了babel進(jìn)行模塊轉(zhuǎn)換，具體見(jiàn)modules配置的說(shuō)明，所以，將modules改為默認(rèn)設(shè)置即可，或者刪除該配置。

初學(xué)Vue中，記錄學(xué)習(xí)中遇見(jiàn)的問(wèn)題以作備查，如果有不對(duì)的地方，還望指正。

云服務(wù)器 GPU云服務(wù)器關(guān)于JAVA中順序IO的基本操作關(guān)于平臺(tái) 關(guān)于加班關(guān)于學(xué)習(xí)

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/83143.html

相關(guān)文章

自定義自己的vue-cli模板

摘要：自定義自己的模板在使用的過(guò)程中，常用的模板只為我們提供最基礎(chǔ)的內(nèi)容，但每次需要新建一個(gè)項(xiàng)目的時(shí)候就需要把之前項(xiàng)目的一些配置都搬過(guò)來(lái)，這樣就造成挺大的不方便，如果是作為一個(gè)團(tuán)隊(duì)，那么維護(hù)一個(gè)通用的模板，我認(rèn)為是挺有必要的。自定義自己的vue-cli模板在使用vue-cli的過(guò)程中，常用的webpack模板只為我們提供最基礎(chǔ)的內(nèi)容，但每次需要新建一個(gè)項(xiàng)目的時(shí)候就需要把之前項(xiàng)目的一些配置...

付永剛 2019-08-21 17:42 評(píng)論0 收藏0
自定義自己的vue-cli模板

摘要：自定義自己的模板在使用的過(guò)程中，常用的模板只為我們提供最基礎(chǔ)的內(nèi)容，但每次需要新建一個(gè)項(xiàng)目的時(shí)候就需要把之前項(xiàng)目的一些配置都搬過(guò)來(lái)，這樣就造成挺大的不方便，如果是作為一個(gè)團(tuán)隊(duì)，那么維護(hù)一個(gè)通用的模板，我認(rèn)為是挺有必要的。自定義自己的vue-cli模板在使用vue-cli的過(guò)程中，常用的webpack模板只為我們提供最基礎(chǔ)的內(nèi)容，但每次需要新建一個(gè)項(xiàng)目的時(shí)候就需要把之前項(xiàng)目的一些配置...

Sleepy 2019-08-01 18:01 評(píng)論0 收藏0
Vue-Donut——專用于構(gòu)建Vue的UI組件庫(kù)的開(kāi)發(fā)框架

摘要：相信不少使用的開(kāi)發(fā)者和公司都有定制一套屬于自己的組件庫(kù)的需求。針對(duì)這個(gè)問(wèn)題，我搭建了一個(gè)專門用來(lái)構(gòu)建的組件庫(kù)的開(kāi)發(fā)框架，以節(jié)省搭建環(huán)境的勞動(dòng)力，專心于組件庫(kù)的開(kāi)發(fā)。首先我們嘗試了使用的方案，就是把組件庫(kù)直接作為項(xiàng)目的子模塊使用。 showImg(https://segmentfault.com/img/bVNais?w=1226&h=1159); 相信不少使用Vue的開(kāi)發(fā)者和公司都有定...

stormgens 2019-08-20 16:19 評(píng)論0 收藏0
vue-cli 使用 webpack-bundle-analyzer

摘要：才來(lái)公司，填坑。然后發(fā)現(xiàn)項(xiàng)目打包越來(lái)越大。然后就滿世界找解決方法。網(wǎng)上看到這個(gè)神器。然后我配置完畢各種報(bào)錯(cuò)。然后去看的官方文檔。然后找到然后再看文檔。看這段不用配置任何，在的時(shí)候添加參數(shù)就好啦。然后運(yùn)行一下，瀏覽器訪問(wèn)。浪費(fèi)幾多時(shí)間。才來(lái)公司，填坑。然后發(fā)現(xiàn)項(xiàng)目打包越來(lái)越大。然后就滿世界找解決方法。網(wǎng)上看到 webpack-bundle-analyzer 這個(gè)神器。然后各種說(shuō)配置 ...

bingchen 2019-08-21 18:29 評(píng)論0 收藏0
搭建一個(gè)多頁(yè)面的無(wú)依賴的工程化項(xiàng)目

摘要：也就是說(shuō)，我們需要做一個(gè)非單頁(yè)應(yīng)用的工程化項(xiàng)目?，F(xiàn)在這個(gè)項(xiàng)目的靜態(tài)資源是以文件哈希值來(lái)控制的。這個(gè)該怎么解決呢感謝，我們可以通過(guò)如下的配置來(lái)實(shí)現(xiàn)意思就是如果圖片是在中引用的則不加哈希值，在文件中引入的則加上。最近金拱門比較火，我們先戳開(kāi)它的官網(wǎng)看看。看完后，如果你老板要是讓你做這么一個(gè)網(wǎng)站，一定要seo，一定要兼容IE，你會(huì)怎么去做呢？用vue/react吧，單頁(yè)應(yīng)用滿足不了se...

go4it 2019-08-21 17:18 評(píng)論0 收藏0