我是javascript开发人员特别是webpack的新手。我想在项目中使用此棋盘模块(https://github.com/oakmac/chessboardjs/)。它似乎正在导出ChessBoard对象。我的项目正在使用ES6,所以我希望能够

import { ChessBoard } from 'chessboard'

要么

import ChessBoard from 'chessboard'

我了解我为此需要某种装载程序。我尝试以与将其用于jQuery相同的方式添加暴露加载程序

{test: require.resolve("jquery"), loader: "expose?$!expose?jQuery"},
{test: require.resolve("chessboard"), loader: "expose?ChessBoard!./vendor/chessboard/js/chessboard-0.3.0.min.js"}


但我收到“错误:找不到模块'棋盘'”错误。如果将ChessBoard替换为$,也是如此。不知道我在做什么错。是否针对我想做的事情公开合适的装载机?

这是我的webpack配置供参考(没有损坏的棋盘暴露测试)

var path = require('path');
var HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  entry: ['webpack/hot/dev-server', path.resolve(__dirname, 'app/main.js')],
  output: {
    path: path.resolve(__dirname, 'build'),
    filename: 'bundle.js',
  },
  module: {
    loaders: [
      {test: require.resolve("jquery"), loader: "expose?$!expose?jQuery"},
      {test: /\.jsx?$/, exclude:  /(node_modules|bower_components)/, loader: 'babel', query: {presets: ['react', 'es2015']} },
      /* CSS loaders */
      {test: /\.css$/, loader: 'style!css'},
      {test: /\.less$/, loader: 'style!css!less'},
      /* font loaders for bootstrap */
      {test: /\.(woff|woff2)(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=application/font-woff'},
      {test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=application/octet-stream'},
      {test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: 'file'},
      {test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=image/svg+xml'},
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      title: 'Test',
      inject: false,
      template: 'node_modules/html-webpack-template/index.ejs',
      appMountId: 'app',
      devServer: 'http://localhost:8080',
    })
  ]
};

最佳答案

问题似乎在于,chessboard.js只是一个匿名函数,而不是AMD或CommonJS模块,您可能不得不考虑使用webpack添加垫片。


  并非所有JS文件都可以直接与webpack一起使用。该文件可能是
  不受支持的模块格式,甚至没有任何模块格式。
  https://github.com/webpack/docs/wiki/shimming-modules

10-08 04:54