0

好的，所以我一直在尝试用 browserify 和 vueify 编译东西，我偶然发现了一些奇怪的东西。因此，首先，我一直在尝试让此处找到的 browserify-simple 示例正常工作。

我已经进行了设置，并且能够编译并使事情正常工作。但是，我决定尝试将 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 部分中的名称并不重要。

4

1 回答 1

0

好吧，我能够将问题追溯到 vueify 模块。在该模块的 compiler.js 文件中有对“vue”模块的硬编码引用。这会迫使您在 browserify-shim 中将模块准确命名为“vue”，否则如果您在开发模式下编译会出现错误。

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

于 2017-07-13T13:42:13.263 回答