编译打包时,如何使用env文件

小小的PHP能干啥
  • 181

上文件代码,具体代码最后有地址。


**问题已经解决,代码已经可用,有需要的可参考。
请为被采纳者点赞。
有更好的方法,请回复。**

.env

DB_HOST=localhost
DB_NAME=TEST
DB_USER=root
DB_PASS=tttttt
port=3306

DOMAIN_WWW=www.domain.com
DOMAIN_API=api.domain.com

gulpfile.js

const {src, dest, parallel, series, task} = require("gulp");

require('dotenv').config({
    path: './env/.env'
})

const json = {
    host: process.env.DB_HOST,
    databaseName: process.env.DB_NAME,
    username: process.env.DB_USER,
    password: process.env.DB_PASS,
    port: process.env.port
}

const test = (done) => {// OK
    console.log(json)
    done()
}

const outfile_test = (done) => {// 让生成到 dist 目录下的 test.js 文件,可以直接在浏览器客户端使用
    src('./src/test.js')
        .pipe(dest('./dist/'))
    done()
}

exports.test = test
exports.outfile_test = outfile_test

common.js

export const domain = {
    'www': 'www.domain.com',
    'api': 'api.domain.com',
}

export const envDomain = [
    {
        'www': process.env.DOMAIN_WWW,
        'api': process.env.DOMAIN_API,
    }
]

test.js

import {domain, envDomain} from "./common";

function funTest() {
    console.log(domain);
    console.log(domain.www);
    console.log(envDomain);
    console.log(envDomain.www);
}

function funTest_2() {
    const www = process.env.DOMAIN_WWW;// 让生成的文件中,这2个值变成 env 文件中对应的值
    const api = process.env.DOMAIN_API;// 让生成的文件中,这2个值变成 env 文件中对应的值
    console.log(www);
    console.log(api);
}

代码地址 https://github.com/ZhangCheng...

问如何能让打包出来的js文件中的 env 变量成为对应的值?

目标就是让js文件中的一些变量可以有env文件控制。

回复
阅读 581
2 个回答
const gulp = require('gulp');
const map = require('map-stream'); // 没装的记得先装它

const DOMAIN_WWW = process.env.DOMAIN_WWW;
const DOMAIN_API = process.env.DOMAIN_API;

gulp.task('default', async function() {
    await gulp
        .src('src/test.js') // 还有别的文件要替换的的也加上
        .pipe(map(function(file, done) {
            let content = file.contents.toString();
            // 就改两处,剩下的自己加上一下
            content = content.replace(/process.env.DOMAIN_WWW/g, `'${DOMAIN_WWW}'`);
            // 替换结果的前后是要加上引号的,这样最后才是 JS 里的字符串字面量
            content = content.replace(/process.env.DOMAIN_API/g, `'${DOMAIN_API}'`);
            // 如果是 node 10.0 之前的版本,Buffer.from(content) 要改成 new Buffer(content)
            file.contents = Buffer.from(content);

            done(null, file);
        }))
        .pipe(gulp.dest('dist'));
});

本质上就是字符串替换,怎么在构建时从环境变量文件里读取看来你已经会了,那剩下的就是在构建时把源文件里特定的字符串替换掉了。

上面代码仅作思路参考,请根据自己的实际情况改写。

configs.js

module.exports = {
    // 单文件用
    baseURL: key + "/app/api/v2",
    // publicPath: "/", 
    // assetsSubDirectory: "./" 
    // 非单文件用
    // baseURL: "/app/api/v2", //配合proxy代理使用
};

elseFile.js

const configs = require('../configs.js');

console.log(configs,'configs')
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏