Webpack 入门笔记 16 - 定义全局变量和环境变量n
1. 在上面写字n
在做项目的过程中，我们可能需要预定义一些项目全局变量，比如项目名称、项目的本地端口、项目的 API 地址等。还定义了某些环境变量，例如当前是否存在开发模式或生产模式。n
我们目前可以在项目中定义这种变量，n
但我不认为这是最好的解决方案，最佳实践是在 webpack 的配置文件中定义这个变量，然后我们可以直接在项目中使用它。n
2. 定义全局变量和环境变量n
要在 webpack 配置文件中配置全局变量和环境变量，您需要使用插件 DefinePlugin。这是 webpack 附带的插件，所以我们不需要安装它，我们可以直接使用它。以下是使用它的方法：n
例如，如果要在 webpack 配置文件中将项目名称定义为 “Allen APP”，将项目的 API 地址定义为 “www.fengzhen8023.com”，那么我们可以在 webpack.config 中添加以下代码.jsn
let webpack = require("webpack");
module.exports = {
plugins: [
new webpack.DefinePlugin({
APP_NAME: JSON.stringify("Allen App"),
API_SERVER: JSON.stringify("www.fengzhen8023.com")
})
]
}
n
其他配置规则包括n
这里省略了，如果你想看到其他配置规则，你可以查看我的 GitHub 存储库 - webpack-learning，或者按照本文末尾的链接跳转到我之前的博客进行查看。n
在 webpack 配置文件中定义全局变量成功后，可以直接在项目的其他代码文件中使用它们而不导出它们，例如可以直接复制它们：n
// 项目中的index.js文件
console.log("APP_NAME: ", APP_NAME);
console.log("API_SERVER: ", API_SERVER);
n
3. 定义变量时的规则说明n
在 webpack 配置文件中定义全局变量时，你可能会想：我定义的变量基本上都是字符串类型，所以你可以使用以下代码来定义它们：n
module.exports = {
plugins: [
new webpack.DefinePlugin({
APP_NAME: "Allen App",
API_SERVER: "www.fengzhen8023.com"
})
]
}
n
如果使用上述代码进行配置，则在启动项目时会遇到错误。这里即使我们使用双引号将 “Allen App” 分配给APP_NAME，webpack 在配置时也会忽略双冒号，直接将 Allen App 分配给 APP_NAME，但 Allen App 没有定义，所以会报错。n
如果我们想使用字符串n
要定义何时使用全局变量，我们可以使用 JSON.stringify（） 函数，因为该函数返回的结果是一个字符串，这是我们所期望的。n
但是webpack设置线程，这是一个提示，如果要定义全局变量n
使用表达式，或者如果要为全局变量参数指定布尔值，则可以使用以下配置规则：n
module.exports = {
plugins: [
new webpack.DefinePlugin({
EXPRESSION: "1+1",
BOOLEAN: "true"
})
]
}
n
完成此配置后，复制项目文件中的两个全局变量webpack设置线程，结果如下：n
// 项目中的index.js文件
console.log("EXPRESSION: ", EXPRESSION); // 结果为数值类型的值： 2
console.log("API_SERVER: ", API_SERVER); // 结果为布尔类型的值： true
n
4. 使用全局变量的说明n
如果使用 eslint 校准项目中的代码，则在使用全局变量时可能会编译错误，例如以下错误消息：n
n
这也被认为是eslint和webpack。与 DefinePlugin 插件的冲突，要解决这个问题，可以在使用全局变量时添加一行注释来告诉 eslint 这里的代码不需要检查 undefined，代码如下：n
/* eslint-disable no-undef */
console.log("EXPRESSION: ", EXPRESSION);
console.log("BOOLEAN: ", BOOLEAN);
n
这样就解决了上报错误的问题。n
上一篇： Webpack 入门学习笔记 15 - Webpack 中的三个小插件n","to":"zh-Hans","sentLen":{"srcSentLen":[84,18,190,121,65,171,46,124,98,22,228,10,33,213,209,10,55,185,10,102,225,30,170,72,149,10,121,10,45,150,10,47,231,10,59,92],"transSentLen":[34,11,58,30,21,63,17,52,39,11,117,10,12,86,66,10,17,67,9,30,108,14,69,23,40,10,31,10,16,51,9,25,83,10,18,43]}}]}]
如何混淆和加密非常大的JS文件？n
有时我们有一些非常大的JS文件代码需要混淆和加密，例如：n
n
n
这个3.4MB的JS文件一般不容易一次完成混淆加密。由于代码量大。n在
对JS代码进行混淆和加密时，代码n
转换为AST（比喻句子树）webpack加密文件，然后由AST处理，然后在混淆加密完成后重建为JS代码。就像一个3.4MB的文件，代码量可能达到几万行，甚至几十万行，你可以想象：各种转码，逐行处理，什么样的工作量，即使程序人工处理，也会特别耗时。因此，对如此超大的JS代码、在线JS加密工具进行混淆加密是不允许的，不接受这么大的文件，或者需要很高的权限。n
如果我们想处理这么大的文件，我们需要一些方法。n
方式一n
这样的大文件一般不是手工完成的，而是使用各种工具打包和编译的。例如，webpack 可能会将大量文件打包在一起，也可能由 H5 游戏引擎（cocos、白鹭等）编译。n
如果打包或编译前的源代码也是JS，则在打包之前更容易对原始JS代码文件进行混淆和加密，先混淆加密，然后再打包编译。n
方法 2n
如果源代码是n
在非JS语言中，例如TS，很难混淆原始代码。只能处理这个大的JS文件。n
处理方法也不太复杂。以前面给出的文件为例。n
首先，降低 JS 代码（如上图所示，文件被压缩成一行，如果是未压缩的代码，则不需要低）。n
JS代码可以在低字段中使用：n
fairysoftware.com/js_ge_shi_hua.htmln
上面的代码，在低网格之后：n
n
（见图，码量：约8万行）。n
之后，执行块。n如何分块，例如复制一部分代码，
可以是一个或多个函数等（注意：取完整的函数或代码块，以确保复制的部分代码是完整的，不会破坏函数体的完整性）。n
复制这部分代码并将其添加到 JShaman 网站以进行混淆加密：n
n
混淆加密 然后webpack加密文件，将代码粘贴回文件的原始位置以进行代码替换：n
更换后的功效：n
n
通过此推送，整个JS文件代码被混淆和加密。n
其实这个过程也可以通过编写程序手动调用，比如：获取每个函数的代码，调用 JShaman 的 Web API 进行混淆加密，加密后替换原始代码。n
如果是企业级应用，往往需要用这种方式处理大型JS文件，这种处理可能还是有点啰嗦。更直接的方法是使用 JShaman 的本地部署，其文件大小不受限制。n","to":"zh-Hans","sentLen":{"srcSentLen":[53,102,10,10,91,33,53,166,285,174,67,11,108,124,210,12,25,96,36,54,43,165,41,40,39,10,50,39,257,92,10,113,31,10,72,218,154,98],"transSentLen":[21,32,10,9,30,8,20,44,72,55,27,6,35,52,61,8,9,26,13,14,12,48,18,40,17,10,17,11,73,36,10,33,11,10,25,74,44,34]}}]}]
