package.json 非官方字段集合

denson 发布于2019-08-23 11:56 / 2833人阅读

摘要：非官方字段集合官方字段请参考。下面介绍的是非官方字段，也就是各种工具定义的相关字段。详细参考相关字段设置项目的浏览器兼容情况。相关字段测试库。相关字段代码检查与优化。

package.json 非官方字段集合

package.json 官方字段请参考 https://docs.npmjs.com/files/package.json。下面介绍的是非官方字段，也就是各种工具定义的相关字段。

1. yarn 相关字段

yarn: 类似 npm 的依赖管理工具，但 yarn 缓存了每个下载过的包，所以再次使用时无需重复下载，同时利用并行下载以最大化资源利用率，因此安装速度更快。

flat

{
  "flat": true
}

如果你的包只允许给定依赖的一个版本，你想强制和命令行上 yarn install --flat 相同的行为，把这个值设为 true。

详细参考 yarn - flat.

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。

详细参考 yarn - resolutions.

2. unpkg 相关字段

unpkg: 让 npm 上所有的文件都开启 cdn 服务。

unpkg

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

正常情况下，访问 jquery 的发布文件通过 https://unpkg.com/jquery@3.3.1/dist/jquery.js，当你使用省略的 url https://unpkg.com/jquery 时，便会按照如下的方式获取文件：

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

# 定义了 unpkg 属性时
https://unpkg.com/jquery@[latestVersion]/[pkg.unpkg]

# 未定义 unpkg 属性时，将回退到 main 属性
https://unpkg.com/jquery@[latestVersion]/[pkg.main]

详细参考 https://unpkg.com.

3. TypeScript 相关字段

TypeScript: JavaScript 的超集

types, typings

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

就像 main 字段一样，定义一个针对 TypeScript 的入口文件。

详细参考 TypeScript documentation.

4. browserslist 相关字段

browserslist: 设置项目的浏览器兼容情况。

browserslist

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

支持的工具：

Autoprefixer

Babel

postcss-preset-env

eslint-plugin-compat

stylelint-no-unsupported-browser-features

postcss-normalize

详细参考 browserslist.

5. 发行打包相关字段

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

module

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

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

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

支持的工具：

rollup

webpack

详细参考 rollup - pkg.module.

browser

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

指定该模块供浏览器使用的入口文件。

如果这个字段未定义，则回退到 main 字段指向的文件。

支持的工具：

rollup

webpack

browserify

详细参考 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/.

17. 其他 style

声明当前模块包含 style 部分，并指定入口文件。

支持的工具：

parcelify

npm-less

rework-npm

npm-css

详细参考 Package.json "style" Attribute, istf-spec.

less

与 style 一样，但是是 less 文件。

支持的工具：

npm-less

18. 更多

参考 package.json fields explained.

19. 后续

更多博客，查看 https://github.com/senntyou/blogs

作者：深予之 (@senntyou)

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/97703.html

前端进阶（13） - 搭建自己的前端脚手架

摘要：搭建自己的前端脚手架一般新开发一个项目时，我们会首先搭建好一个脚手架，然后才会开始写代码。搭建脚手架可以用等命令行工具，也可以直接用等模板，如果这些都不能满足你的个性化需求，可以尝试搭建自己的前端脚手架。搭建自己的前端脚手架一般新开发一个项目时，我们会首先搭建好一个脚手架，然后才会开始写代码。搭建脚手架可以用 create-react-app、vue-cli、yeoman 等命令行...

lykops 2019-08-26 12:20 评论0 收藏0
Nodejs开发简单的脚手架工具

摘要：本文主要是介绍开发一个简单的脚手架，了解开发的基本流程最终通过链接到全局包。完成之后，就可以把脚手架发布到上面，通过进行全局安装，就可以在自己本机上执行来初始化项目，这样便完成了一个简单的脚手架工具了。脚手架，这个名词对于作为前端的我们来说，也许并不陌生吧，像vue-cli，react-native-cli等，全局安装后，只需要在命令行中敲入一个简单的命令，便可帮我们快速的生成一个初...

sean 2019-08-22 18:01 评论0 收藏0
2018 年了，你还是只会 npm install 吗

摘要：无需手动拷贝文件或者创建软链接到目录，有更优雅的解决方案。这是因为识别协议的，得知这个包需要直接从文件系统中获取，会自动创建软链接到中，完成安装过程。 nodejs 社区乃至 Web 前端工程化领域发展到今天，作为 node 自带的包管理工具的 npm 已经成为每个前端开发者必备的工具。但是现实状况是，我们很多人对这个nodejs基础设施的使用和了解还停留在: 会用 npm insta...

libxd 2019-08-22 15:41 评论0 收藏0
package.json文件各字段的说明

摘要：字段由脚本命令组成的字典，这些命令运行在包的各个生命周期中。在打包过程中，如果遇到字段会优先使用字段表示的路径下的文件，如果不存在，则用字段表示的作为入口，并按照的规范打包。其中还分析了文件中字段和字段的不同以及和两个字段的区别。所有用npm下载的包或者要上传至npm的模块都会有一个package.json文件，这个文件总是存在于模块(或者包)的根目录下，这个文件到底是干嘛的，现在就...

yzd 2019-08-23 13:50 评论0 收藏0
Express 实战（八）：利用 MongoDB 进行数据持久化

摘要：在使用过程中我们可以通过增加哈希次数来提高数据的安全性。当然，对密码的哈希操作应该在保存数据之前。 showImg(https://segmentfault.com/img/remote/1460000010821081); 毫无疑问，几乎所有的应用都会涉及到数据存储。但是 Express 框架本身只能通过程序变量来保存数据，它并不提供数据持久化功能。而仅仅通过内存来保存数据是无法应对...

yanbingyun1990 2019-08-20 18:54 评论0 收藏0