Skip to content
This repository was archived by the owner on Dec 4, 2017. It is now read-only.

Commit 059222e

Browse files
committed
emphasize package format over starter
1 parent 7340417 commit 059222e

File tree

1 file changed

+57
-53
lines changed

1 file changed

+57
-53
lines changed

public/docs/ts/latest/cookbook/third-party-lib.jade

+57-53
Original file line numberDiff line numberDiff line change
@@ -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

Comments
 (0)