Question

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

问题在于，由于webpack.config.js的语法，我无法访问expose-loader上的jsons（我需要动态添加它们），所以我创建了一个添加为test的加载器package.json获取依赖项并尝试复制expose-loader行为。

这是

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);
};

问题在于，由于某些原因，即使输出完全相同，它也不会在使用公开的加载器时将库添加到全局上下文中。在做这两件事的时候，我手动添加了依赖项来提供插件，无论如何我都需要以某种方式复制它。

有没有更好的方法呢？或者我做得对，但我错过了什么？

Answer 1

经过研究后，我发现了webpack 2.x中的following（我正在使用webpack 1.x，但我认为哲学对我的版本有效）关于配置的文档说：

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

所以我解决这个问题的方法不是使用新的插件，而是重用那些应该工作的插件。基本上我写了一个新的javascript文件，它以webpack.config的方式创建了我需要的所有加载器。

这是文件：

<强> dependencies_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依赖关系，如果你需要一个本地库，有一种不同的方法。

Webpack：在不使用ProvidePlugin和expose-loader的情况下公开全局变量

1 个答案: