Javascript 网页包2:像jQWidgets的RequireJS一样填充?
我正在从RequireJS项目迁移到Webpack。 后者对我来说是新的,我把它作为一种学习练习。 在RequireJS中,我可以注册如下内容:Javascript 网页包2:像jQWidgets的RequireJS一样填充?,javascript,webpack,requirejs,amd,shim,Javascript,Webpack,Requirejs,Amd,Shim,我正在从RequireJS项目迁移到Webpack。 后者对我来说是新的,我把它作为一种学习练习。 在RequireJS中,我可以注册如下内容: shim: { 'jqxcore': { exports: "$", deps: ["jquery"] }, 'jqxtree': { exports: "$", deps: ["jquery", "jqxcore"] }, 'jqxbutton':
shim: {
'jqxcore': {
exports: "$",
deps: ["jquery"]
},
'jqxtree': {
exports: "$",
deps: ["jquery", "jqxcore"]
},
'jqxbutton': {
exports: "$",
deps: ["jquery", "jqxcore"]
},
'jqxsplitter': {
exports: "$",
deps: ["jquery", "jqxcore"]
},
'jqxmenu': {
exports: "$",
deps: ["jquery", "jqxcore"]
}
}
然后只需要“jqxsplitter”,例如:
import "jqxsplitter"
而且这些东西会被正确注册和加载。
现在我正在看一些关于从RequireJS迁移到Webpack的指南/教程/记录,比如one和one。
因此,根据这些见解,我在我的webpack.config.js中尝试类似的内容:
"use strict";
// Required to form a complete output path
const path = require("path");
// Plagin for cleaning up the output folder (bundle) before creating a new one
const CleanWebpackPlugin = require("clean-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const webpack = require("webpack");
// Path to the output folder
const bundleFolder = "./wwwroot/";
// Path to the app source code
const appFolder = "./app/";
module.exports = {
// Application entry point
entry: {
main: appFolder + "index.ts",
vendor: [
"knockout",
"jquery",
"jqxcore"
],
jqxsplitter: "jqxsplitter"
},
// Output file
output: {
filename: "[name].js",
chunkFilename: "[name].js",
path: path.resolve(bundleFolder)
},
module: {
rules: [{
test: /\.tsx?$/,
loader: "ts-loader",
exclude: /node_modules/
}, {
test: /\.html?$/,
loader: "html-loader" //TODO: file-loader?
}],
loaders: [{
test: /jqxcore/,
loader: "imports?jquery!exports?$"
}, {
test: /jqxsplitter/,
loader: "imports?jquery,jqxcore!exports?$"
}]
},
resolve: {
extensions: [".tsx", ".ts", ".js"],
alias: {
"jqxcore": "jqwidgets-framework/jqwidgets/jqxcore",
"jqxsplitter": "jqwidgets-framework/jqwidgets/jqxsplitter"
}
},
plugins: [
new CleanWebpackPlugin([bundleFolder]),
new HtmlWebpackPlugin({
filename: "index.html",
template: appFolder + "index.html",
chunks: ["main", "vendor"]
}),
new webpack.optimize.CommonsChunkPlugin({
name: "vendor",
filename: "vendors.js",
minChunks: Infinity
})
],
devtool: "source-map"
};
我假设的相关部分是
module: {
loaders: [{
test: /jqxcore/,
loader: "imports?jquery!exports?$"
}, {
test: /jqxsplitter/,
loader: "imports?jquery,jqxcore!exports?$"
}]
},
“imports/exports”的语法相当于RequireJS的“deps”和“exports”,这一点非常清楚。
但是,当我在index.ts文件app root中执行此操作时:
import "jqwidgets-framework/jqwidgets/jqxsplitter";
运行我的应用程序时出现“jqxBaseFramework未定义”错误。
我在jQWidgets的论坛上找到了这个错误的参考,但是没有一个答案能够真正解决这个问题,或者包括AOT编译之类的东西,这不适用于我的情况,因为我没有使用Angular
我在jQWidges论坛上也有同样的问题,但到目前为止,两周内还没有实际的答案,只有一个通用的答案说我应该在jqxwhateverplugin.js之前加载jqxcore.js。
嗯,是的,很明显,这就是我到底想用垫片来完成的
有什么想法吗?嗯,最后我去潜水,自己想办法。 如果有人发现自己身处同一条船或类似的船上,这里有一个解决方案 如果您美化jQWidgets脚本文件jqxcore.js,您将看到它创建了一个通常称为jqxBaseFramework的全局变量,它当然永远不会全局公开,只会在自己的模块中公开。问题就在这里 解决方案是使用此配置:
module: {
rules: [{
test: /jqxcore/,
use: "exports-loader?jqxBaseFramework"
}, {
test: /jqxknockout/,
use: ["imports-loader?jqxBaseFramework=jqxcore,ko=knockout", "exports-loader?jqxBaseFramework"]
}, {
test: /jqxsplitter/,
use: "imports-loader?jqxBaseFramework=jqxknockout"
}]
},
resolve: {
...
alias: {
"knockout": "knockout/build/output/knockout-latest",
"jqxcore": "jqwidgets-framework/jqwidgets/jqxcore",
"jqxknockout": "jqwidgets-framework/jqwidgets/jqxknockout",
"jqxsplitter": "jqwidgets-framework/jqwidgets/jqxsplitter"
}
},
我想一旦它点击,这一切都是有意义的。
jqxcore模块现在将导出其具有相同名称的jqxBaseFramework变量
我加入了击倒支持,而在它。
jqxknockout期望两个全局变量正常工作:koknockout和jqxBaseFramework。
现在我们告诉webpack,无论何时加载jqxknockout,它都应该加载jqxcore模块并将其导出分配给一个名为jqxBaseFramework的模块局部变量,然后加载knockout模块并将其导出分配给一个名为ko的模块局部变量。
这实际上相当于在jqxknockout.js脚本中预先添加以下代码:
var jqxBaseFramework = require("jqxcore");
var ko = require("knockout");
脚本现在可以再次执行,因为找到了这两个变量。
我添加了导出加载器来导出相同的内容,但现在已从jqxknockout处理/扩充了jqxBaseFramework变量
jqxSplitter通常只需要jqxCore就可以工作,但我总是想将它与knockout一起使用。因此,我不是从jqxCore为jqxSplitter导入jqxBaseFramework,而是从jqxKnockout获得它,所以所有的部分都准备好了。
现在,当我将此代码添加到我所在的任何文件中时:
import "jqwidgets-framework/jqwidgets/jqxsplitter";
Webpack需要jqxknockout及其导出,作为jqxBaseFramework,这反过来又需要jqxcore和knockout等等,整个东西都连接得很好
希望这对别人有帮助