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

Question

Okay, so I've been trying my hand at compiling stuff with browserify and vueify and I've stumbled upon something strange. So first things first, I've been trying to get the browserify-simple example found here to work.

I've set things up and was able to compile and get things to work no problem. However, I decided to try adding browserify-shim to the lot so as to avoid having the vue.js library embedded in the final code.

Here's where things get a little strange. Here's a functional version of my package.json file. Most of it was already present from the example, I've only added the necessary config to get browserify-shim working:

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

As I said, this works. On the other hand, if I do this inside the package.json:

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

And if I modify the main.js file accordingly like this:

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

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

I get the following error when I compile:

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

Can anybody tell me why this is happening? I didn't think the name I put inside the browserify-shim section really mattered other than for importing the library I want.

Answer 1

Well, I was able to track down the problem down to the vueify module. There's a hardcoded reference to "vue" module in the compiler.js file of said module. This forces you to name your module exactly "vue" in browserify-shim otherwise you'll get an error if you compile in dev mode.

I opened an issue here for those who are interested. But there's not been much activity lately so I don't know if/when it'll get fixed. Anyway, if you want to avoid this error, just name your module "vue" or change your compilation mode with the NODE_ENV=production parameter.