@@ -26,12 +26,12 @@ include ../_util-fns
2626:marked
2727 ## Table of contents
2828
29+ [Library package format](#library-package-format)
30+
2931 [Setup a local development environment](#setup-a-local-development-environment)
3032
3133 [What's in the QuickStart Library seed?](#what-s-in-the-quickstart-library-seed-)
3234
33- [Entry points](#entry-points)
34-
3535 [The build step](#the-build-step)
3636
3737 [Testing libraries](#testing-libraries)
@@ -44,14 +44,64 @@ include ../_util-fns
4444
4545 [Appendix: Dependency Management](#appendix-dependency-management)
4646
47- TODO finish this
4847
4948.l-main-section
5049:marked
51- ## Setup a local development environment
50+ ## Library package format
51+
52+ In order to understand how to build and publish a library, you have to consider _how_ the library is going to be consumed.
53+
54+ Some users need to add it as a `<script>` tag.
55+ Others might prefer to use a module loader like [SystemJS](https://github.com/systemjs/systemjs)
56+ or the native Node one.
57+ Bundlers, like [Webpack](https://webpack.js.org/) are very popular as well.
58+ [Typescript](typescriptlang.org) users need type definitions.
59+ [Rollup](https://github.com/rollup/rollup) users make use of ECMAScript modules for tree-shaking.
60+ Even though [Ahead-of-time](#appendix-supporting-aot) is preferred,
61+ [Just-in-time](#appendix-supporting-jit) compilation should be supported.
62+
63+ It's daunting to think of all the ways your library might be used and how to accommodate it,
64+ but you don't need to have a "one-size-fits-all" library.
65+
66+ You can configure `package.json` with more entry points besides [main](https://docs.npmjs.com/files/package.json#main).
67+
68+ The **Quickstart Library** seed uses a similar set of entry points as Angular itself,
69+ aimed at maximizing compatibility:
70+
71+ - `main` (default): an ES5 [UMD](https://github.com/umdjs/umd) bundle that can be consumed anywhere.
72+ - `module`: a flat ECMAScript module (FESM) bundle containing ES5 code.
73+ - `es2015`: a FESM containing ES2015 bundle.
74+ - `typings`: TypeScript and the AOT compiler will look at this entry for metadata.
75+
76+ code-example( language ="json" ) .
77+ "main": "./dist/angular-quickstart-lib.umd.js",
78+ "module": "./dist/angular-quickstart-lib.es5.js",
79+ "es2015": "./dist/angular-quickstart-lib.js",
80+ "typings": "./dist/angular-quickstart-lib.d.ts",
81+
82+ :marked
83+ There is also a minified UMD bundle (`angular-quickstart-lib.umd.min.js`) for smaller payloads
84+ in Plunkers and script tags.
85+
86+
87+ .l-sub-section
88+ :marked
89+ A flat ECMAScript module (FESM) is a bundled ECMAScript module where all imports were followed
90+ copied onto the same file file.
91+ It always contains ES module import/export statements but can have different levels of ES code
92+ inside.
93+
94+
95+ .l-main-section
96+ :marked
97+ ## The QuickStart Library seed
5298
5399 Setting up a new library project on your machine is quick and easy with the **QuickStart Library seed**,
54- maintained [on github](https://github.com/angular/quickstart-lib "Install the github QuickStart Library repo").
100+ maintained [on github](https://github.com/angular/quickstart-lib "Install the github QuickStart Library repo").
101+
102+ This example repository has an implemention of the described package format but is by no means
103+ the only way you should publish a library.
104+ Any setup that builds the necessary package format works just as well for a consumer.
55105
56106:marked
57107 Make sure you have at least Node 6.9 and NPM 3.0 installed.
@@ -207,52 +257,6 @@ table(width="100%")
207257 The library's main `NgModule`, `LibModule`.
208258
209259
210- .l-main-section
211- :marked
212- ## Entry points
213-
214- In order to understand how to build and publish a library, you have to consider _how_ the library is going to be consumed.
215-
216- Some users need to add it as a `<script>` tag.
217- Others might be using [SystemJS](https://github.com/systemjs/systemjs) instead.
218- Bundlers, like [Webpack](https://webpack.js.org/), are very popular as well.
219- [Typescript](typescriptlang.org) users need type definitions.
220- [Rollup](https://github.com/rollup/rollup) users make use of ECMAScript modules for tree-shaking.
221- Both [Ahead-of-time](#appendix-supporting-aot) and [Just-in-time](#appendix-supporting-it)
222- compilation should be supported.
223-
224- It's daunting to think of all the ways your library might be used and how to accommodate it,
225- but you don't need to have a "one-size-fits-all" library.
226-
227- You can configure `package.json` with more entry points besides [main](https://docs.npmjs.com/files/package.json#main).
228-
229- The **Quickstart Library** seed uses a similar set of entry points as Angular itself,
230- aimed at maximizing compatibility:
231-
232- - `main` (default): an ES5 [UMD](https://github.com/umdjs/umd) bundle that can be consumed anywhere.
233- - `module`: a flat ECMAScript module (FESM) bundle containing ES5 code.
234- - `es2015`: a FESM containing ES2015 bundle.
235- - `typings`: TypeScript and the AOT compiler will look at this entry for metadata.
236-
237- code-example( language ="json" ) .
238- "main": "./dist/angular-quickstart-lib.umd.js",
239- "module": "./dist/angular-quickstart-lib.es5.js",
240- "es2015": "./dist/angular-quickstart-lib.js",
241- "typings": "./dist/angular-quickstart-lib.d.ts",
242-
243- :marked
244- There is also a minified UMD bundle (`angular-quickstart-lib.umd.min.js`) for smaller payloads
245- in Plunkers and script tags.
246-
247-
248- .l-sub-section
249- :marked
250- A flat ECMAScript module (FESM) is a bundled ECMAScript module where all imports were followed
251- copied onto the same file file.
252- It always contains ES module import/export statements but can have different levels of ES code
253- inside.
254-
255-
256260.l-main-section
257261:marked
258262 ## The build step
@@ -262,7 +266,7 @@ code-example(language="json").
262266
263267 All the logic for creating the build can be found in `./build.js`. It consists of roughly 4 steps:
264268
265- - Compile with `ngc` for ES5 and ES2015.
269+ - Compile with the Ahead of Time Compiler (AOT compiler or `ngc`) for ES5 and ES2015.
266270 - Inline html and css inside the generated JavaScript files.
267271 - Copy typings, metatada, html and css.
268272 - Create each bundle using Rollup.
@@ -361,7 +365,7 @@ code-example(language="json").
361365
362366 Only code written in TypeScript can be AOT compiled.
363367
364- Before publishing the library must first be compiled using the `ngc` compiler .
368+ Before publishing the library must first be compiled using the Ahead of Time compiler ( `ngc`) .
365369 `ngc` extends the `tsc` compiler by adding extensions to support AOT compilation in addition to
366370 regular TypeScript compilation.
367371
0 commit comments