@shopify/polaris 项目是如何从 github repo 构建到 npm 依赖的？

Question

我有兴趣了解如何构建 github 中的 @shopify/polaris 项目并将其发布到 npm。我的主要问题是：

• index.es.js 和index.js 文件是如何生成的？这些是在我的计算机上以编程方式生成的，还是像这样发布到npm？
• 安装时阻止下载 github 存储库中的文件的机制是什么？我在 repo 中没有看到 .npmignore。

下面我有npm包和github中的文件，你可以看到它们是不同的。

这是polaris 项目通过 NPM / yarn 安装时的样子。

.
├── CHANGELOG.md
├── README.md
├── index.es.js
├── index.js
├── package.json
├── src
├── styles
├── styles.css
├── styles.scss
└── types

这是项目在 github 上的样子。

.
├── CHANGELOG.md
├── README.md
├── circle.yml
├── config
├── documentation
├── examples
├── package.json
├── scripts
├── src
├── tests
├── tsconfig.json
├── tslint.json
└── yarn.lock

Answer 1

我们使用Rollup 为Polaris 生成不同的入口文件。您可以在此处查看我们的通用配置文件：https://github.com/Shopify/polaris/blob/master/config/rollup/index.js。请注意，它完成了编译我们的 TypeScript 源文件（使用 TypeScript 和 Babel）的所有工作，并开始了适当地捆绑我们的 CSS 和图标所需的工作。然后此配置生成器运行 3 次，您可以在此处查看：https://github.com/Shopify/polaris/blob/master/scripts/build.js#L36-L38

1. main 入口文件（.js，并为我们的 CDN 输出 CSS）
2. module 入口文件 (.es.js)
3. embedded 入口文件

然后我们将它们复制到它们的最终位置以供 NPM 发布。

至于我们如何控制NPM包中的文件，我们在package.json中使用files key； these are the relevant lines.