react 的 package.json 文件的 scripts

package.json scripts 脚本使用指南

说明

• 它里面记录了我们的运行脚本
• 可以帮我们运行我们安装上来的依赖包

基础的 scripts

  "scripts": {
    "start": "react-scripts start",        做开发
    "build": "react-scripts build",        做打包
    "test": "react-scripts test",          做测试
    "eject": "react-scripts eject"         把我们的配置解出来
  },

把配置解出来

在这里插入图片描述

上图的里面是缺乏一些环境的配置的，是不存在的，如果你想介入进入，并且配置要怎么办呢？

• 实则react 是把 所有的配置 封装在 node_modules 下面一个叫做 react-scripts 这个包下面
  在这里插入图片描述

start指定环境 npm run dev

"scripts": {
  "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
  "start": "npm run dev",
  "lint": "eslint --ext .js,.vue src",
  "build": "cross-env NODE_ENV=development env_config=dev node build/build.js",
  "build:prod": "cross-env NODE_ENV=production env_config=prod node build/build.js",
  "build:sit": "cross-env NODE_ENV=production env_config=sit node build/build.js"
},

1.以上为我的npm脚本,执行 npm run + scripts的key,就相当于执行scripts的key对应的value，
如：执行 npm run dev 等同于执行 webpack-dev-server --inline --progress --config build/webpack.dev.conf.js, 即启动程序

在这里插入图片描述

2.build，build:prod，build:sit分别代表给本地环境，生产环境，测试环境打包。
3.脚本涵义：如 cross-env NODE_ENV=decelopment env_config=dev node build/build.js
cross-env：可以跨平台地设置及使用环境变量（npm i --save-dev cross-env 安装使用）
NODE_ENV： config文件夹下对应环境配置的NODE_ENV值
env_config： config文件夹下对应环境配置的env_config 值
node build/build.js 环境配置入口

设置为"start": "cross-env PORT=8003 roadhog dev"和"start": "react-scripts start"有什么区别

npm run 只是提供了便捷的易懂的语法糖。至于内容的区别。react-scripts start 明显使用了react-scripts插件，这个集成了webpack server热加载等服务。cross-env PORT=8003 roadhog dev 这个就是用的roadhog 插件作为载体，据说是打包配置更方便一些，比如增加less什么的。我也没用过