组件的发布

发布到 npm 源

发布到 npm 源是为了分发

之前我们已经构建出了产物，现在需要发布到 npm 上

实际上也很方便，因为我们之前在 package.json 中的 entry point 字段

已经知道发布一个 npm 包，需要哪些字段了。

像之前的目录结构:

index.css
index.d.ts
index.js
index.umd.cjs
....

我们自然可以在 package.json 这样配置出:

{
  "name": "ice-ui",
  "version": "0.0.0",
  "type": "module",
  "files": ["dist"],
  "main": "./dist/index.umd.cjs",
  "module": "./dist/index.js",
  "exports": {
    ".": {
      "import": "./dist/index.js",
      "require": "./dist/index.umd.cjs"
    },
    "./style.css": "./dist/index.css"
  }
}

发布到 npm 源

在注册 npmjs.com 之后，创建 Access Token，你就可以使用这个 token 发布 npm 包了

这个 token 会保存在你全局的 .npmrc 中

在配置完成之后，执行 npm publish 就能够顺利发布到公有的 npmjs.com 源了

你可以执行 npm publish --dry-run 查看到底哪些文件会被包括在发布包中。

指定 npm 源

可以通过 package.json 中的 publishConfig 去指定 npm 源

{
  "publishConfig": {
    "access": "restricted",
    "registry": "http://your.self.npm.org/"
  }
}

发布成功

你可以直接在 https://www.npmjs.com/package/<your-package-name> 这里看到你发布的包的样子

<your-package-name> 换成你自己在 package.json 写的 name 就是你包的名字

npmjs 搜索你的包可能没有那么快，但是过一段时间之后，你也能搜索到你自的包了

进阶

package.json 里面实际上有很多字段，会影响的 npmjs 的 seo 还有页面的表现

比如 description, keywords 就会显示在 npm 搜索列表中

{
  "type": "git",
  "url": "https://github.com/sonofmagic/deep-in-vue.git"
}

这个会影响页面的 Repository 展示

{
  "homepage": "https://deep-in-vue.icebreaker.top",
}

这个会影响页面的 Homepage 展示

还有 license 等等字段，看 npm 官方文档自己摸索去吧。