Javascript Web包:在不使用ProvidePlugin和expose loader的情况下公开全局变量
我在这个ReactJS项目中工作,我需要读取subfolder package.json,将它们全部安装到node_模块中,然后,所有安装的依赖项将它们添加到全局变量中,以便它们可以在代码中的任何位置使用 问题在于,由于webpack.config.js中的语法(我需要动态添加它们),我无法访问expose loader上的json,因此我创建了一个加载程序,该加载程序添加为test The package.json,获取依赖项并尝试复制expose loader行为 这是Javascript Web包:在不使用ProvidePlugin和expose loader的情况下公开全局变量,javascript,webpack,Javascript,Webpack,我在这个ReactJS项目中工作,我需要读取subfolder package.json,将它们全部安装到node_模块中,然后,所有安装的依赖项将它们添加到全局变量中,以便它们可以在代码中的任何位置使用 问题在于,由于webpack.config.js中的语法(我需要动态添加它们),我无法访问expose loader上的json,因此我创建了一个加载程序,该加载程序添加为test The package.json,获取依赖项并尝试复制expose loader行为 这是 var toCame
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,但我想Physophy对我的版本是有效的)中发现了关于配置的文档说明: 编写并执行函数以生成配置的一部分 所以我解决这个问题的方法不是使用一个新的插件,而是重用那些应该工作的插件。基本上,我编写了一个新的javascript文件,它以webpack.config的方式创建了我需要的所有加载程序 这是文件: 依赖项\u loader.js 这大概就是我所说的:
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,所以排除了全局名称,这就是为什么使用另一个方法
这只解决节点与模块之间的依赖关系,如果您需要本地库,则有不同的方法。您找到解决方案了吗?我也有同样的问题。你最终使用了不同的捆绑包吗?