Antd自动化部署遇到的问题

话说这些天在做自动化部署基于Antd的React项目时,为了给开发环境和生产环境设置不同的API Server地址,我找到了早先在package.json里的设置,如下:

“scripts”: {

……

“build:dev”: “cross-env NODE_ENV=development   roadhog build”,
“build:prod”: “cross-env NODE_ENV=production   roadhog build”,

……

}

然后在代码里边这样取,API_SERVER是一个对象里面的成员:

API_SERVER: (process.env.NODE_ENV === “development “) ? API_ DEV : API_ PROD

这样当我构建项目,执行”cnpm run build:dev”时,API Server地址为API_DEV,当执行”cnpm run build:prod”时,API Server地址为API_PROD。

可是,可是这个项目不知道进行了哪些升级,现在无论执行哪个命令,API Server地址都取得API_PROD,也就是process.env.NODE_ENV永远等于”production”。不管是哪个命令,最后都是执行roadhog build命令,我猜想只要是build命令,roadhog就认为是production环境,可是之前测试为嘛又成功捏,纳闷啊。

为此,我特意去看了这个文件“/usr/lib/node_modules/roadhog/lib/build.js”的代码,里面有一行:

process.env.NODE_ENV = process.env.NODE_ENV || ‘production’;

的确默认是“production”,这就说明用cross-env写的值到这里还是空的,难道是cross-env不work了?心塞。

后来我去看了roadhog的issue,并在这个issue里写了评论,然后这个项目的maintainer给了回复:

好吧,到这里,我就死心了,据说可以在.webpackrc.js里面获取环境变量,再用DefinePlugin传值到代码里边,但我也懒得弄了,我直接在构建脚本里面使用sed替换大法来解决,代码里面默认写的API_PROD地址,如果是构建dev环境的,我就用sed替换API_PROD为API_DEV的值就好了,不折腾多了,要不然我怕自己今后快乐不起来,哈哈哈。

在这个过程中,我还参考了以下网上还不错的文章,有些概念越来越明晰了,可我不愿吃独食,分享给大家吧:

前端系列——快速理解babel6配置过程

用一个helloworld项目学习webpack

NODE_ENV跨平台设置

使用dva+antd快速构建单页面应用

Building Better Bundles: Why process.env.NODE_ENV Matters for Optimized Builds

深入浅出webpack学习(18)–区分环境

How Browserify Works

发表评论

电子邮件地址不会被公开。