2017-03-31 55 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 
相关问题