繁体   English   中英

Webpack:在不使用ProvidePlugin和暴露加载程序的情况下公开全局变量

[英]Webpack: Exposing global variable without using ProvidePlugin and expose-loader

我正在这个ReactJS项目中工作,我需要阅读子文件夹package.json,将它们全部安装到node_modules中,然后,所有安装的依赖项都将它们添加到全局变量中,以便可以在代码中的任何地方使用它们。

问题是由于webpack.config.js的语法,我无法访问暴露加载器上的json(我需要动态添加它们),所以我创建了一个加载器,将其添加为测试包。 json,获取依赖项并尝试复制暴露加载程序的行为。

这是

var toCamelCase = function(str) {
  return str.toLowerCase()
    .replace( /[-_]+/g, ' ')
    .replace( /[^\w\s]/g, '')
    .replace( / (.)/g, function($1) { return $1.toUpperCase(); })
    .replace( / /g, '' );
}

var returning_string = function(dependencies_object){
    var final_string = "";
    Object.keys(dependencies_object).map(function(dependency){
        var location = require.resolve(dependency);
        var export_dependency = 'module.exports = global["'+toCamelCase(dependency)+'"] = require("-!'+ location+'");';
        final_string += export_dependency;
    })
    return final_string;
};

module.exports = function() {};
module.exports.pitch = function(e){
    if(this.cacheable) {this.cacheable();}
    var dependencies = require(e).dependencies;
    return returning_string(dependencies);
};

问题是,由于某种原因,即使输出完全相同,也不会在使用暴露加载程序时将库添加到全局上下文中。 在完成这两项操作时,我手动添加了依赖项以提供插件,无论如何我以后都需要复制该插件。

有什么更好的方法吗? 还是我做对了,但我缺少什么?

经过研究后,我在webpack 2.x中发现了以下内容 (我使用的是webpack 1.x,但我猜它对我的版本有效)关于配置的文档说:

编写并执行函数以生成配置的一部分

因此,我解决此问题的方法不是使用新的插件,而是重用应该工作的插件。 基本上,我编写了一个新的javascript文件,该文件以webpack.config的方式创建了我需要的所有加载程序。

这是文件:

Dependency_loader.js https://gist.github.com/abenitoc/b4bdc02d3c7cf287de2c92793d0a0b43

这就是我所谓的方式:

var webpack = require('webpack');
var dependency_loader = require('./webpack_plugins/dependencies_loader.js');


module.exports = {
    devtool: 'source-map',
    entry: {/* Preloading */ },
    module: {preLoaders: [/*Preloading*/],
   loaders: [/* Call all the loaders */].concat(dependency_loader.getExposeString()),
    plugins: [
    new webpack.ContextReplacementPlugin(/package\.json$/, "./plugins/"),
    new webpack.HotModuleReplacementPlugin(),
    new webpack.ProvidePlugin(Object.assign({
        '$': 'jquery',
        'jQuery': 'jquery',
        'window.jQuery': 'jquery'
    }, dependency_loader.getPluginProvider())), // Wraps module with variable and injects wherever it's needed
    new ZipBundlePlugin() // Compile automatically zips
]

请注意,我连接了一系列加载器,并使用所需的getExposeString()添加了以下加载器,并使用getPluginProvider在pluginProvider中用新的全局元素重新分配了对象。 同样因为我使用jsHint,所以排除了全局名称,这就是为什么使用另一种方法的原因。

这仅解决了node_modules的依赖关系,如果需要本地库,则有另一种方法。

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM