TL;DR 用插件扩展 jQuery 对象、全局公开它并在 webpack 中使用带有 ES6 模块的外部 AMD 库的正确方法是什么?webpack 是完成这项任务的正确工具,还是 SystemJs 更适合将遗留应用程序重构为 ES6 模块的情况?
我正在尝试使用 webpack 和 ES6 模块。我有一个主要是 jquery 的遗留应用程序,我目前正在转换。我面临以下挑战:
- 在 webpack/babel-loader 工作流中寻找最佳实践
- 找出将哪个加载器/插件用于哪个目的
- 获取诸如 jquery 和 jquery 插件之类的 AMD 资源,以便与其余模块一起使用。
- 暴露 jquery 全局变量,扩展所有插件和 jquery-ui
我依赖于以下资源:这个很好的答案解释了很多,尽管它没有提到我主要依赖的导出加载器: https ://stackoverflow.com/a/28989476/2613786
http://webpack.github.io/docs/shimming-modules.html - 文档列出了许多可能性,但我缺乏决定哪一个是正确的经验。似乎更喜欢使用 ProvidePlugin 而不是暴露加载器。遗憾的是,我没有让它与扩展的 jQuery 对象一起工作。它也不适用于<script>
标签中调用的模块功能。
我仍然在努力寻找编程解决方案并决定哪个 webpack 插件最适合这项工作。非常感谢有经验的 webpack 用户的一些建议或示例。
在我的webpack.config.js
我有以下加载器来公开 jquery 并使用 babel 进行转换:
module: {
loaders: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader',
query: {modules: 'common'}
},
{
test: /jquery\.js$/,
exclude: /node_modules/,
loader: 'expose?jQuery',
},
{
test: /jquery\.js$/,
exclude: /node_modules/,
loader: 'expose?$',
},
{
test: /[\/\\]vendor[\/\\]jquery.sparkline\.js$/,
loader: "imports?define=>false"
}
]
},
amd: { jQuery: true },
// plugins: [
// new webpack.ProvidePlugin({
// $: 'jquery',
// jQuery: 'jquery',
// 'window.jQuery': 'jquery',
// 'root.jQuery': 'jquery'
// })
// ], ...
在我的 entry.js 文件中,我通过以下方式包含 jquery:
import 'expose?jQuery!expose?$!./vendor/jquery';
import './jquery/jquery-ui';
import './vendor/jquery.sparkline';
我不得不注释掉 ProvidePlugin,当我使用它时,jQuery 不再使用自定义插件进行扩展,知道为什么会这样吗?它是否与使用 ES6 模块语法的插件有关?
我必须添加它loader: "imports?define=>false"
才能jquery.sparkline.js
被识别。这真的有必要吗,还是有更好的方法来做到这一点?
关于 jquery-ui,我必须找到一个不使用 AMD 定义的旧版本才能将其添加到 jquery 对象中。什么是正确的方法?
非常感谢任何帮助和建议,切换到 SystemJs 和 Jspm 的原因也可能是一个解决方案。