npmjs官网

权威参考

建议一边参考官方文档, 一边看redux的package.json

package.json文件的创建

cd /path/to/package # 你的项目根目录

npm init   # 问卷式创建

npm init -y # 快速创建, 相关字段采用默认值

在test目录下, 运行npm init -y, 创建的package.json如下:

如果是先git init后, 再 npm init -y, 会多出repository字段, 并自动关联git地址

{
  "name": "test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

设置默认配置, 举例

> npm set init.author.email "example-user@example.com"
> npm set init.author.name "example_user"
> npm set init.license "MIT"

进阶

通过创建.npm-init.js, 定制你的package.json的questionnaire, 可以参考 npm/init-package-json

redux的package.json

redux-package.json

{
  "name": "redux",
  "version": "4.0.4",
  "description": "Predictable state container for JavaScript apps",
  "license": "MIT",
  "homepage": "http://redux.js.org",
  "repository": "github:reduxjs/redux",
  "bugs": "https://github.com/reduxjs/redux/issues",
  "keywords": [ 
    "redux",
    "reducer",
    "state",
    "predictable",
    "functional",
    "immutable",
    "hot",
    "live",
    "replay",
    "flux",
    "elm"
  ],
  "authors": [
    "Dan Abramov <dan.abramov@me.com> (https://github.com/gaearon)",
    "Andrew Clark <acdlite@me.com> (https://github.com/acdlite)"
  ],
  "main": "lib/redux.js",
  "unpkg": "dist/redux.js",
  "module": "es/redux.js",
  "typings": "./index.d.ts",
  "files": [
    "dist",
    "lib",
    "es",
    "src",
    "index.d.ts"
  ],
  "scripts": {
    "clean": "rimraf lib dist es coverage",
    "format": "prettier --write \"{src,test}/**/*.{js,ts}\" index.d.ts \"**/*.md\"",
    "format:check": "prettier --list-different \"{src,test}/**/*.{js,ts}\" index.d.ts \"**/*.md\"",
    "lint": "eslint src test",
    "pretest": "npm run build",
    "test": "jest",
    "test:watch": "npm test -- --watch",
    "test:cov": "npm test -- --coverage",
    "build": "rollup -c",
    "prepare": "npm run clean && npm run format:check && npm run lint && npm test",
    "examples:lint": "eslint examples",
    "examples:test": "cross-env CI=true babel-node examples/testAll.js"
  },
  "dependencies": {
    "loose-envify": "^1.4.0",
    "symbol-observable": "^1.2.0"
  },
  "devDependencies": {
    "@babel/cli": "^7.5.0",
    "@babel/core": "^7.5.4",
    "@babel/node": "^7.5.0",
    "@babel/plugin-external-helpers": "^7.2.0",
    "@babel/plugin-proposal-object-rest-spread": "^7.5.4",
    "@babel/preset-env": "^7.5.4",
    "@babel/preset-flow": "^7.0.0",
    "@babel/register": "^7.4.4",
    "@typescript-eslint/eslint-plugin": "^1.11.0",
    "@typescript-eslint/parser": "^1.11.0",
    "babel-core": "^7.0.0-bridge.0",
    "babel-eslint": "^10.0.2",
    "babel-jest": "^24.8.0",
    "cross-env": "^5.2.0",
    "eslint": "^5.16.0",
    "eslint-config-react-app": "^4.0.1",
    "eslint-plugin-flowtype": "^2.50.3",
    "eslint-plugin-import": "^2.18.0",
    "eslint-plugin-jsx-a11y": "^6.2.3",
    "eslint-plugin-react": "^7.14.2",
    "eslint-plugin-react-hooks": "^1.6.1",
    "glob": "^7.1.4",
    "jest": "^24.8.0",
    "prettier": "^1.18.2",
    "rimraf": "^2.6.3",
    "rollup": "^1.16.7",
    "rollup-plugin-babel": "^4.3.3",
    "rollup-plugin-node-resolve": "^5.2.0",
    "rollup-plugin-replace": "^2.2.0",
    "rollup-plugin-terser": "^5.1.1",
    "rxjs": "^6.5.2",
    "typescript": "^3.5.3",
    "typings-tester": "^0.3.2"
  },
  "npmName": "redux",
  "npmFileMap": [
    {
      "basePath": "/dist/",
      "files": [
        "*.js"
      ]
    }
  ],
  "browserify": {
    "transform": [
      "loose-envify"
    ]
  },
  "jest": {
    "testRegex": "(/test/.*\\.spec\\.js)$"
  },
  "sideEffects": false
}

下面分字段解读👇

name

包的名称, npm install [name], 必须有

version

包的版本, 必须有, 要符合semantic versioning guidelines, 参考 语义化版本控制规范, 建议仔细通读

image-20190719083903871

keywords

用于github的搜索或npmjs包的搜索; 解读keywords也能大体上理解redux的特点:

"keywords": [
    "redux",
    "reducer",  // reducer, redux构成组成之一
    "state",    // 状态管理
    "predictable",   // 可预测的
    "functional",    // 纯函数的
    "immutable",     // 不可变的
    "hot",          
    "live",          
    "replay",        // 回放
    "flux",          // redux对flux的改进
    "elm"            // Elm 是一门专注于Web前端的纯函数式语言, reducer受elm启发
  ],
  1. ☞ elm官网
  2. ☞ Elm入门实践1 ——基础篇

authors

格式为: Your Name <email@example.com> (http://example.com)

了解作者的最直接途径 (邮箱@me.com感觉有逼格👍)

Dan Abramov <dan.abramov@me.com> (https://github.com/gaearon)

Dan的胡子真实帅, 有种狼叔的既视感

Dan Abramov

Andrew Clark <acdlite@me.com> (https://github.com/acdlite)

P.S. 苹果已关停@me.com后缀的ID地址的注册。所有苹果系统只能注册 @iCloud.com后缀的账号

license

详述 GitHub 中声明 LICENSE 的方法

files

是一个可选字段, 用来描述作将软件包作为依赖项安装时要包含的条目, 相当于白名单, 类似.gitignore类似的语法, files字段中包含的文件不能通过.npmignore或.gitignore排除

"files": [
    "dist",
    "lib",
    "es",
    "src",
    "index.d.ts"
  ]

.npmignore是将软件包作为依赖项安装时不包含的条目, 相当于黑名单, 如果.npmignore不存在, 则使用.gitignore的内容

但是, 作为依赖安装时, 一定包含的文件有:

  1. README
  2. CHANGES / CHANGELOG / HISTORY
  3. LICENSE / LICENCE
  4. NOTICE

总是忽略的文件有:

  1. .git
  2. CVS
  3. .svn
  4. .hg
  5. .lock-wscript
  6. .wafpickle-N
  7. .*.swp
  8. .DS_Store
  9. ._*
  10. npm-debug.log
  11. npmrc
  12. node_modules
  13. config.gypi
  14. *.orig
  15. package-lock.json (use shrinkwrap instead)

main

作为依赖包的入口文件, require "redux"或import { createStore } from "redux", 实际访问的是 node_modules/redux/lib/redux.js

 "main": "lib/redux.js",

repository

指定代码托管仓库

"repository": {
  "type" : "git",
  "url" : "https://github.com/npm/cli.git"
}

"repository": {
  "type" : "svn",
  "url" : "https://v8.googlecode.com/svn/trunk/"
}

简写语法:

"repository": "npm/npm"

"repository": "github:user/repo"

"repository": "gist:11081aaa281"

"repository": "bitbucket:user/repo"

"repository": "gitlab:user/repo"

redux中为:

"repository": "github:reduxjs/redux",

scripts

值得深入研究, ☞官网npm-scripts

redux中为:

"scripts": {
    "clean": "rimraf lib dist es coverage",
    "format": "prettier --write \"{src,test}/**/*.{js,ts}\" index.d.ts \"**/*.md\"",
    "format:check": "prettier --list-different \"{src,test}/**/*.{js,ts}\" index.d.ts \"**/*.md\"",
    "lint": "eslint src test",
    "pretest": "npm run build",
    "test": "jest",
    "test:watch": "npm test -- --watch",
    "test:cov": "npm test -- --coverage",
    "build": "rollup -c",
    "prepare": "npm run clean && npm run format:check && npm run lint && npm test",
    "examples:lint": "eslint examples",
    "examples:test": "cross-env CI=true babel-node examples/testAll.js"
  },

我们可以下载redux源码, cd yourPath, npm install, 然后运行npm run xx试试 (xx是scripts字段的属性, 比如clearn, format, lint, test, 等等)

dependencies

表示在生产环境下使用该依赖, 对应 npm install xx -S 或 npm install xx --save

devDependencies

表示仅在开发环境下使用, 不会在生产环境中使用的依赖, 对应 npm install xx -D 或 npm install xx --save-dev

拓展字段

☞package.json拓展字段说明

unpkg

unpkg 是一个内容源自 npm 的全球快速 CDN, 它能以快速而简单的方式提供任意包、任意文件，通过类似这样的 URL ：unpkg.com/:package@:version/:file

在国内一些互联网公司也有镜像，例如知乎和饿了么。

"unpkg": "dist/redux.js",  // 用unpkg的裸url访问时, 指定到该文件

当你访问: https://unpkg.com/redux@4.0.3/dist/redux.min.js 是对应redux@4.0.3版本的压缩后的js文件

当你访问: https://unpkg.com/redux ——根据package.json配置的unpkg, 重定向为--—> https://unpkg.com/redux@4.0.4/dist/redux.js , 做了两次重定向, 如图:

image-20190719133353186

image-20190719133522672

如何你访问: https://unpkg.com/redux/ (注意redux后有/), 是一个页面:

image-20190719132504989

module

点击 Setting up multi-platform npm packages 查看相关介绍。

就像 main 字段一样，定义一个针对 es6 模块及语法的入口文件。

构建工具在构建项目的时候，如果发现了这个字段，会首先使用这个字段指向的文件，如果未定义，则回退到 main 字段指向的文件。

支持的工具：

typings/types

TypeScript是javascript 的超集, typings/types字段, 定义了TypeScript的入口文件

npmName

"npmName": "redux",

指定了npmjs中npm 的名字 , https://www.npmjs.com/package/redux , 一般都与package.json中的name字段一致

npmFileMap

npm文件映射。把需要同步到 cdnjs 的文件配置在这里。

参考 提交一个仓库到CDNJS

browserify

browserify是js打包工具, 支持把Commonjs模块引用方式 (require "xx"), 打包成bundle.js后, 就可以在script中引入

browserify.transform配置的类似webpack的插件, 用来在打包过程中做些事情.

jest

jest是javascript测试库。详细参考 jest docs.

sideEffects

webpack相关字段, 声明该模块是否包含 sideEffects（副作用），从而可以为 tree-shaking 提供更大的优化空间。

详细参考

  1. sideEffects example
  2. proposal for marking functions as pure
  3. eslint-plugin-tree-shaking.

本文由 givencui 创作，采用 知识共享署名 3.0，可自由转载、引用，但需署名作者且注明文章出处。

楼主残忍的关闭了评论