前端工程化-使用构建工具注入运行时环境变量

实际项目需求描述

在运行时获取当前所处环境(生产or开发),然后做不同操作

实际项目需求例子

if(__env__) {// do something} else {// do something}

通过rollup实现

思路描述:

• 要实现以上需求, 则必须找到一个可以区分所处环境的"入口", 这里我们可以通过npm script去区分, 因为在开发环境和生产环境是需要执行不同的npm script去构建我们的项目.
• rollup可以在npm script中通过--environment参数往process.env中挂载属性

例子

package.json

{ // ... "scripts": {

"build": "rollup -c --environment ENV:production",
"env": "rollup -c --environment ENV:development"
}

// ...}

rollup.config.js

// 这里使用rollup官网推荐的一个插件实现import replace from '@rollup/plugin-replace';

export default {

// ...

plugins: [

replace({
    __env__: JSON.stringify(process.env.ENV) // 注意, 这里需要将变量序列化
})

] // ...};

实际的业务代码片段

// 如果使用ts开发, 需要声明一下(在*.d.ts中, 或者直接在ts文件中声明)// declare var __env__: string;console.info(__env__);

通过以上操作, 便可通过rollup,将__env__变量编译为"development"或者"production"

通过webpack实现

思路描述:

• 和rollup实现思路基本一致, 只是构建文件不同, 直接看例子

例子

package.json

// 和上述package.json一致

webpack.config.js

const { DefinePlugin } = require('webpack');

module.exports = (env) => { // 通过函数方式写而非对象形式

return {
    // ...
    plugins: [
        new DefinePlugin({
            __env__: JSON.stringify(env.ENV) // 这里通过webpack注入的env变量获取
        })
    ]
}

}

实际的业务代码片段

// 和上述文件一致

注意点

webpack和rollup均是在编译时通过字符替换的方式将__env__替换成对应值, 所以需保证__env__不能和正常代码有同名情况, 这里就不再举例子了, 感兴趣的可以将上述方法实现一遍,然后跑一个反例出来,看下效果.

tree shakingwebpack和rollup默认开启tree shaking, 在代码无副作用的前提下,分支判断语句结合环境变量会将"无用" 清楚,如下方使用rollup打包后的截图

打包前

打包后

有时间的话,更新一下使用vue和react脚手架的时候如何实现.