Vue.js browserify找不到模塊

Question

在我嘗試與vue.js 1.0一起使用的幾乎所有npm軟件包中， vue.js 1.0收到此錯誤：

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

Answer 1

這些都是webpack包和你使用browserify 。 如果需要使用webpack軟件包，則應將webpack用作捆綁程序。

我確實安裝了vue-upload-component軟件包，以了解使用browserify和elixir多么容易，但至少可以這樣說很尷尬。 我沒有使它起作用，因為它使用babel變換來編譯vue文件，因此首先您需要手動將其拉入，然后可能需要編寫一個elixir擴展程序以使用這些變換來使其工作。 顯然，每個webpack軟件包都將有所不同，因此每次安裝時都需要這樣做，這非常不方便。

Answer 2

我有一些運氣改變了Vue的成分，我想用就用的配置輸出webpack -p ，而不是僅僅webpack 。

然后，我可以在沒有熱門模塊代碼的情況下獲取該輸出，並將其通過browserify放置：

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

凡file.js是的WebPack -p輸出， SomeLibrary是你想從browserify包裝在全球范圍內窗口的名稱， file.browser.js是你得到的文件在您的項目包括。