首页 > 分享 > npm脚本学习(一)打包:cross

npm脚本学习(一)打包:cross

最新推荐文章于 2024-11-01 11:03:31 发布

疯糖 于 2020-06-22 15:16:03 发布

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。

很好奇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) }) ] };

12345678910111213141516

如果直接打印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", 12

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

const webpack = require('webpack'); module.exports = {mode: 'development', entry: { app: './src/app' }, output: { path: 'dist', filename: 'bundle.js' } }; 123456789101112

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

相关知识

强势开源,Star 破百,仅一行代码,拥有网址导航 + 博客 + 后台管理网站。强势开源,花森网站基于 vue.js(2
NPM 常见错误
谷歌AdWords脱销脚本
Redis Lua脚本大学教程
vue3.x使用prerender
实际在node环境中运行 const path = require('path')
在实时渲染过程中,如何利用GPU技术实现高质量的全局光照效果?请参考《GPUPro 1:高级渲染技术》的相关章节提供详细解答。
基于TensorFlow训练花朵识别模型的源码和Demo
shell脚本
HTML学习笔记(一)

网址: npm脚本学习(一)打包:cross https://m.huajiangbk.com/newsview1388143.html

所属分类:花卉
上一篇: JavaScript学习记录
下一篇: Python编程入门指南