package.json详解

{
  // 工程名，如果要publish到npm仓库，需要唯一
  "name": "yoantd", 
  // 版本号, 主版本号.次版本号.修订版本号, 后两个版本号是兼容版本号
  "version": "1.0.0", 
  // 描述
  "description": "antd组件库封装", 
  // 入口文件，发布到npm被其他工程依赖时，如import yoantd from 'yoantd'时加载的就是main指向的文件
  "main": "dist/index.js",
  // 防止意外发布到公有库，'true时npm会拒绝发布
  "private": true, 
  // 设置环境变量，在node环境下可以获取，下面再详解怎么使用环境变量
  "config": {
    "data": "testconfig"
  },
  // 许可证，让别人知道可以怎么使用源码
  // MIT是一种开源协议，基本不做任何限制，如果不希望别人使用可以设置为UNLICENSED
  "license": " MIT",
  // 关键字，在npm仓库可以根据关键字搜到包
  "keywords": ["yoantd", "yocoder"],
  // 自定义npm命令，`npm run test`
  "scripts": {
    "test": "echo test",
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
     ...
  },
  // 依赖管理，运行时依赖，npm i时下载。
  "dependencies": {
    "antd": "4.0.3", // 指定版本号4.0.3
    "react": "^16.13.1", // 自动更新最左边的非0数字的右侧，npm i时安装16.lastest.lastest
    "uxcore": "^0.22.21", // 0.22.lastest
    "react-dom": "~16.13.1", // 自动更新修订版本号，16.3.lastest
    "react-router-dom": ">5.1.2", // 大于5.1.2
    ...
  },
  // 依赖管理，开发时依赖，打包检查工具等，npm i时下载
  "devDependencies": {
   "@babel/plugin-proposal-decorators": "^7.8.3",
    ...
  },
  // 可选依赖, 允许不安装或安装失败
  "optionalDependencies": {
    "puppeteer": "^1.6.0"
  },

dependencies和devDependencies区别

如果不publish则没有区别，npm i 的时候都会下载依赖。
如果把这个工程publish到npm仓库，在其他工程执行npm i yoantd时，会自动下载yoantd工程的dependencies依赖，而devDependencies不会被下载。

process.env环境变量的使用

1. 在package.json里设置config

  "config": {
    "data": "testconfig"
  },

在node环境下可以通过process.env.npm_package_config_*获取，比如设置如上的config，就可以通过process.env.npm_package_config_data获取到testconfig这个值。
这种设置方式，是对所有的scripts生效的，如果想对npm start和npm run build设置不同的环境变量，可以使用 cross-env

2. 使用cross-env

• 安装 npm i cross-env --save-dev
• 在scripts命令里加环境变量

  "scripts": {
    "start": "cross-env cmd=start env=dev react-app-rewired start",
    "build": "cross-env cmd=build env=pro react-app-rewired build",
     ...
  },

• node环境里使用
  start启动时可以取到值process.evn.cmd=start，process.evn.env=dev；
  build打包时可以取到值process.evn.cmd=build，process.evn.env=pro

---

细心的你是否注意到，上面说的是node环境里使用，就是只能在webpack或者node server等node环境里使用。如果想在代码里使用，还需要加点配置。

添加webpack.DefinePlugin配置如下，这样就可以在代码里当成全局变量来使用process.env.data，process.env.cmd，process.env.env了。我这里使用react-app-rewired的config-overrides.js文件进行配置，如果你想了解可以参考我的另一篇文章《create-react-app不用eject配置webpack》

const webpack = require("webpack");
const {
  override,
  addWebpackPlugin,
} = require("customize-cra");

module.exports = override(
  addWebpackPlugin(
    new webpack.DefinePlugin({
      "process.env.data": JSON.stringify(process.env.data),
      "process.env.cmd": JSON.stringify(process.env.cmd),
      "process.env.env": JSON.stringify(process.env.env),
    })
  ),
);