Node模拟

Parcel 包含几个模拟 Node.js API 的功能。这允许 npm 上最初为 Node 编写的许多模块也可以在浏览器中工作。此外,许多浏览器模块也采用了基于 Node.js 的 API 来处理环境变量等问题。

环境变量

#

Parcel 支持 JavaScript 中的内联环境变量。这可用于确定构建环境(例如开发、登台、生产)、注入 API 密钥等。

要访问环境变量,请从对象中读取相应的属性process.env

if (process.env.NODE_ENV === "development") {
console.log("Happy developing!");
}

您还可以使用解构语法一次访问多个属性。

let { NODE_ENV, API_TOKEN } = process.env;

process.env不支持以任何非静态方式(例如动态属性查找)进行访问。

NODE_ENV

#

Parcel 会根据NODE_ENV模式自动设置环境变量。运行parcel build时, NODE_ENV默认设置为production,否则设置为development。。这可以通过设置NODE_ENV(例如在 shell 中)来覆盖。

.env文件

#

Parcel 支持加载在项目根目录中的.env件中定义的环境变量。这支持由换行符分隔的NAME=value对。以#开头的行被视为注释。有关更多详细信息,请参见dotenv

.env:
APP_NAME=test
API_KEY=12345

除了.env,还可以创建例如.env.production.env.development这些是基于NODE_ENV环境变量应用的(包括由 Parcel 自动设置时)。未在特定于环境的覆盖中设置的任何变量都回退到基本.env文件中定义的值。

.env.local文件还支持环境变量的本地覆盖,但是,当NODE_ENV=test测试为每个人产生相同的结果时,不使用它。这也支持特定于环境的覆盖,例如.env.production.local.

Polyfilling & Excluding Builtin Node Modules

#

填充和排除内置节点模块

当针对浏览器和您的代码,或者更可能是依赖项时,导入内置 Node 模块,例如cryptofsprocess,Parcel 将自动使用以下 polyfill 之一。如果没有可用的 polyfill,则将使用空模块。您还可以使用aliases来覆盖这些。

本机模块 npm 替换 本机模块 npm 替换
assert assert process process/browser.js
buffer buffer punycode punycode
console console-browserify querystring querystring-es3
constants constants-browserify stream stream-browserify
crypto crypto-browserify string_decoder string_decoder
domain domain-browser sys util/util.js
events events timers timers-browserify
http stream-http tty tty-browserify
https https-browserify url url
os os-browserify/browser.js util util/util.js
path path-browserify vm vm-browserify
zlib browserify-zlib

Shimming Builtin Node Globals

#

填充内置节点全局变量

以浏览器为目标时,Node 中可用的全局变量的用法被替换为不破坏为 Node 编写的代码:

内联 fs.readFileSync

#

如果文件路径是静态可确定的并且在项目根目录内,则调用将fs.readFileSync替换为文件的内容。

__dirname__filename变量可以在文件名参数中使用。可以使用通过运算符+和函数path.join的字符串连接。不支持其他函数、变量或动态计算。计算路径应该始终是绝对的,并且不依赖于当前工作目录。

index.js:
import fs from "fs";
import path from "path";

const data = fs.readFileSync(path.join(__dirname, "data.json"), "utf8");
console.log(data);
data.json:
{
"foo": "bar"
}

禁用这些功能

#

可以通过在package.json中创建@parcel/transformer-js键来禁用environment variablesreadFileSync calls

package.json:
{
"name": "my-project",
"dependencies": {
...
},
"@parcel/transformer-js": {
"inlineFS": false,
"inlineEnvironment": false
}
}

inlineEnvironment也可以是一个 glob 字符串数组,它允许您过滤允许的环境变量。这是确保安全的好主意,因为 node_modules 中的第三方代码也可以读取环境变量。

{
"name": "my-project",
"dependencies": {
...
},
"@parcel/transformer-js": {
"inlineEnvironment": ["SENTRY_*"]
}
}