Question

我刚刚开始在现有应用程序中试用Webpacker。

据我了解，我的理解是Webpacker和Sprockets可以共存，并且可以通过全局变量将Webpacker中编译的库（例如jquery）提供给Sprokets。

但是我在资产管道中的所有jquery都在筹集ReferenceError: Can't find variable: $

我是否误解了，或者我的代码中有错误？

我添加了jQuery

yarn add jquery

并在environment.js中分配了变量

const { environment } = require('@rails/webpacker');

const webpack = require('webpack');
environment.plugins.prepend('Provide', new webpack.ProvidePlugin({
    $: 'jquery',
    jQuery: 'jquery'
}));

module.exports = environment;

这有效：

#javascript/packs/application.js
$(function () {
    console.log('Hello World from Webpacker via JQUERY');
});

这不是

#assets/javascripts/application.js
$(function () {
    console.log('Hello World from Sprockets via JQUERY');
});
# ReferenceError: Can't find variable: $

预期的行为是什么？

Answer 1

最后，从webpacker中将jQuery公开给全局是相对容易的。但是，找到有关如何执行此操作的文档非常困难！希望这可以节省其他人的搜索。

添加暴露加载器

yarn add expose-loader -D

然后将以下配置添加到config / webpack / environment.js

environment.loaders.append('expose', {
    test: require.resolve('jquery'),
    use: [{
        loader: 'expose-loader',
        options: '$'
    }, {
        loader: 'expose-loader',
        options: 'jQuery',
    }]
})

然后，我能够从资产管道中删除jquery，重新启动服务器，而链轮中所有剩余的jquery函数仍可以按预期运行。

如何使用Webpacker使jquery对链轮可用？

1 个答案: