更改browserify-shim名称会导致编译错误。

Question

好吧，所以我一直在尝试用浏览器化和vueify编译一些东西，我偶然发现了一些奇怪的东西。因此，首先，我一直在尝试使浏览器化-简单的例子发现这里工作。

我已经设置好了，并且能够编译并使事情正常工作。但是，为了避免将vue.js库嵌入到最后的代码中，我决定尝试在最终代码中添加browserify-shim。

事情变得有点奇怪。这是我的package.json文件的功能版本。在这个示例中，大部分内容已经存在，我只是添加了必要的配置才能使浏览器-shim正常工作：

{
  "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)
})

编译时会出现以下错误：

错误:无法从“C：\wamp\www\VueTest\src”中找到模块“vue”

有人能告诉我为什么会这样吗？我认为除了导入我想要的库之外，我放在browserify-shim部分中的名称并不重要。

Answer 1

嗯，我能找到问题到vueify模块。在所述模块的compiler.js文件中有对"vue“模块的硬编码引用。这迫使您在browserify-shim中将模块命名为"vue“，否则在dev模式下编译时会出现错误。

我为那些感兴趣的人开了一期这里。但是最近没有多少活动，所以我不知道它什么时候能修好。无论如何，如果要避免此错误，只需将模块命名为"vue“或使用NODE_ENV=production参数更改编译模式即可。