Question

好的，所以我一直在努力用browserify和vueify编译东西，我偶然发现了一些奇怪的东西。首先，我一直在努力让找到here的浏览器简单示例正常工作。

我已经设置好了，并且能够编译并使工作没有问题。但是，我决定尝试在批次中添加browserify-shim，以避免在最终代码中嵌入vue.js库。

这里的事情有点奇怪。这是我的package.json文件的功能版本。其中大部分已经从示例中提供，我只添加了必要的配置以使browserify-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模式编译，则会出现错误。

我为有兴趣的人开了一个问题here。但最近没有太多活动，所以我不知道是否/何时会得到修复。无论如何，如果您想避免此错误，只需将模块命名为“vue”或使用NODE_ENV =生产参数更改编译模式。

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

1 个答案: