1.0.12 • Published 5 years ago
@weplanter/with-env v1.0.12
with-env
一个 npm 命令行工具包,帮助你在执行npm/yarn命令时,根据不同参数可带上不同的环境变量
使用方式
安装
yarn
yarn add @weplanter/with-env --dev
npm
npm install @weplanter/with-env --save-dev
使用
以 create-react-app 创建的项目举例
项目目录下 package.json 中 scripts 如下
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
}
使用 with-env 修改如下
"scripts": {
"start": "with-env",
"dev": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
}
执行
// yarn start [其他scripts定义的命令名称] [环境名称, 默认为 dev]
yarn start dev // process.env.NODE_ENV = 'development'
yarn start dev test // process.env.NODE_ENV = 'test'
yarn start dev pre // process.env.NODE_ENV = 'pre-production'
yarn start dev pro // process.env.NODE_ENV = 'production'
yarn start build // process.env.NODE_ENV = 'development'
yarn start build test // process.env.NODE_ENV = 'test'
yarn start build pre // process.env.NODE_ENV = 'pre-production'
yarn start build pro // process.env.NODE_ENV = 'production'
配合 webpack 插件 webpack.DefinePlugin 使用,在项目文件中使用对应的变量
const webpack = require('webpack');
export default {
...otherWebpackConfig,
plugins: [
new webpack.DefinePlugin({
'__DEV__': process.env.NODE_ENV === 'development',
'__TEST__': process.env.NODE_ENV === 'test',
'__PRE_PRO__': process.env.NODE_ENV === 'pre-production',
'__PRO__': process.env.NODE_ENV === 'production'
}),
]
}
场景示例
let requestPrefix = '';
if(__DEV__){
requestPrefix = 'http://some-dev-request-prefix'
}
if(__TEST__){
requestPrefix = 'http://some-test-request-prefix'
}
if(__PRE_PRO__){
requestPrefix = 'http://some-pre-production-request-prefix'
}
if(__PRO__){
requestPrefix = 'http://some-production-request-prefix'
}
const USER_INFO = `${requestPrefix}/users/:user_id`;
fetch(USER_INFO).then(function(response) {
// do something
})
.withenvrc.js / .withenvrc 配置
Todo...