首页 文章

在webpack中加载javascript

提问于
浏览 次
0

我是javascript dev的新手，特别是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',
    })
  ]
};
javascript webpack

4 回答

  • 0

    You have to do two things:

    1.）在插件下添加：

    new webpack.ProvidePlugin({
   "window['jQuery']": "jquery"
})

    2.）安装 script-loader 插件并导入如下脚本：

    import 'script-loader!./chessboard.js';
    回复于
  • 3

    我想你的webpack.config.js中需要这样的东西：

    ...
       resolve: {
            modules: [
                'node_modules',
                path.join( __dirname, 'node_modules' ),
                path.resolve( './src' ),
...
    回复于
  • 0

    问题似乎是chessboard.js只是一个匿名函数，而不是AMD或CommonJS模块，你可能不得不考虑使用webpack添加填充程序 .

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

    回复于
  • 0

    如果没有看到整个webpack.config.js文件，说明问题是什么很棘手 . 基本上你需要告诉webpack将`/ node_modules /'包含在它为js模块查找的路径列表中 .

    您需要在 webpack.config.js 的 resolve 部分添加类似的内容 .

    modulesDirectories: ["node_modules"]
    回复于

相关问题