2017-03-31 100 views
0

我正在嘗試使用用Webpack編譯的VueJS項目的Handsontable seets組件。但是我得到'無法找到模塊numbro'錯誤,即使我不在模塊中導入numbro,也會發生這種錯誤。我照着下面使用使用Handsontable的Javascript項目在導入時找不到模塊

npm install 

的package.json中的package.json安裝的所有軟件包:

"dependencies": { 
    "vue": "^2.1.10", 
    "handsontable": "^0.31.1", 
    "moment": "^2.18.1", 
    "numbro": "^1.10.1", 
    "pikaday": "^1.5.1", 
    "vue-handsontable": "^0.0.2", 
    "zeroclipboard": "^2.3.0" 
}, 

如此地:https://github.com/handsontable/handsontable/issues/3407我加Handsontable的四個依賴關係的模塊裝載機節webpack配置文件。

webpack.config.js

module: { 
loaders: [ 
    { 
    test: require.resolve('numbro'), 
    loader: 'expose?numbro' 
    }, 
    { 
    test: require.resolve('moment'), 
    loader: 'expose?moment' 
    }, 
    { 
    test: require.resolve('pikaday'), 
    loader: 'expose?Pikaday' 
    }, 
    { 
    test: require.resolve('zeroclipboard'), 
    loader: 'expose?ZeroClipboard' 
    }] 

TableView.vue

<template> 
     <div id="hot-preview"> 
      <cool-table :data="data" :settings="{}"></cool-table> 
     </div> 
    </div> 
</template> 

<script> 
import moment from 'moment' 
import numbro from 'numbro' 
import pikaday from 'pikaday' 
import Zeroclipboard from 'zeroclipboard' 
import Handsontable from 'handsontable' 
import CoolTable from 'vue-handsontable' 

export default { 
    name: 'TablesView', 
    data() { 
    return { 
     data: [ 
     ['', 'Kia', 'Nissan', 'Toyota', 'Honda'], 
     ['2008', 10, 11, 12, 13], 
     ['2009', 20, 11, 14, 13], 
     ['2010', 30, 15, 12, 13] 
     ] 
    } 
    }, 
    components: { 
    CoolTable 
    } 
} 
</script> 

當我編譯和運行我的VueJS項目,我得到一個控制檯錯誤:

Error: Cannot find module 'numbro' 

我可以看到在node_modules文件夾中帶有numbro.js的numbro文件夾。任何想法可能會出錯?

+0

檢查Chrome瀏覽器開發工具的網絡標籤在頁面加載。你看到404嗎?如果是這樣,這個問題很可能是服務於這個文件。否則,問題在於您在用戶界面中的引用可能不正確地引用。 –

+0

@JohnVandivier這不是一個404錯誤,與我認爲的webpack構建設置有關。 –

回答

0

要獲得Handsontable工作,我改變了webpack.config.js使用暴露裝載機:

loader: 'expose-loader?numbro' 

然後我安裝揭露裝載機

npm install expose-loader 
相關問題