详细记录一些 package.json 中的字段含义,帮助日常开发。

exports

exports 字段控制本 npm 包被引入时,有哪些模块是可用的,以及从哪里暴露这些模块。 我们引入 npm 包时可以引入包名,也可以直接引入包名下的某个路径:

import _ from 'lodash';
// 或者
import pick from 'lodash/pick';

上述行为就是在不写该字段时默认行为,对应的 exports 的值如下:

{
    "exports": {
        ".": "./main.js",
        "./": "./"
    }
}

通过 exports 我们可以显示控制引用方可以引用哪些 path :

{
  "exports": {
    ".": "./main.js",
    "./sub/path": "./secondary.js",
    "./prefix/": "./directory/",
    "./prefix/deep/": "./other-directory/",
    "./other-prefix/*": "./yet-another/*/*.js"
  }
}

注意:

  • 如果存在以 / 结尾的属性名,那么当引入的路径前缀和属性名相匹配时会使用旧的根据目录寻找 module 的方式;
  • 如果存在以 * 结尾的属性名,那么属性值中的 * 会被属性名的 * 代表的真实值替换。

候选项

如果路径对应的值为数组, 当引入该包时会依次寻找这些资源。

{
  "exports": {
    "./things/": ["./good-things/", "./bad-things/"]
  }
}

根据不同引入语句返回不同内容

{
    "exports": {
        ".": {
            "import": "./dist/my-lib.es.js",
            "require": "./dist/my-lib.umd.js"
        }
    }
}

还可以根据不同的构建工具和环境变量返回不同的内容,例如 productionelectron 等,具体可以参考文档: 参考 webpack

以上就是本文的全部内容了,感谢各位阅读,如果有任何疑问,欢迎电子邮件留言。