是否可以使用webpack定义全局变量以产生如下所示的结果:
var myvar = {};
我看到的所有示例都使用外部文件 require("imports?$=jquery!./file.js")
require("imports?$=jquery!./file.js")
有几种方法可以处理全局变量:
Webpack仅对模块进行一次评估,因此您的实例保持全局状态,并在模块之间进行更改。 因此,如果您创建像a之类的东西globals.js并导出所有全局变量的对象,则可以import './globals'读取/写入这些全局变量。您可以导入一个模块,从功能中对对象进行更改,然后导入另一个模块,并读取功能中的更改。还记得事情发生的顺序。Webpack首先将所有导入并按顺序从您的加载它们entry.js。然后它将执行entry.js。因此,读取/写入全局变量的位置很重要。是从模块的根作用域还是在以后调用的函数中?
globals.js
import './globals'
entry.js
注意 :如果您希望实例new每次出现,请使用ES6类。传统上,在JS中,您会大写类(相对于对象的小写字母),例如 import FooBar from './foo-bar' // <-- Usage: myFooBar = new FooBar()
new
import FooBar from './foo-bar' // <-- Usage: myFooBar = new FooBar()
这是使用Webpack的ProvidePlugin(使模块在每个模块中以及仅在您实际使用它的模块中作为变量)可用的方法。当您不想import Bar from 'foo'一次又一次地键入内容时,这很有用。或者,您可以在此处引入像jQuery或lodash这样的全局包(尽管您可以看一下Webpack的Externals)。
import Bar from 'foo'
步骤1)创建任何模块。例如,一组实用程序将很方便:
utils.js
export function sayHello () { console.log('hello') }
步骤2)别名模块并添加到ProvidePlugin:
webpack.config.js
var webpack = require("webpack"); var path = require("path"); // ... module.exports = { // ... resolve: { extensions: ['', '.js'], alias: { 'utils': path.resolve(__dirname, './utils') // <-- When you build or restart dev-server, you'll get an error if the path to your utils.js file is incorrect. } }, plugins: [ // ... new webpack.ProvidePlugin({ 'utils': 'utils' }) ] }
现在只需调用utils.sayHello()任何js文件,它就可以正常工作。如果与Webpack一起使用,请确保重新启动开发服务器。
utils.sayHello()
注意:不要忘了告诉您的linter有关全局的信息,因此它不会抱怨。 例如,在此处查看我对ESLint的回答。
如果只想将const和字符串值用于全局变量,则可以将此插件添加到Webpack插件列表中:
new webpack.DefinePlugin({ PRODUCTION: JSON.stringify(true), VERSION: JSON.stringify("5fa3b9"), BROWSER_SUPPORTS_HTML5: true, TWO: "1+1", "typeof window": JSON.stringify("object") })
像这样使用它:
console.log("Running App version " + VERSION); if(!BROWSER_SUPPORTS_HTML5) require("html5shiv");
window.foo = 'bar' // For SPA's, browser environment. global.foo = 'bar' // Webpack will automatically convert this to window if your project is targeted for web (default), read more here: https://webpack.js.org/configuration/node/
您将看到通常用于polyfills的内容,例如: window.Promise = Bluebird
window.Promise = Bluebird
5)使用像dotenv这样的包
(对于服务器端项目)dotenv软件包将获取一个本地配置文件(如果有任何键/凭据,可以将其添加到.gitignore中),并将配置变量添加到Node的process.env对象中。
// As early as possible in your application, require and configure dotenv. require('dotenv').config()
.env在项目的根目录中创建一个文件。以的形式在新行上添加特定于环境的变量NAME=VALUE。例如:
.env
NAME=VALUE
DB_HOST=localhost DB_USER=root DB_PASS=s1mpl3
而已。
process.env现在具有您在.env文件中定义的键和值。
process.env
var db = require('db') db.connect({ host: process.env.DB_HOST, username: process.env.DB_USER, password: process.env.DB_PASS })
关于Webpack的Externals,如果要排除某些模块不包含在内置包中,请使用它。Webpack将使该模块在全球范围内可用,但不会将其放入您的捆绑包中。这对于jQuery之类的大型库非常方便(因为摇晃外部包在Webpack中不起作用),在这些库中,这些库已经以单独的脚本标记(可能是CDN)加载到了页面上。