package.json 非官方字段集合

時間 2019-11-06

標籤 package.json package json 非官方字段集合欄目 JavaScript 简体版

原文原文鏈接

package.json 非官方字段集合

package.json 官方字段請參考 https://docs.npmjs.com/files/package.json。下面介紹的是非官方字段，也就是各類工具定義的相關字段。css

1. yarn 相關字段

yarn: 相似 npm 的依賴管理工具，但 yarn 緩存了每一個下載過的包，因此再次使用時無需重複下載，同時利用並行下載以最大化資源利用率，所以安裝速度更快。html

`flat`

{
  "flat": true
}

若是你的包只容許給定依賴的一個版本，你想強制和命令行上 yarn install --flat 相同的行爲，把這個值設爲 true。node

詳細參考 yarn - flat.react

`resolutions`

{
  "resolutions": {
    "transitive-package-1": "0.0.29",
    "transitive-package-2": "file:./local-forks/transitive-package-2",
    "dependencies-package-1/transitive-package-3": "^2.1.1"
  }
}

容許你覆蓋特定嵌套依賴項的版本。有關完整規範，請參見選擇性版本解析 RFC。jquery

詳細參考 yarn - resolutions.webpack

2. unpkg 相關字段

unpkg: 讓 npm 上全部的文件都開啓 cdn 服務。git

`unpkg`

# jquery
{
  "unpkg": "dist/jquery.js"
}

正常狀況下，訪問 jquery 的發佈文件經過 https://unpkg.com/jquery@3.3.1/dist/jquery.js，當你使用省略的 url https://unpkg.com/jquery 時，便會按照以下的方式獲取文件：es6

# [latestVersion] 指最新版本號，pkg 指 package.json

# 定義了 unpkg 屬性時
https://unpkg.com/jquery@[latestVersion]/[pkg.unpkg]

# 未定義 unpkg 屬性時，將回退到 main 屬性
https://unpkg.com/jquery@[latestVersion]/[pkg.main]

詳細參考 https://unpkg.com.github

3. TypeScript 相關字段

TypeScript: JavaScript 的超集web

`types`, `typings`

{
  "main": "./lib/main.js",
  "types": "./lib/main.d.ts"
}

就像 main 字段同樣，定義一個針對 TypeScript 的入口文件。

詳細參考 TypeScript documentation.

4. browserslist 相關字段

browserslist: 設置項目的瀏覽器兼容狀況。

`browserslist`

{
  "browserslist": [
    "> 1%",
    "last 2 versions"
  ]
}

支持的工具：

詳細參考 browserslist.

5. 發行打包相關字段

點擊 Setting up multi-platform npm packages 查看相關介紹。

`module`

{
  "main": "./lib/main.js",
  "module": "./lib/main.m.js"
}

就像 main 字段同樣，定義一個針對 es6 模塊及語法的入口文件。

構建工具在構建項目的時候，若是發現了這個字段，會首先使用這個字段指向的文件，若是未定義，則回退到 main 字段指向的文件。

支持的工具：

詳細參考 rollup - pkg.module.

`browser`

{
  "main": "./lib/main.js",
  "browser": "./lib/main.b.js"
}

指定該模塊供瀏覽器使用的入口文件。

若是這個字段未定義，則回退到 main 字段指向的文件。

支持的工具：

詳細參考 babel-plugin-module-resolver.

`esnext`

{
  "main": "main.js",
  "esnext": "main-esnext.js"
}

# or

{
  "main": "main.js",
  "esnext": {
    "main": "main-esnext.js",
    "browser": "browser-specific-main-esnext.js"
  }
}

使用 es 模塊化規範，stage 4 特性的源代碼。

詳細參考 Transpiling dependencies with Babel, Delivering untranspiled source code via npm.

`es2015`

{
  "main": "main.js",
  "es2015": "main-es2015.js"
}

Angular 定義的未轉碼的 es6 源碼。

詳細參考 https://docs.google.com/document/d/1CZC2rcpxffTDfRDs6p1cfbmKNLA6x5O-NtkJglDaBVs/edit#.

`esm`

詳細參考 adjusted proposal: ES module "esm": true package.json flag.

6. react-native 相關字段

react-native: 使用 react 組件技術寫原生APP。

`react-native`

{
  "main": "./lib/main.js",
  "react-native": "./lib/main.react-native.js"
}

指定該模塊供 react-native 使用的入口文件。

若是這個字段未定義，則回退到 main 字段指向的文件。

源代碼查看.

7. webpack 相關字段

`sideEffects`

{
  "sideEffects": true|false
}

聲明該模塊是否包含 sideEffects（反作用），從而能夠爲 tree-shaking 提供更大的優化空間。

詳細參考 sideEffects example, proposal for marking functions as pure, eslint-plugin-tree-shaking.

8. microbundle 相關字段

microbundle: 基於 rollup 零配置快速打包工具。

`source`

{
  "source"： "src/index.js"
}

源文件入口文件。

詳細參考 Specifying builds in package.json.

`umd:main`

{
  "umd:main"： "dist/main.umd.js"
}

umd 模式 bundle 文件。

詳細參考 Specifying builds in package.json.

8. parcel 相關字段

parcel: 零配置打包工具。

`source`

查看 parcel-bundler/parcel#1652.

9. babel 相關字段

babel: es6 -> es5 轉碼器。

`babel`

配置 babel。

10. eslint 相關字段

eslint: js 代碼檢查與優化。

`eslintConfig`

配置 eslint。

11. jest 相關字段

jest: js 測試庫。

`jest`

{
  "jest": {
    "verbose": true
  }
}

配置 jest。

詳細參考 jest docs.

12. stylelint 相關字段

stylelint: style 代碼檢查與優化。

`stylelint`

配置 stylelint。

詳細參考 New configuration loader.

13. ava 相關字段

ava: js 測試庫。

`ava`

{
  "ava": {
    "require": [ "@std/esm" ]
  }
}

配置 ava。

詳細參考 ava configuration.

14. nyc 相關字段

nyc: istanbul.js 命令行。

`nyc`

{
  "nyc": {
    "extension": [".js", ".mjs"],
    "require": ["@std/esm"]
  }
}

配置 nyc。

詳細參考 nyc docs.

15. CommonJS 保留字段

保留字段: build, default, email, external, files, imports, maintainer, paths, platform, require, summary, test, using, downloads, uid.

不可用字段: id, type, 以 _ 和 $ 開頭的字段。

16. Standard JS 相關字段

Standard JS: js 代碼檢查與優化。

`standard`

{
  "standard": {
    "parser": "babel-eslint",
    "ignore": [
      "**/out/",
      "/lib/select2/",
      "/lib/ckeditor/",
      "tmp.js"
    ]
  }
}

配置 standard.

詳細參考 https://standardjs.com/.