node.js - @shopify/polaris 项目如何从 github 存储库构建到 npm 依赖项？

Question

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

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

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

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

.
├── 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 和图标所需的工作。然后，此配置生成器运行三次，您可以在此处看到:https://github.com/Shopify/polaris/blob/master/scripts/build.js#L36-L38

1. main 入口文件(.js，并为我们的 CDN 生成 CSS)
2. 模块入口文件(.es.js)
3. 嵌入入口文件

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

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