javascript - 在 webpack 中加载 javascript

Question

我对 javascript 开发尤其是 webpack 很陌生。我想在我的项目中使用这个棋盘模块( https://github.com/oakmac/chessboardjs/ )。它看起来正在导出 ChessBoard 对象。我的项目正在使用 ES6，所以我希望能够

从“棋盘”导入 { ChessBoard }

或

从“棋盘”导入 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',
    })
  ]
};

Answer 1

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

Not all JS files can be used directly with webpack. The file might be in an unsupported module format, or not even in any module format. https://github.com/webpack/docs/wiki/shimming-modules