Vue.js browserify 找不到模块答案

【问题标题】：Vue.js browserify Cannot find moduleVue.js browserify 找不到模块
【发布时间】：2016-10-21 21:07:36
【问题描述】：

对于我尝试与vue.js 1.0 一起使用的几乎每个 npm 包，我都会收到此错误：

{ Error: Cannot find module '!!./../../../node_modules/css-loader/index.js!./../../../node_modules/vue-loader/lib/style-rewriter.js!./../../../node_modules/vue-loader/lib/selector.js?type=style&index=0!./dashboard.vue' from '/Users/jamie/Code/forum/node_modules/vue-html5-editor/dist'
    at /Users/jamie/Code/forum/node_modules/resolve/lib/async.js:46:17
    at process (/Users/jamie/Code/forum/node_modules/resolve/lib/async.js:173:43)
    at ondir (/Users/jamie/Code/forum/node_modules/resolve/lib/async.js:188:17)
    at load (/Users/jamie/Code/forum/node_modules/resolve/lib/async.js:69:43)
    at onex (/Users/jamie/Code/forum/node_modules/resolve/lib/async.js:92:31)
    at /Users/jamie/Code/forum/node_modules/resolve/lib/async.js:22:47
    at FSReqWrap.oncomplete (fs.js:117:15)

它让我发疯！我正在使用vue.js 和browserify。在网上到处找：

https://github.com/webpack/css-loader/issues/240 https://github.com/webpack/css-loader/issues/180 https://github.com/webpack/css-loader/issues/295 https://github.com/webpack/css-loader/issues/163

似乎没有任何效果！我做错了什么！？

我遇到此问题的 2 个软件包：

https://github.com/lian-yue/vue-upload-component/
https://github.com/PeakTai/vue-html5-editor

我的gulpfile：

const elixir = require('laravel-elixir');
require('laravel-elixir-vueify');
require('laravel-elixir-stylus');



    elixir(mix => {
        mix.browserify('main.js');
        mix.styles([
                './node_modules/normalize-css/normalize.css',
                './node_modules/nprogress/nprogress.css',
                './node_modules/sweetalert/dist/sweetalert.css',
                ]);
        mix.stylus('app.styl');
    });

一个解决方案真的可以帮到我。

--编辑--

{
  "private": true,
  "scripts": {
    "prod": "gulp --production",
    "dev": "gulp watch"
  },
  "devDependencies": {
    "gulp": "^3.9.1",
    "laravel-elixir": "^6.0.0-9",
    "laravel-elixir-browserify-official": "^0.1.3",
    "laravel-elixir-stylus": "^2.0.3",
    "vue-html5-editor": "^0.5.1"
  },
  "dependencies": {
    "browserify": "^13.1.0",
    "laravel-elixir-vueify": "^2.0.0",
    "normalize-css": "^2.3.1",
    "nprogress": "^0.2.0",
    "stylus": "^0.54.5",
    "sweetalert": "^1.1.3",
    "vue": "^1.0.26",
    "vue-resource": "^0.9.3",
    "vue-router": "^0.7.13",
    "vue-spinner": "^1.0.2",
    "vue-upload-component": "^2.0.0-beta"
  }
}

【问题讨论】：

你能提供你的packages.json文件吗？
是的！请查看我的编辑。
奇怪。也许您可以尝试安装这些 babel 依赖项github.com/vuejs/vueify/blob/master/package.json#L38，我不确定，但似乎 vue-upload-component 使用 ES2015。

标签： javascript css node.js gulp vue.js

【解决方案1】：

这些是webpack 包，而您正在使用browserify。如果你需要使用 webpack 包，你应该使用 webpack 作为你的打包器。

我确实尝试过安装vue-upload-component 包，看看使用browserify 和elixir 会多么容易，但至少可以这么说。我没有让它工作，因为它使用 babel 转换来编译 vue 文件，所以首先你需要手动将它们拉入，然后你可能需要编写一个 elixir 扩展来使用这些转换来让它工作。显然每个 webpack 包都会有所不同，所以每次安装时都需要这样做，这不太方便。

【讨论】：

【解决方案2】：

我很幸运地将我想使用的 Vue 组件的配置输出更改为使用 webpack -p 而不仅仅是 webpack。

然后我可以在没有热模块代码的情况下获取该输出并将其放入browserify：

browserify file.js --standalone SomeLibrary > file.browser.js

file.js 是 webpack -p 输出，SomeLibrary 是您希望在 browserify 打包的全局窗口范围内的名称，file.browser.js 是您要包含在其中的结果文件你的项目。

【讨论】：