[英]Load javascript in webpack
我是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
没有看到整个webpack.config.js文件,很难说出问题所在。 基本上,您需要告诉webpack将“ / node_modules /”包含在它查找js模块的路径列表中。
您将需要在webpack.config.js
的resolve
部分中添加类似的webpack.config.js
。
modulesDirectories: ["node_modules"]
我猜您在webpack.config.js中将需要以下内容:
...
resolve: {
modules: [
'node_modules',
path.join( __dirname, 'node_modules' ),
path.resolve( './src' ),
...
您必须做两件事:
1.)在插件下添加:
new webpack.ProvidePlugin({
"window['jQuery']": "jquery"
})
2.)安装script-loader
插件并按如下所示导入脚本:
import 'script-loader!./chessboard.js';
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.