Skip to content
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

[core] Bundle UMD with rollup #11360

Merged
merged 2 commits into from
May 15, 2018
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
27 changes: 17 additions & 10 deletions .babelrc
Original file line number Diff line number Diff line change
@@ -1,11 +1,10 @@
{
"presets": ["./scripts/material-ui-babel-preset", "@babel/preset-stage-1", "@babel/preset-react"],
"presets": ["./scripts/material-ui-babel-preset", "@babel/preset-stage-1", "@babel/preset-react", "@babel/flow"],
"plugins": ["@babel/plugin-transform-object-assign"],
"env": {
"coverage": {
"plugins": [
"istanbul",
"@babel/plugin-transform-flow-strip-types",
[
"module-resolver",
{
Expand All @@ -19,8 +18,7 @@
]
},
"development": {
"sourceMaps": "both",
"plugins": ["@babel/plugin-transform-flow-strip-types"]
"sourceMaps": "both"
},
"docs-development": {
"presets": ["next/babel"],
Expand All @@ -38,8 +36,7 @@
"pages": "./pages"
}
}
],
"@babel/plugin-transform-flow-strip-types"
]
]
},
"docs-production": {
Expand All @@ -62,7 +59,6 @@
"transform-react-constant-elements",
"transform-dev-warning",
"@babel/transform-runtime",
"@babel/plugin-transform-flow-strip-types",
["react-remove-properties", { "properties": ["data-mui-test"] }],
["transform-react-remove-prop-types", { "mode": "remove" }]
]
Expand All @@ -75,7 +71,6 @@
"polyfill": false,
"useBuiltIns": true
}],
"@babel/plugin-transform-flow-strip-types",
["react-remove-properties", { "properties": ["data-mui-test"] }],
[
"transform-react-remove-prop-types",
Expand All @@ -91,7 +86,6 @@
"transform-react-constant-elements",
"transform-dev-warning",
"@babel/transform-runtime",
"@babel/plugin-transform-flow-strip-types",
["react-remove-properties", { "properties": ["data-mui-test"] }],
[
"transform-react-remove-prop-types",
Expand All @@ -102,10 +96,23 @@
],
"ignore": ["**/*.test*"]
},
"production-umd": {
"plugins": [
"transform-react-constant-elements",
"transform-dev-warning",
"@babel/transform-runtime",
["react-remove-properties", { "properties": ["data-mui-test"] }],
[
"transform-react-remove-prop-types",
{
"mode": "wrap"
}
]
]
},
"test": {
"sourceMaps": "both",
"plugins": [
"@babel/plugin-transform-flow-strip-types",
[
"module-resolver",
{
Expand Down
6 changes: 6 additions & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -143,6 +143,12 @@
"redux": "^4.0.0",
"redux-logger": "^3.0.6",
"rimraf": "^2.6.2",
"rollup": "^0.58.2",
"rollup-plugin-babel": "^4.0.0-beta.4",
"rollup-plugin-commonjs": "^9.1.3",
"rollup-plugin-node-resolve": "^3.3.0",
"rollup-plugin-size-snapshot": "^0.4.1",
"rollup-plugin-uglify": "^3.0.0",
"sinon": "^5.0.3",
"size-limit": "^0.18.0",
"typescript": "^2.6.1",
Expand Down
12 changes: 12 additions & 0 deletions packages/material-ui/.size-snapshot.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
{
"build/umd/material-ui.development.js": {
"bundled": 1060251,
"minified": 387201,
"gzipped": 98971
},
"build/umd/material-ui.production.min.js": {
"bundled": 891133,
"minified": 346152,
"gzipped": 89531
}
}
5 changes: 2 additions & 3 deletions packages/material-ui/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -24,10 +24,9 @@
"build:es2015": "cross-env NODE_ENV=production babel ./src --out-dir ./build --ignore *.test.js",
"build:es2015modules": "cross-env NODE_ENV=production BABEL_ENV=modules babel ./src/index.js --out-file ./build/index.es.js",
"build:es": "cross-env NODE_ENV=production BABEL_ENV=es babel ./src --out-dir ./build/es --ignore *.test.js",
"build:umd:dev": "webpack --config scripts/umd.webpack.config.js",
"build:umd:prod": "cross-env NODE_ENV=production webpack --config scripts/umd.webpack.config.js",
"build:umd": "cross-env NODE_ENV=production BABEL_ENV=production-umd rollup -c scripts/rollup.config.js",
"build:copy-files": "babel-node ./scripts/copy-files.js",
"build": "yarn build:es2015 && yarn build:es2015modules && yarn build:es && yarn build:umd:dev && yarn build:umd:prod && yarn build:copy-files",
"build": "yarn build:es2015 && yarn build:es2015modules && yarn build:es && yarn build:umd && yarn build:copy-files",
"release": "yarn build && npm publish build"
},
"peerDependencies": {
Expand Down
54 changes: 54 additions & 0 deletions packages/material-ui/scripts/rollup.config.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,54 @@
import nodeResolve from 'rollup-plugin-node-resolve';
import commonjs from 'rollup-plugin-commonjs';
import babel from 'rollup-plugin-babel';
import replace from 'rollup-plugin-replace';
import uglify from 'rollup-plugin-uglify';
import { sizeSnapshot } from 'rollup-plugin-size-snapshot';
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We are already using https://github.com/ai/size-limit. I believe it's answering the same problem. Shouldn't we use a single tool?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

size limit creates limits. My tool is about showing different sizes.

  1. size of bundle processed with bundler
  2. size of bundle loader with browser
  3. size of bundle parsed with browser
  4. treeshaked size for esm bundles

For it's more important to see these values than moving limits over and over again.

Copy link
Member

@oliviertassinari oliviertassinari May 15, 2018

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Does it have a mode where it only outputs in the console and doesn't write in the filesystem? I'm wondering about constantly having to commit the snapshot.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Isn't it the point to show users these numbers?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I figured out that I can live with that 👍


const input = './src/index.js';

const name = 'material-ui';

const globals = {
react: 'React',
'react-dom': 'ReactDOM',
};

const getBabelOptions = () => ({
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Something is off. Some babel plugins declared in .babelrc aren't applied. For instance, we still have the data-mui-test properties.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah, current babelrc is a mess to be honest. It's better to specify targets in browserlist file and completely separate environments with only NODE_ENV.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It seems NODE_ENV=production isn't taken into account by rollup-babel. But I could be wrong.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Its done by rollup plugin replace.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

That's why sizes of bundles are different

exclude: /node_modules/,
// We are using @babel/plugin-transform-runtime
runtimeHelpers: true,
});

const getCommonjsOptions = () => ({
include: /node_modules/,
});

export default [
{
input,
output: { file: `build/umd/${name}.development.js`, format: 'umd', name, globals },
external: Object.keys(globals),
plugins: [
nodeResolve(),
babel(getBabelOptions()),
commonjs(getCommonjsOptions()),
sizeSnapshot(),
replace({ 'process.env.NODE_ENV': JSON.stringify('development') }),
],
},

{
input,
output: { file: `build/umd/${name}.production.min.js`, format: 'umd', name, globals },
external: Object.keys(globals),
plugins: [
nodeResolve(),
babel(getBabelOptions()),
commonjs(getCommonjsOptions()),
replace({ 'process.env.NODE_ENV': JSON.stringify('production') }),
sizeSnapshot(),
uglify(),
],
},
];
75 changes: 0 additions & 75 deletions packages/material-ui/scripts/umd.webpack.config.js

This file was deleted.

2 changes: 1 addition & 1 deletion scripts/material-ui-babel-preset.js
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ if (ENV === 'es') {
safari: 10,
node: '6.11',
},
modules: ENV === 'modules' ? false : 'commonjs',
modules: ['modules', 'production-umd'].includes(ENV) ? false : 'commonjs',
},
],
],
Expand Down
Loading