Skip to content

Commit

Permalink
feat(web): use babel-loader instead of ts-loader for web build builder
Browse files Browse the repository at this point in the history
- removes the `differentialLoading` build option
- differential loading is always enabled for prod builds

BEFORE (without ESM):

Benchmark #1: nx build demo --prod
  Time (mean ± σ):     13.834 s ±  1.731 s    [User: 11.817 s, System: 1.352 s]
  Range (min … max):   11.947 s … 16.015 s    10 runs

AFTER (with ESM):

Benchmark #1: nx build demo --prod
  Time (mean ± σ):     18.711 s ±  1.310 s    [User: 12.172 s, System: 1.394 s]
  Range (min … max):   17.232 s … 20.770 s    10 runs
  • Loading branch information
jaysoo authored and vsavkin committed Sep 5, 2019
1 parent 4f5e320 commit 811c50b
Show file tree
Hide file tree
Showing 40 changed files with 635 additions and 567 deletions.
8 changes: 0 additions & 8 deletions docs/angular/api-react/schematics/application.md
Original file line number Diff line number Diff line change
Expand Up @@ -48,14 +48,6 @@ ng g app myapp --routing

## Options

### babel

Default: `false`

Type: `boolean`

Use Babel and TypeScript preset instead of ts-loader (Useful if you need Babel plugins)

### classComponent

Alias(es): C
Expand Down
8 changes: 0 additions & 8 deletions docs/angular/api-web/builders/build.md
Original file line number Diff line number Diff line change
Expand Up @@ -40,14 +40,6 @@ Type: `string`

URL where the application will be deployed.

### differentialLoading

Default: `true`

Type: `boolean`

Enable differential loading for es5 browsers

### es2015Polyfills

Type: `string`
Expand Down
8 changes: 0 additions & 8 deletions docs/react/api-react/schematics/application.md
Original file line number Diff line number Diff line change
Expand Up @@ -48,14 +48,6 @@ nx g app myapp --routing

## Options

### babel

Default: `false`

Type: `boolean`

Use Babel and TypeScript preset instead of ts-loader (Useful if you need Babel plugins)

### classComponent

Alias(es): C
Expand Down
8 changes: 0 additions & 8 deletions docs/react/api-web/builders/build.md
Original file line number Diff line number Diff line change
Expand Up @@ -41,14 +41,6 @@ Type: `string`

URL where the application will be deployed.

### differentialLoading

Default: `true`

Type: `boolean`

Enable differential loading for es5 browsers

### es2015Polyfills

Type: `string`
Expand Down
8 changes: 0 additions & 8 deletions docs/web/api-react/schematics/application.md
Original file line number Diff line number Diff line change
Expand Up @@ -48,14 +48,6 @@ nx g app myapp --routing

## Options

### babel

Default: `false`

Type: `boolean`

Use Babel and TypeScript preset instead of ts-loader (Useful if you need Babel plugins)

### classComponent

Alias(es): C
Expand Down
8 changes: 0 additions & 8 deletions docs/web/api-web/builders/build.md
Original file line number Diff line number Diff line change
Expand Up @@ -41,14 +41,6 @@ Type: `string`

URL where the application will be deployed.

### differentialLoading

Default: `true`

Type: `boolean`

Enable differential loading for es5 browsers

### es2015Polyfills

Type: `string`
Expand Down
16 changes: 7 additions & 9 deletions e2e/delegate-to-cli.test.ts
Original file line number Diff line number Diff line change
Expand Up @@ -13,18 +13,16 @@ forEachCli(() => {

const appName = uniq('app');
runCommand(`npm run nx -- g @nrwl/web:app ${appName}`);
runCommand(`npm run nx -- build ${appName}`);
runCommand(`npm run nx -- build ${appName} --prod --outputHashing none`);

checkFilesExist(
`dist/apps/${appName}/index.html`,
`dist/apps/${appName}/polyfills-es2015.js`,
`dist/apps/${appName}/runtime-es2015.js`,
`dist/apps/${appName}/main-es2015.js`,
`dist/apps/${appName}/styles-es2015.js`,
`dist/apps/${appName}/polyfills-es5.js`,
`dist/apps/${appName}/runtime-es5.js`,
`dist/apps/${appName}/main-es5.js`,
`dist/apps/${appName}/styles-es5.js`
`dist/apps/${appName}/runtime.js`,
`dist/apps/${appName}/polyfills.esm.js`,
`dist/apps/${appName}/main.esm.js`,
`dist/apps/${appName}/polyfills.es5.js`,
`dist/apps/${appName}/main.es5.js`,
`dist/apps/${appName}/styles.css`
);
}, 120000);
});
Expand Down
16 changes: 9 additions & 7 deletions e2e/react.test.ts
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ forEachCli(currentCLIName => {
const libName = uniq('lib');

runCLI(
`generate @nrwl/react:app ${appName} --no-interactive --babel --linter=${linter}`
`generate @nrwl/react:app ${appName} --no-interactive --linter=${linter}`
);
runCLI(`generate @nrwl/react:lib ${libName} --no-interactive`);

Expand All @@ -42,7 +42,7 @@ forEachCli(currentCLIName => {
const appName = uniq('app');

runCLI(
`generate @nrwl/react:app ${appName} --routing --no-interactive --babel --linter=${linter}`
`generate @nrwl/react:app ${appName} --routing --no-interactive --linter=${linter}`
);

await testGeneratedApp(appName, { checkStyles: true, checkLinter: true });
Expand All @@ -53,7 +53,7 @@ forEachCli(currentCLIName => {
const appName = uniq('app');

runCLI(
`generate @nrwl/react:app ${appName} --style styled-components --no-interactive --babel --linter=${linter}`
`generate @nrwl/react:app ${appName} --style styled-components --no-interactive --linter=${linter}`
);

await testGeneratedApp(appName, {
Expand All @@ -68,7 +68,7 @@ forEachCli(currentCLIName => {
const libName = uniq('lib');

runCLI(
`generate @nrwl/react:app ${appName} --no-interactive --babel --linter=${linter}`
`generate @nrwl/react:app ${appName} --no-interactive --linter=${linter}`
);
runCLI(`generate @nrwl/react:lib ${libName} --no-interactive`);

Expand Down Expand Up @@ -129,14 +129,16 @@ forEachCli(currentCLIName => {
}
checkFilesExist(...filesToCheck);
expect(readFile(`dist/apps/${appName}/main.js`)).toContain(
'var App = function App() {'
'var App = () => {'
);
runCLI(`build ${appName} --prod --output-hashing none`);
filesToCheck = [
`dist/apps/${appName}/index.html`,
`dist/apps/${appName}/polyfills.js`,
`dist/apps/${appName}/runtime.js`,
`dist/apps/${appName}/main.js`
`dist/apps/${appName}/polyfills.esm.js`,
`dist/apps/${appName}/main.esm.js`,
`dist/apps/${appName}/polyfills.es5.js`,
`dist/apps/${appName}/main.es5.js`
];
if (opts.checkStyles) {
filesToCheck.push(`dist/apps/${appName}/styles.css`);
Expand Down
1 change: 1 addition & 0 deletions e2e/utils.ts
Original file line number Diff line number Diff line change
Expand Up @@ -206,6 +206,7 @@ export function copyMissingPackages(): void {
'@babel/preset-env',
'@babel/preset-react',
'@babel/preset-typescript',
'@babel/plugin-proposal-class-properties',
'@babel/plugin-proposal-decorators',
'babel-loader',
'babel-plugin-macros',
Expand Down
28 changes: 10 additions & 18 deletions e2e/web.test.ts
Original file line number Diff line number Diff line change
Expand Up @@ -26,30 +26,22 @@ forEachCli(currentCLIName => {
runCLI(`build ${appName}`);
checkFilesExist(
`dist/apps/${appName}/index.html`,
`dist/apps/${appName}/polyfills-es2015.js`,
`dist/apps/${appName}/runtime-es2015.js`,
`dist/apps/${appName}/main-es2015.js`,
`dist/apps/${appName}/styles-es2015.js`,
`dist/apps/${appName}/polyfills-es5.js`,
`dist/apps/${appName}/runtime-es5.js`,
`dist/apps/${appName}/main-es5.js`,
`dist/apps/${appName}/styles-es5.js`
`dist/apps/${appName}/runtime.js`,
`dist/apps/${appName}/polyfills.js`,
`dist/apps/${appName}/main.js`,
`dist/apps/${appName}/styles.js`
);
expect(readFile(`dist/apps/${appName}/main-es5.js`)).toContain(
'var AppElement = /** @class */ (function (_super) {'
);
expect(readFile(`dist/apps/${appName}/main-es2015.js`)).toContain(
expect(readFile(`dist/apps/${appName}/main.js`)).toContain(
'class AppElement'
);
runCLI(`build ${appName} --prod --output-hashing none`);
checkFilesExist(
`dist/apps/${appName}/index.html`,
`dist/apps/${appName}/polyfills-es2015.js`,
`dist/apps/${appName}/runtime-es2015.js`,
`dist/apps/${appName}/main-es2015.js`,
`dist/apps/${appName}/polyfills-es5.js`,
`dist/apps/${appName}/runtime-es5.js`,
`dist/apps/${appName}/main-es5.js`,
`dist/apps/${appName}/runtime.js`,
`dist/apps/${appName}/polyfills.esm.js`,
`dist/apps/${appName}/main.esm.js`,
`dist/apps/${appName}/polyfills.es5.js`,
`dist/apps/${appName}/main.es5.js`,
`dist/apps/${appName}/styles.css`
);
expect(readFile(`dist/apps/${appName}/index.html`)).toContain(
Expand Down
3 changes: 2 additions & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,7 @@
"@angular/router": "^8.0.0",
"@angular/upgrade": "^8.0.0",
"@babel/core": "7.5.5",
"@babel/plugin-proposal-class-properties": "7.5.5",
"@babel/plugin-proposal-decorators": "7.4.4",
"@babel/preset-env": "7.5.5",
"@babel/preset-react": "7.0.0",
Expand Down Expand Up @@ -141,7 +142,7 @@
"tslint": "5.11.0",
"typescript": "~3.4.5",
"viz.js": "^1.8.1",
"webpack": "4.30.0",
"webpack": "4.39.3",
"webpack-dev-server": "3.1.14",
"webpack-node-externals": "^1.7.2",
"yargs": "^11.0.0",
Expand Down
8 changes: 4 additions & 4 deletions packages/node/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -39,14 +39,14 @@
"@angular-devkit/schematics": "8.1.1",
"@angular-devkit/build-webpack": "0.801.1",
"circular-dependency-plugin": "^5.0.2",
"copy-webpack-plugin": "4.6.0",
"fork-ts-checker-webpack-plugin": "0.4.9",
"copy-webpack-plugin": "5.0.3",
"fork-ts-checker-webpack-plugin": "0.4.15",
"license-webpack-plugin": "^1.4.0",
"source-map-support": "0.5.12",
"tree-kill": "1.2.1",
"ts-loader": "5.3.1",
"ts-loader": "5.4.5",
"tsconfig-paths-webpack-plugin": "3.2.0",
"webpack": "4.29.0",
"webpack": "4.39.3",
"webpack-dev-server": "3.1.14",
"webpack-node-externals": "1.7.2"
}
Expand Down
5 changes: 5 additions & 0 deletions packages/react/migrations.json
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,11 @@
"version": "8.3.0-beta.1",
"description": "Update React libraries",
"factory": "./src/migrations/update-8-3-0/update-8-3-0"
},
"update-workspace-8.5.0": {
"version": "8.5.0-beta.1",
"description": "Update React workspace",
"factory": "./src/migrations/update-8-5-0/update-workspace-8-5-0"
}
}
}
24 changes: 23 additions & 1 deletion packages/react/plugins/babel.ts
Original file line number Diff line number Diff line change
@@ -1 +1,23 @@
module.exports = require('../src/plugins/babel').getBabelWebpackConfig;
import { Configuration } from 'webpack';

// Adds react preset for JSX support
function getBabelWebpackConfig(config: Configuration) {
const babelRuleOptions = config.module.rules.find(
r => r.loader === 'babel-loader'
).options as any;

const idx = babelRuleOptions.presets.findIndex(
p => Array.isArray(p) && p[0] === '@babel/preset-env'
);

babelRuleOptions.presets.splice(idx, 0, [
'@babel/preset-react',
{
useBuiltIns: true
}
]);

return config;
}

module.exports = getBabelWebpackConfig;
Original file line number Diff line number Diff line change
@@ -0,0 +1,57 @@
import { Tree } from '@angular-devkit/schematics';
import { SchematicTestRunner } from '@angular-devkit/schematics/testing';
import {
updateJsonInTree,
readJsonInTree,
updateWorkspaceInTree,
readWorkspace,
getWorkspacePath
} from '@nrwl/workspace';

import * as path from 'path';
import { stripIndents } from '@angular-devkit/core/src/utils/literals';

describe('Update 8-5-0', () => {
let tree: Tree;
let schematicRunner: SchematicTestRunner;

beforeEach(async () => {
tree = Tree.empty();
schematicRunner = new SchematicTestRunner(
'@nrwl/react',
path.join(__dirname, '../../../migrations.json')
);
});

it(`should remove babel schematic defaults`, async () => {
tree.create(
'workspace.json',
JSON.stringify({
schematics: {
'@nrwl/react': {
application: {
babel: true
}
},
'@nrwl/react:application': {
babel: true
}
}
})
);

tree = await schematicRunner
.runSchematicAsync('update-workspace-8.5.0', {}, tree)
.toPromise();

const config = readWorkspace(tree);
expect(config).toEqual({
schematics: {
'@nrwl/react': {
application: {}
},
'@nrwl/react:application': {}
}
});
});
});
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
import { Rule } from '@angular-devkit/schematics';
import { updateWorkspaceInTree } from '@nrwl/workspace';

export default function update(): Rule {
return updateWorkspaceInTree(config => {
const a = [];
const b = [];
Object.keys(config.schematics).forEach(name => {
if (name === '@nrwl/react' && config.schematics[name].application) {
a.push(config.schematics[name]);
}
if (name === '@nrwl/react:application') {
b.push(config.schematics[name]);
}
});
a.forEach(x => {
delete x.application.babel;
});
b.forEach(x => {
delete x.babel;
});
return config;
});
}
Loading

0 comments on commit 811c50b

Please sign in to comment.