npm脚本学习（一）打包:cross-env NODE_ENV=production env_config=uat node build/build.js

最新推荐文章于 2024-11-23 21:35:14 发布

疯糖

最新推荐文章于 2024-11-23 21:35:14 发布

阅读量9.8k

点赞数 2

分类专栏： npm 文章标签： npm nodejs

本文链接：https://blog.youkuaiyun.com/Cynthia_Yue27/article/details/106901679

版权

npm 专栏收录该内容

3 篇文章

订阅专栏

很好奇npm脚本（package.json中的scripts）都是什么意思，然后就开始一点一点去学习，觉得越挖越觉得自己知道的东西太少了，所以记录一下自己学到的一些知识。

一、process.env

process对象是一个node的全局变量，是在node应用程序中始终可用的，在终端中输入node，再输入process.env就可以输出一些用户环境信息，但输入process.env.NODE_ENV显示的的undefined
在这里插入图片描述
二、process.env.NODE_ENV
NODE_ENV属性并不是process.env的原有属性，而是人为定义的
1.再webpack4之前通过DefinePlugin来定义当前的环境，DefinePlugin允许我们创建全局变量，可以在编译时进行设置，因此我们可以使用该属性来设置全局变量来区分开发环境和正式环境

const webpack = require('webpack');

module.exports = {
    entry: {
        app: './src/app'
    },
    output: {
        path: 'dist',
        filename: 'bundle.js'
    },
    plugins: [
        new webpack.DefinePlugin({
           'process.env.NODE_ENV':  JSON.stringify(process.env.NODE_ENV)
        })
    ]
};

如果直接打印process.env.NODE_ENV，输出结果为undefined，因为我们没有给它设置值
需要在package.json的scripts中设置，就可以打印出来了

"build:uat": "cross-env NODE_ENV=production env_config=uat node build/build.js"
"build:prod": "cross-env NODE_ENV=production env_config=prod node build/build.js",

2.在webpack4之后中直接在mode中配置

const webpack = require('webpack');

module.exports = {
	mode: 'development',
    entry: {
        app: './src/app'
    },
    output: {
        path: 'dist',
        filename: 'bundle.js'
    }
};

三、cross-env
在这里插入图片描述
由于上边这个问题，cross-env就出现了，它是运行跨平台设置和使用环境变量的脚本，我们就可以不受平台的限制，使用它设置NODE_ENV为不同的参数打包了