2017-06-22 75 views
0

好吧,所以我一直在努力編譯與browserify和vueify的東西,我偶然發現了一些奇怪的東西。首先,我一直試圖找到一個簡單的示例here更改browserify-shim名稱導致編譯錯誤

我已經設置了一些東西,並且能夠編譯並讓東西工作沒有問題。但是,我決定嘗試添加browserify-shim以避免在最終代碼中嵌入vue.js庫。

這裏的東西有點奇怪。這是我的package.json文件的功能版本。它的大部分已經從示例目前,我只添加了必要的配置可以讓browserify-墊片工作:

{ 
    "name": "un-test", 
    "description": "Un test", 
    "author": "John Doe", 
    "private": true, 
    "scripts": { 
    "watchify": "watchify -vd -p browserify-hmr -e src/main.js -o dist/build.js", 
    "serve": "http-server -o -s -c 1 -a localhost", 
    "dev": "npm-run-all --parallel watchify serve", 
    "build": "cross-env NODE_ENV=production browserify -g envify src/main.js | uglifyjs -c warnings=false -m > dist/build.js" 
    }, 
    "dependencies": { 
    "vue": "^2.0.1" 
    }, 
    "devDependencies": { 
    "babel-core": "^6.0.0", 
    "babel-preset-es2015": "^6.0.0", 
    "babelify": "^7.2.0", 
    "browserify": "^13.0.1", 
    "browserify-hmr": "^0.3.1", 
    "browserify-shim": "^3.8.14", 
    "cross-env": "^1.0.6", 
    "envify": "^3.4.1", 
    "http-server": "^0.9.0", 
    "npm-run-all": "^2.1.2", 
    "uglify-js": "^2.5.0", 
    "vueify": "^9.1.0", 
    "watchify": "^3.4.0" 
    }, 
    "browserify": { 
    "transform": [ 
     "vueify", 
     "babelify", 
     "browserify-shim" 
    ] 
    }, 
    "browserify-shim": { 
    "vue": "global:Vue" 
    } 
} 

正如我所說的,這工作。在另一方面,如果我這樣做了的package.json內:

"browserify-shim": { 
     "myVue": "global:Vue" 
     } 

如果我修改main.js相應文件是這樣的:

import Vue from 'myVue' 
import App from './App.vue' 

new Vue({ 
    el: '#app', 
    render: h => h(App) 
}) 

我收到以下錯誤,當我編譯:

Error: Cannot find module 'vue' from 'C:\wamp\www\VueTest\src'

有人可以告訴我爲什麼會發生這種情況嗎?我不認爲我放入browserify-shim部分的名字是非常重要的,除了導入我想要的庫之外。

回答

0

嗯,我能夠跟蹤到vueify模塊的問題。在所述模塊的compiler.js文件中有對「vue」模塊的硬編碼引用。這迫使你在browserify-shim中將你的模塊命名爲「vue」,否則如果你在開發模式下編譯,你會得到一個錯誤。

對於那些有興趣的人,我開了一個問題here。但最近沒有太多活動,所以我不知道是否/何時會得到修復。無論如何,如果你想避免這個錯誤,只需將你的模塊命名爲「vue」或者用NODE_ENV =生產參數改變你的編譯模式。