-
Notifications
You must be signed in to change notification settings - Fork 6.7k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
build: ship esm bundle #3443
Merged
Merged
build: ship esm bundle #3443
Changes from all commits
Commits
Show all changes
2 commits
Select commit
Hold shift + click to select a range
File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,139 +1,150 @@ | ||
| import {task, watch, src, dest} from 'gulp'; | ||
| import {ScriptTarget, ModuleKind} from 'typescript'; | ||
| import * as path from 'path'; | ||
|
|
||
| import { | ||
| DIST_COMPONENTS_ROOT, PROJECT_ROOT, COMPONENTS_DIR, HTML_MINIFIER_OPTIONS, LICENSE_BANNER | ||
| } from '../constants'; | ||
| import { | ||
| sassBuildTask, tsBuildTask, execNodeTask, copyTask, sequenceTask, | ||
| sassBuildTask, tsBuildTask, execNodeTask, sequenceTask, | ||
| triggerLivereload | ||
| } from '../util/task_helpers'; | ||
|
|
||
| // No typings for these. | ||
| // There are no type definitions available for these imports. | ||
| const inlineResources = require('../../../scripts/release/inline-resources'); | ||
| const gulpRollup = require('gulp-better-rollup'); | ||
| const gulpMinifyCss = require('gulp-clean-css'); | ||
| const gulpMinifyHtml = require('gulp-htmlmin'); | ||
| const gulpIf = require('gulp-if'); | ||
|
|
||
| /** Path to tsconfig file for the components. */ | ||
| const tsconfigPath = path.join(COMPONENTS_DIR, 'tsconfig.json'); | ||
|
|
||
| // NOTE: there are two build "modes" in this file, based on which tsconfig is used. | ||
| // When `tsconfig.json` is used, we are outputting ES6 modules and a UMD bundle. This is used | ||
| // for serving and for release. | ||
| // | ||
| // When `tsconfig-spec.json` is used, we are outputting CommonJS modules. This is used | ||
| // for unit tests (karma). | ||
|
|
||
| /** Path to the tsconfig used for ESM output. */ | ||
| const tsconfigPath = path.relative(PROJECT_ROOT, path.join(COMPONENTS_DIR, 'tsconfig-srcs.json')); | ||
| /** Asset files to be added to the components output. */ | ||
| const assetFiles = [ | ||
| path.join(COMPONENTS_DIR, '**/*.html'), | ||
| path.join(COMPONENTS_DIR, 'package.json'), | ||
| path.join(PROJECT_ROOT, 'README.md'), | ||
| path.join(PROJECT_ROOT, 'LICENSE'), | ||
| ]; | ||
|
|
||
| /** Builds components to UMD bundle. */ | ||
| task('build:components', [':build:components:bundle:umd']); | ||
|
|
||
| /** [Watch task] Rebuilds (ESM output) whenever ts, scss, or html sources change. */ | ||
| task(':watch:components', () => { | ||
| watch(path.join(COMPONENTS_DIR, '**/*.ts'), ['build:components', triggerLivereload]); | ||
| watch(path.join(COMPONENTS_DIR, '**/*.scss'), ['build:components', triggerLivereload]); | ||
| watch(path.join(COMPONENTS_DIR, '**/*.html'), ['build:components', triggerLivereload]); | ||
| }); | ||
|
|
||
| /** Builds components for Angular Material releases */ | ||
| task(':build:components:release', sequenceTask( | ||
| ':build:components:bundle:umd', | ||
| ':build:components:bundle:esm', | ||
| ':build:components:ngc' | ||
| )); | ||
|
|
||
| /** Builds component typescript only (ESM output). */ | ||
| task(':build:components:ts', tsBuildTask(path.join(COMPONENTS_DIR, 'tsconfig-srcs.json'))); | ||
| /** Builds components typescript in ES5, ES6 target. For specs Karma needs CJS output. */ | ||
| task(':build:components:ts:es5', tsBuildTask(tsconfigPath, { target: ScriptTarget.ES5 })); | ||
| task(':build:components:ts:es6', tsBuildTask(tsconfigPath, { target: ScriptTarget.ES6 })); | ||
| task(':build:components:ts:spec', tsBuildTask(tsconfigPath, { | ||
| target: ScriptTarget.ES5, module: ModuleKind.CommonJS | ||
| })); | ||
|
|
||
| /** Builds components typescript for tests (CJS output). */ | ||
| task(':build:components:spec', tsBuildTask(COMPONENTS_DIR)); | ||
| /** Tasks to create a UMD or ES bundle */ | ||
| task(':build:components:bundle:umd', sequenceTask( | ||
| ':build:components:ts:es5', ':build:components:inline', ':build:components:rollup:umd' | ||
| )); | ||
|
|
||
| /** Copies assets (html, markdown) to build output. */ | ||
| task(':build:components:assets', copyTask([ | ||
| path.join(COMPONENTS_DIR, '**/*.!(ts|spec.ts)'), | ||
| path.join(PROJECT_ROOT, 'README.md'), | ||
| path.join(PROJECT_ROOT, 'LICENSE'), | ||
| ], DIST_COMPONENTS_ROOT)); | ||
| task(':build:components:bundle:esm', sequenceTask( | ||
| ':build:components:ts:es6', ':build:components:inline', ':build:components:rollup:esm' | ||
| )); | ||
|
|
||
| /** Minifies the HTML and CSS assets in the distribution folder. */ | ||
| task(':build:components:assets:minify', () => { | ||
| return src('**/*.+(html|css)', { cwd: DIST_COMPONENTS_ROOT}) | ||
| .pipe(gulpIf(/.css$/, gulpMinifyCss(), gulpMinifyHtml(HTML_MINIFIER_OPTIONS))) | ||
| /** Copies all component assets to the build output. */ | ||
| task(':build:components:assets', () => { | ||
| return src(assetFiles) | ||
| .pipe(gulpIf(/.html$/, gulpMinifyHtml(HTML_MINIFIER_OPTIONS))) | ||
| .pipe(dest(DIST_COMPONENTS_ROOT)); | ||
| }); | ||
|
|
||
| /** Builds scss into css. */ | ||
| task(':build:components:scss', sassBuildTask(DIST_COMPONENTS_ROOT, COMPONENTS_DIR)); | ||
|
|
||
| /** Builds the UMD bundle for all of Angular Material. */ | ||
| task(':build:components:rollup', () => { | ||
| const globals: {[name: string]: string} = { | ||
| // Angular dependencies | ||
| '@angular/core': 'ng.core', | ||
| '@angular/common': 'ng.common', | ||
| '@angular/forms': 'ng.forms', | ||
| '@angular/http': 'ng.http', | ||
| '@angular/platform-browser': 'ng.platformBrowser', | ||
| '@angular/platform-browser-dynamic': 'ng.platformBrowserDynamic', | ||
|
|
||
| // Rxjs dependencies | ||
| 'rxjs/Subject': 'Rx', | ||
| 'rxjs/add/observable/fromEvent': 'Rx.Observable', | ||
| 'rxjs/add/observable/forkJoin': 'Rx.Observable', | ||
| 'rxjs/add/observable/of': 'Rx.Observable', | ||
| 'rxjs/add/observable/merge': 'Rx.Observable', | ||
| 'rxjs/add/observable/throw': 'Rx.Observable', | ||
| 'rxjs/add/operator/auditTime': 'Rx.Observable.prototype', | ||
| 'rxjs/add/operator/toPromise': 'Rx.Observable.prototype', | ||
| 'rxjs/add/operator/map': 'Rx.Observable.prototype', | ||
| 'rxjs/add/operator/filter': 'Rx.Observable.prototype', | ||
| 'rxjs/add/operator/do': 'Rx.Observable.prototype', | ||
| 'rxjs/add/operator/share': 'Rx.Observable.prototype', | ||
| 'rxjs/add/operator/finally': 'Rx.Observable.prototype', | ||
| 'rxjs/add/operator/catch': 'Rx.Observable.prototype', | ||
| 'rxjs/add/operator/first': 'Rx.Observable.prototype', | ||
| 'rxjs/add/operator/startWith': 'Rx.Observable.prototype', | ||
| 'rxjs/add/operator/switchMap': 'Rx.Observable.prototype', | ||
| 'rxjs/Observable': 'Rx' | ||
| }; | ||
|
|
||
| const rollupOptions = { | ||
| context: 'this', | ||
| external: Object.keys(globals) | ||
| }; | ||
|
|
||
| const rollupGenerateOptions = { | ||
| // Keep the moduleId empty because we don't want to force developers to a specific moduleId. | ||
| moduleId: '', | ||
| moduleName: 'ng.material', | ||
| format: 'umd', | ||
| globals, | ||
| banner: LICENSE_BANNER, | ||
| dest: 'material.umd.js' | ||
| }; | ||
| /** Compiles the components SCSS into minified CSS. */ | ||
| task(':build:components:scss', sassBuildTask(DIST_COMPONENTS_ROOT, COMPONENTS_DIR, true)); | ||
|
|
||
| /** Builds a ES6 bundle for all components. */ | ||
| task(':build:components:rollup:esm', () => { | ||
| return src(path.join(DIST_COMPONENTS_ROOT, 'index.js')) | ||
| .pipe(gulpRollup(rollupOptions, rollupGenerateOptions)) | ||
| .pipe(createRollupBundle('es', 'material.js')) | ||
| .pipe(dest(path.join(DIST_COMPONENTS_ROOT, 'bundles'))); | ||
| }); | ||
|
|
||
| /** Builds components with resources (html, css) inlined into the built JS (ESM output). */ | ||
| /** Builds a UMD bundle (ES5) for all components. */ | ||
| task(':build:components:rollup:umd', () => { | ||
| return src(path.join(DIST_COMPONENTS_ROOT, 'index.js')) | ||
| .pipe(createRollupBundle('umd', 'material.umd.js')) | ||
| .pipe(dest(path.join(DIST_COMPONENTS_ROOT, 'bundles'))); | ||
| }); | ||
|
|
||
|
|
||
| /** Builds components with resources (html, css) inlined into the built JS. */ | ||
| task(':build:components:inline', sequenceTask( | ||
| [':build:components:ts', ':build:components:scss', ':build:components:assets'], | ||
| [':build:components:scss', ':build:components:assets'], | ||
| ':inline-resources', | ||
| )); | ||
|
|
||
| /** Builds components with minified HTML and CSS inlined into the built JS. */ | ||
| task(':build:components:inline:release', sequenceTask( | ||
| [':build:components:ts', ':build:components:scss', ':build:components:assets'], | ||
| ':build:components:assets:minify', | ||
| ':inline-resources' | ||
| )); | ||
|
|
||
| /** Inlines resources (html, css) into the JS output (for either ESM or CJS output). */ | ||
| /** Inlines resources (html, css) into the JS output. */ | ||
| task(':inline-resources', () => inlineResources(DIST_COMPONENTS_ROOT)); | ||
|
|
||
| /** Builds components to ESM output and UMD bundle. */ | ||
| task('build:components', sequenceTask(':build:components:inline', ':build:components:rollup')); | ||
| task('build:components:release', sequenceTask( | ||
| ':build:components:inline:release', ':build:components:rollup' | ||
| )); | ||
|
|
||
| /** Generates metadata.json files for all of the components. */ | ||
| task(':build:components:ngc', ['build:components:release'], execNodeTask( | ||
| task(':build:components:ngc', ['build:components'], execNodeTask( | ||
| '@angular/compiler-cli', 'ngc', ['-p', tsconfigPath] | ||
| )); | ||
|
|
||
| /** [Watch task] Rebuilds (ESM output) whenever ts, scss, or html sources change. */ | ||
| task(':watch:components', () => { | ||
| watch(path.join(COMPONENTS_DIR, '**/*.ts'), ['build:components', triggerLivereload]); | ||
| watch(path.join(COMPONENTS_DIR, '**/*.scss'), ['build:components', triggerLivereload]); | ||
| watch(path.join(COMPONENTS_DIR, '**/*.html'), ['build:components', triggerLivereload]); | ||
| }); | ||
|
|
||
| const ROLLUP_GLOBALS = { | ||
| // Angular dependencies | ||
| '@angular/core': 'ng.core', | ||
| '@angular/common': 'ng.common', | ||
| '@angular/forms': 'ng.forms', | ||
| '@angular/http': 'ng.http', | ||
| '@angular/platform-browser': 'ng.platformBrowser', | ||
| '@angular/platform-browser-dynamic': 'ng.platformBrowserDynamic', | ||
|
|
||
| // Rxjs dependencies | ||
| 'rxjs/Subject': 'Rx', | ||
| 'rxjs/add/observable/fromEvent': 'Rx.Observable', | ||
| 'rxjs/add/observable/forkJoin': 'Rx.Observable', | ||
| 'rxjs/add/observable/of': 'Rx.Observable', | ||
| 'rxjs/add/observable/merge': 'Rx.Observable', | ||
| 'rxjs/add/observable/throw': 'Rx.Observable', | ||
| 'rxjs/add/operator/auditTime': 'Rx.Observable.prototype', | ||
| 'rxjs/add/operator/toPromise': 'Rx.Observable.prototype', | ||
| 'rxjs/add/operator/map': 'Rx.Observable.prototype', | ||
| 'rxjs/add/operator/filter': 'Rx.Observable.prototype', | ||
| 'rxjs/add/operator/do': 'Rx.Observable.prototype', | ||
| 'rxjs/add/operator/share': 'Rx.Observable.prototype', | ||
| 'rxjs/add/operator/finally': 'Rx.Observable.prototype', | ||
| 'rxjs/add/operator/catch': 'Rx.Observable.prototype', | ||
| 'rxjs/add/operator/first': 'Rx.Observable.prototype', | ||
| 'rxjs/add/operator/startWith': 'Rx.Observable.prototype', | ||
| 'rxjs/add/operator/switchMap': 'Rx.Observable.prototype', | ||
| 'rxjs/Observable': 'Rx' | ||
| }; | ||
|
|
||
| /** Creates a rollup bundles of the Material components.*/ | ||
| function createRollupBundle(format: string, outFile: string) { | ||
| let rollupOptions = { | ||
| context: 'this', | ||
| external: Object.keys(ROLLUP_GLOBALS) | ||
| }; | ||
|
|
||
| let rollupGenerateOptions = { | ||
| // Keep the moduleId empty because we don't want to force developers to a specific moduleId. | ||
| moduleId: '', | ||
| moduleName: 'ng.material', | ||
| banner: LICENSE_BANNER, | ||
| format: format, | ||
| dest: outFile, | ||
| globals: ROLLUP_GLOBALS, | ||
| }; | ||
|
|
||
| return gulpRollup(rollupOptions, rollupGenerateOptions); | ||
| } | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@devversion - Worth noting that
ES6as a ScriptTarget doesn't work for newer versions of TypeScript iirc.Options are
ES2015, ES2016, ES2017, ES3, ES5, ESNext & LatestThere was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Think that's all of them off the top of my head. It's applicable to the Angular4 compatibility work that @crisbeto is doing which bumps the TypeScript version.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Good point. This does fail on the Angular 4 branch.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Yeah, I noticed it as well, when I based the upcoming packaging PR on top of the v4 compatibility PR. Just FYI: This stuff will be removed with the new version of
tsc-wrappedanyways.