{
  // 工程名，如果要publish到npm倉庫，需要唯一
  "name": "yoantd", 
  // 版本號(hào), 主版本號(hào).次版本號(hào).修訂版本號(hào), 后兩個(gè)版本號(hào)是兼容版本號(hào)
  "version": "1.0.0", 
  // 描述
  "description": "antd組件庫封裝", 
  // 入口文件，發(fā)布到npm被其他工程依賴時(shí)，如import yoantd from 'yoantd'時(shí)加載的就是main指向的文件
  "main": "dist/index.js",
  // 防止意外發(fā)布到公有庫，'true時(shí)npm會(huì)拒絕發(fā)布
  "private": true, 
  // 設(shè)置環(huán)境變量，在node環(huán)境下可以獲取，下面再詳解怎么使用環(huán)境變量
  "config": {
    "data": "testconfig"
  },
  // 許可證，讓別人知道可以怎么使用源碼
  // MIT是一種開源協(xié)議，基本不做任何限制，如果不希望別人使用可以設(shè)置為UNLICENSED
  "license": " MIT",
  // 關(guān)鍵字，在npm倉庫可以根據(jù)關(guān)鍵字搜到包
  "keywords": ["yoantd", "yocoder"],
  // 自定義npm命令，`npm run test`
  "scripts": {
    "test": "echo test",
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
     ...
  },
  // 依賴管理，運(yùn)行時(shí)依賴，npm i時(shí)下載。
  "dependencies": {
    "antd": "4.0.3", // 指定版本號(hào)4.0.3
    "react": "^16.13.1", // 自動(dòng)更新最左邊的非0數(shù)字的右側(cè)，npm i時(shí)安裝16.lastest.lastest
    "uxcore": "^0.22.21", // 0.22.lastest
    "react-dom": "~16.13.1", // 自動(dòng)更新修訂版本號(hào)，16.3.lastest
    "react-router-dom": ">5.1.2", // 大于5.1.2
    ...
  },
  // 依賴管理，開發(fā)時(shí)依賴，打包檢查工具等，npm i時(shí)下載
  "devDependencies": {
   "@babel/plugin-proposal-decorators": "^7.8.3",
    ...
  },
  // 可選依賴, 允許不安裝或安裝失敗
  "optionalDependencies": {
    "puppeteer": "^1.6.0"
  },

dependencies和devDependencies區(qū)別

如果不publish則沒有區(qū)別，npm i 的時(shí)候都會(huì)下載依賴。
如果把這個(gè)工程publish到npm倉庫，在其他工程執(zhí)行npm i yoantd時(shí)，會(huì)自動(dòng)下載yoantd工程的dependencies依賴，而devDependencies不會(huì)被下載。

process.env環(huán)境變量的使用

1. 在package.json里設(shè)置config

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

在node環(huán)境下可以通過process.env.npm_package_config_*獲取，比如設(shè)置如上的config，就可以通過process.env.npm_package_config_data獲取到testconfig這個(gè)值。
這種設(shè)置方式，是對(duì)所有的scripts生效的，如果想對(duì)npm start和npm run build設(shè)置不同的環(huán)境變量，可以使用 cross-env

2. 使用cross-env

• 安裝 npm i cross-env --save-dev
• 在scripts命令里加環(huán)境變量

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

• node環(huán)境里使用
  start啟動(dòng)時(shí)可以取到值process.evn.cmd=start，process.evn.env=dev；
  build打包時(shí)可以取到值process.evn.cmd=build，process.evn.env=pro

細(xì)心的你是否注意到，上面說的是node環(huán)境里使用，就是只能在webpack或者node server等node環(huán)境里使用。如果想在代碼里使用，還需要加點(diǎn)配置。

添加webpack.DefinePlugin配置如下，這樣就可以在代碼里當(dāng)成全局變量來使用process.env.data，process.env.cmd，process.env.env了。我這里使用react-app-rewired的config-overrides.js文件進(jìn)行配置，如果你想了解可以參考我的另一篇文章《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),
    })
  ),
);