Question

我正在尝试使用Webpack编译的VueJS项目的Handsontable seets组件。但是我找到了一个找不到模块的numbro＆＃39;错误，即使我不在模块中导入numbro也会发生错误。我已根据下面的package.json使用

安装了所有软件包

npm install

的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文件夹。关于什么可能出错的任何想法？

Answer 1

为了让Handsontable工作，我改变了webpack.config.js以使用expose-loader：

loader: 'expose-loader?numbro'

然后我安装了expose-loader

npm install expose-loader

使用Handsontable的Javascript项目无法在导入时找到模块

1 个答案: