@@ -26,12 +26,12 @@ include ../_util-fns
26
26
:marked
27
27
## Table of contents
28
28
29
+ [Library package format](#library-package-format)
30
+
29
31
[Setup a local development environment](#setup-a-local-development-environment)
30
32
31
33
[What's in the QuickStart Library seed?](#what-s-in-the-quickstart-library-seed-)
32
34
33
- [Entry points](#entry-points)
34
-
35
35
[The build step](#the-build-step)
36
36
37
37
[Testing libraries](#testing-libraries)
@@ -44,14 +44,64 @@ include ../_util-fns
44
44
45
45
[Appendix: Dependency Management](#appendix-dependency-management)
46
46
47
- TODO finish this
48
47
49
48
.l-main-section
50
49
: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
52
98
53
99
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.
55
105
56
106
:marked
57
107
Make sure you have at least Node 6.9 and NPM 3.0 installed.
@@ -207,52 +257,6 @@ table(width="100%")
207
257
The library's main `NgModule`, `LibModule`.
208
258
209
259
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
-
256
260
.l-main-section
257
261
:marked
258
262
## The build step
@@ -262,7 +266,7 @@ code-example(language="json").
262
266
263
267
All the logic for creating the build can be found in `./build.js`. It consists of roughly 4 steps:
264
268
265
- - Compile with `ngc` for ES5 and ES2015.
269
+ - Compile with the Ahead of Time Compiler (AOT compiler or `ngc`) for ES5 and ES2015.
266
270
- Inline html and css inside the generated JavaScript files.
267
271
- Copy typings, metatada, html and css.
268
272
- Create each bundle using Rollup.
@@ -361,7 +365,7 @@ code-example(language="json").
361
365
362
366
Only code written in TypeScript can be AOT compiled.
363
367
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`) .
365
369
`ngc` extends the `tsc` compiler by adding extensions to support AOT compilation in addition to
366
370
regular TypeScript compilation.
367
371
0 commit comments