@ shopify / polaris项目如何从github仓库构建为npm依赖项？

Question

I'm interested in learning how the @shopify/polaris project in github is built and published to npm . My main questions are:

• How are the index.es.js and index.js files being generated? Are those being generated programmatically on my computer, or are they published to npm like this?
• What mechanism is preventing the files in the github repo from being downloaded when installed? I don't see a .npmignore in the repo.

Below I have the files in the npm package, and the github, and you can see they're different.

Here's what the polaris project looks like when it's installed via NPM / yarn.

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

Here's what the project looks like on github.

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

Answer 1

We use Rollup to generate the different entry files for Polaris. You can see our generic config file here: https://github.com/Shopify/polaris/blob/master/config/rollup/index.js . Note that it does all the work of compiling our TypeScript source files (using TypeScript and Babel), as well as kicking off the work required to bundle our CSS and icons as appropriate. This config generator is then run three times, which you can see here: https://github.com/Shopify/polaris/blob/master/scripts/build.js#L36-L38

1. The main entry file ( .js , and spits out the CSS for our CDN)
2. The module entry file ( .es.js )
3. The embedded entry file

We then copy these into their final locations for the NPM publish.

As for how we control what files are in the NPM package, we use the files key in our package.json ; these are the relevant lines .