Webpack DefinePlugin 踩坑实录

不多废话，直接开讲。

项目开发中有好多协议链接需要跳转，就配置成了公共变量方便随时获取，是这样配的

new webpack.DefinePlugin({
    'process.env.USER_AGREE': JSON.stringify(domain + '/rules/wx/usa'), 
    'process.env.USER_PRIVACY': JSON.stringify(domain + '/rules/wx/privacy'), 
    'process.env.ORDER_MOVE': JSON.stringify(domain + '/rules/wx/orderMove'), 
    'process.env.RULE_POINT': JSON.stringify(domain + '/rules/wx/point'), 
    'process.env.CAR_NOTICE': JSON.stringify(domain + '/wxCarNotice'), 
    'process.env.RULE_INVITE': JSON.stringify(domain + '/rule/wx/invite'), 
    'process.env.LOCK_ORDER': JSON.stringify(domain + '/rule/wx/lockOrder'), 
})

一开始我的任务里面都是单个跳转的，直接写死跳转路径没有问题

const url = encodeURIComponent(process.env.CAR_NOTICE)

但是随着业务需求，需要跳转的链接就多了，要添加判断了，类似于这样

const url1 = encodeURIComponent(process.env.CAR_NOTICE)
const url2 = encodeURIComponent(process.env.USER_AGREE)
const url3 = encodeURIComponent(process.env.ORDER_MOVE)

这代码能忍？刚刚好服务端传过来的枚举值是这样的

type = 'CAR_NOTICE' | 'USER_AGREE' | 'ORDER_MOVE'

理所当然的，代码改成了

const url = encodeURIComponent(process.env[type])

有问题吗？没有问题，保存运行，漂亮 undefind !

问题解析

一通查找，最终在文档中找到了答案文档链接

文字描述有点不是很明白，程序员还得看代码示例

看到这里，结合开头的说明 DefinePlugin 允许在 编译时 将你代码中的变量替换为其他值或表达式。

明白了，就是公共变量的替换在编译时是直接替换的，你在代码运行时传入变量是没用的，重点是编译时替换。

还有疑虑的话可以再这样定义一下

new webpack.DefinePlugin({
    'process.env': {
        USER_AGREE: JSON.stringify(domain + '/rules/wx/usa'),
        USER_PRIVACY: JSON.stringify(domain + '/rules/wx/privacy'), 
        ORDER_MOVE: JSON.stringify(domain + '/rules/wx/orderMove'), 
    }
})

const url = encodeURIComponent(process.env[type])

这时候就可以取到了，因为这样定义就是声明了一个对象，编译时 proess.env 就替换成了一个对象，这样就可以用键值取到，但是文档上写了，这样容易把本身的 process 对象覆盖掉，所以忍了，最终还是用了 url1，url2，url3的写法。