// ！！！！！！ // npm run build1 // ！！！！！！ // index.js function getEnv() { console.log(process.env.NODE_ENV);// production } // webpack.config.js const path = require('path'); const webpack = require('webpack'); console.log('process.env.NODE_ENV',process.env.NODE_ENV);// development module.exports = { entry:'./src/index.js', output: { filename: 'js/[name].js' }, ... };
2.4.2 写法二
"scripts": { "dev2": "cross-env NODE_ENV='development' --mode development", "build2": "cross-env NODE_ENV='production' --mode production", }
以上 script 脚本，可以在任意模块内通过 process.env.NODE_ENV 获取当前的环境变量
可以在 node 环境（webpack 配置文件中）下，获取当前环境变量
所以在能浏览器环境下读取到环境变量的值，靠的是 mode ，在 node 环境下读取到环境变量的值，靠的是 cross-env
// ！！！！！！ // npm run build2 // ！！！！！！ // index.js function getEnv() { console.log(process.env.NODE_ENV);// production } // webpack.config.js const path = require('path'); const webpack = require('webpack'); console.log('process.env.NODE_ENV',process.env.NODE_ENV);// production module.exports = { entry:'./src/index.js', output: { filename: 'js/[name].js' }, ... };
三、误区
经常在一些群里看到这个问题： cross-env 和 webpack.DefinePlugin 配合使用的时候，无法通过 process.env.xxx 来获取到设置的环境变量，需要通过 webpack.DefinePlugin 里面设置的 key 来获取。
会引发这个问题的可能原因是：先往 cross-env 里设置了 NODE_ENV 变量，然后又到 DefinePlugin里设置了一遍环境变量
"scripts": { "dev": "cross-env NODE_ENV='development' --mode development" }
// index.js function getEnv() { console.log(process.env.NODE_ENV);// development } // webpack.config.js const path = require('path'); const webpack = require('webpack'); console.log('process.env.NODE_ENV',process.env.NODE_ENV);// development module.exports = { entry:'./src/index.js', output: { filename: 'js/[name].js' }, plugins:[ new webpack.DefinePlugin({ // 设置环境变量 'process.env.NODE_ENV':JSON.stringify('development'), }), ], ... };
此时会发现浏览器环境和 node 环境都能获取到设置的变量了，然后就认为之后再设置其他的全局变量时，也像这样写就行了。
认为 cross-env 和 DefinePlugin 是配套一起使用的，这个看法本身就很奇怪，因为两者的作用点不一样
DefinePlugin 的作用：是设置浏览器环境下能读取到的 "全局变量"，直接通过 key 读取，在 node 环境下是无法读取到的
cross-env 的作用：是通过命令行设置环境变量 NODE_ENV，使 node 环境下能读取到，通过 process.env.NODE_ENV 读取
如果在DefinePlugin 里设置的 key 是 process.env.NODE_ENV ，会覆盖 webpack 通过 mode 模式设置的环境变量的值
"scripts": { "dev": "cross-env NODE_ENV='development' --mode development" }
// index.js function getEnv() { console.log(process.env.NODE_ENV);// 666666 } // webpack.config.js const path = require('path'); const webpack = require('webpack'); console.log('process.env.NODE_ENV',process.env.NODE_ENV);// development module.exports = { entry:'./src/index.js', output: { filename: 'js/[name].js' }, plugins:[ new webpack.DefinePlugin({ // 注意：因为同名的 key，这里的值会覆盖默认的值 ！！！！！！ 'process.env.NODE_ENV':JSON.stringify('666666'), }), ], ... };
四、总结
cross-env 是专门用来设置 node 环境变量的
webpack.DefinePlugin 是专门用来设置浏览器环境下的全局变量（不会挂载到 window 上）
本文只是我个人的理解，如有错误还请告知，万分感谢
好了，以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，谢谢大家对脚本之家的支持。
您可能感兴趣的文章: