2017-06-22 73 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 =生产参数改变你的编译模式。