在前端开发中，我们经常需要在代码中替换一些固定的 token，例如版本号、环境变量等等。为了方便我们的开发工作，npm 上有一个非常方便的包叫做 replace-tokens，它可以帮助我们快速地实现这些替换操作。
安装
在使用 replace-tokens 之前，我们需要安装它。在命令行中执行以下命令即可：
npm install replace-tokens --save-dev
使用
使用 replace-tokens 就非常简单了。我们只需要在需要替换 token 的文件中，引用 replace-tokens 的 API 就可以了。
- 在 package.json 中配置需要替换的 token
首先，在 package.json 中添加一个 replace-tokens 的配置信息，例如：
{
"config": {
"replaceTokens": {
"VERSION": "1.0.0",
"API_URL": "https://api.example.com"
}
}
}在这个配置信息中，我们配置了两个将要被替换的 token，它们的名字分别为 VERSION 和 API_URL。
- 编写需要替换 token 的文件
接下来，在需要替换 token 的文件中，我们可以引用 replace-tokens 的 API。
例如，我们在 src/index.html 中需要替换版本号，我们可以这样编写：
-- -------------------- ---- ------- --------- ----- ------ ------ ----- ---------------- --------- ----------- ------- ------ ----------- -- -- -------- ------- ---------------------------------------------- ------- -------
在这个 HTML 文件中，我们使用了一个新的语法 ${VERSION} 来替换我们在 package.json 中配置的 VERSION token。
- 在构建脚本中添加替换任务
最后，在我们的构建脚本中，我们需要添加一个任务来执行替换操作。例如，在 webpack.config.js 中，我们可以添加如下的插件：
-- -------------------- ---- -------
----- ------------------- - ----------------------------------------------
-------------- - -
-- --- ------- ---
-------- -
-- ------- ------
--- ---------------------
-- ---------------
---- -------
-- -----------------
----- -------- ----- ------- -------
-- --- ------- ------------ ---- -------------
------- ------------
-- -------
---------- -----
---
--
--在这个配置中，我们使用了 replace-tokens 提供的 ReplaceTokensPlugin，它会自动读取我们在 package.json 中配置的 replaceTokens 列表，并将其用 process.env 中的对应变量进行替换。
我们还需要在构建脚本中定义 process.env，例如，在 package.json 中添加以下脚本：
{
"scripts": {
"build:prod": "NODE_ENV=production VERSION=1.0.0 webpack --config webpack.config.js"
}
}这个脚本中，我们定义了 NODE_ENV 和 VERSION 两个环境变量，它们将被用来替换 HTML 和 JS 文件中的 ${VERSION} token。
- 执行构建任务
最后，我们只需要执行我们的构建脚本：
npm run build:prod
replace-tokens 将会自动遍历生成的 dist 目录，并将其中的文件中的 token 进行替换。在这个例子中，我们的 VERSION token 将会被替换为 1.0.0。
总结
通过 replace-tokens，我们可以方便地在前端代码中进行 token 替换，并且只需要在 package.json 中进行一次配置即可。结合构建脚本中的环境变量，我们可以轻松地实现不同环境之间的区分，并且更好地管理我们的代码库。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005664681e8991b448e25b1