如何将包含js、css及assets静态资源的包正确发布到npm

原因说明 #

你遇到的发布后仅存在index.js的问题，本质是npm发布时默认没有匹配到你要上传的src下全量文件，或被忽略规则过滤导致。

操作步骤 #

• 第一步：配置package.json的files字段，明确指定要发布的文件范围，该字段优先级高于所有忽略规则
  示例配置如下：

  {
    "name": "你的内部UI包名",
    "version": "1.0.0",
    "main": "src/index.js",
    "style": "src/index.css", // 可选配置，便于工具自动识别样式入口
    "files": [
      "src/**/*"
    ]
  }
  

  其中src/**/*会递归匹配src目录下所有层级的所有文件，包含js、css、assets下的字体、图片等全部静态资源。

• 第二步：清理忽略规则（可选，配置files字段后可跳过）
  检查项目根目录下的.gitignore和.npmignore文件，删除其中匹配.css、assets/相关的忽略条目，未配置files字段时，npm会默认使用.gitignore的规则过滤待发布文件。

• 第三步：发布前预校验
  本地执行npm pack命令，会在当前目录生成和发布到npm完全一致的tgz压缩包，解压后即可直接查看包含的文件列表，确认所有资源都存在后再执行npm publish发布即可。

内容的提问来源于stack exchange，提问作者Andrew