如何解决您如何使用 Snowpack 进行开发、预开发和生产?
我想在我使用 Snowpack 的 grep "function init("
中定义环境变量,但据我所知,Snowpack 会根据 dev vs build 自动设置 package.json
。
是否可以为 3 种模式而不是 2 种模式定义变量,我的意思是:
- 开发
- 试生产
- 生产
这些是我在 NODE_ENV
中的脚本:
package.json
但是,"scripts": {
"start": "snowpack dev","build": "snowpack build NODE_ENV=pre","build:production": "snowpack build NODE_ENV=pro"
}
为 2 种构建类型返回 import.meta.env.MODE
。
我无法让它工作,也许还有另一种方法可以做到这一点。
解决方法
我的用例并不完全相同,但很相似,您应该能够使用此技术生成任意数量的不同环境。
我可以通过编写一个自定义的 snowpack 插件来使用 .env
文件和 dotenv
npm 包以及两个单独的 snowpack.config.js
文件来实现这一点;一种用于开发,一种用于生产。方法如下...
- 将
dotenv
添加到您的项目:npm i -D dotenv
- 创建这个新文件。这将是我们自定义的雪包插件
// env-loader.js
const dotenv = require('dotenv');
module.exports = function plugin(snowpackConfig,{ path }) {
dotenv.config({ path: path });
return { name: 'Custom plugin from StackOverflow' };
};
- 创建您的 .env 文件;
.env.develop
和.env.production
- 创建您的 snowpack.config 文件;
snowpack-develop.config.js
和snowpack-production.config.js
- 将您的自定义插件添加到两个 snowpack.config 文件中。请务必为其提供自定义插件的正确路径以及 .env 文件的正确路径。
// snowpack-develop.config.js
const path = require('path');
module.exports = {
plugins: [
['./path/to/env-loader',{ path: path.resolve(process.cwd(),'.develop.env') }],],};
- 最后,添加您的 npm 脚本。将您的开发脚本指向 snowpack-develop 文件,并将 prod 指向 snowpack-production 文件。
"scripts": {
"develop": "snowpack dev --config ./snowpack-develop.config.js","build:dev": "snowpack build --config ./snowpack-develop.config.js","build:prod": "snowpack build --config ./snowpack-production.config.js"
},
在 snowpack 中,环境变量必须包含前缀 SNOWPACK_PUBLIC_
,要在代码中使用变量,您可以像这样访问它:import.meta.env.SNOWPACK_PUBLIC_MY_VARIABLE
。它在构建时运行查找和替换。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。