Skip to content
This repository was archived by the owner on Sep 30, 2020. It is now read-only.

feat: add option for building both a legacy and modern browser build #482

Draft
wants to merge 1 commit into
base: master
Choose a base branch
from
Draft

feat: add option for building both a legacy and modern browser build #482

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
12 changes: 11 additions & 1 deletion packages/liferay-npm-scripts/src/config/babel.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,17 @@
"plugins": ["transform-react-remove-prop-types"]
}
},
"presets": ["@babel/preset-env", "@babel/preset-react"],
"presets": [
[
"@babel/preset-env",
{
"targets": {
"browsers": ["defaults"]
}
}
],
"@babel/preset-react"
],
Copy link
Contributor

Choose a reason for hiding this comment

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

Could you tell if this makes any noticeable difference in our current DXP output?

Copy link
Member Author

Choose a reason for hiding this comment

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

Looking at just frontend-js-web

Current Bundle:
global.bundle.js 138 KiB

With differential build:
global.bundle.js 138 KiB
modern_global.bundle.js 129 KiB

So really only a 9kb difference...

I also tested with lighthouse and the results didn't seem noticeable. Although it could be because I am only testing the frontend-js-web module.

Copy link
Contributor

Choose a reason for hiding this comment

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

Well... that's a bit disappointing, isn't it? 😂

Copy link
Member Author

Choose a reason for hiding this comment

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

I did notice that for some reason the modern build isn't being minified, so that may have part to do with its size. Im looking into why it doesnt compress like the other build.

"plugins": [
"@babel/proposal-class-properties",
"@babel/proposal-export-namespace-from",
Expand Down
1 change: 1 addition & 0 deletions packages/liferay-npm-scripts/src/presets/standard/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,7 @@ module.exports = {
temp: 'build/npmscripts',
},
check: CHECK_AND_FIX_GLOBS,
dualBuild: false,
fix: CHECK_AND_FIX_GLOBS,
rules: {
'blacklisted-dependency-patterns': ['^liferay-npm-bundler-loader-.+'],
Expand Down
108 changes: 86 additions & 22 deletions packages/liferay-npm-scripts/src/utils/mergeBabelLoaderOptions.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,45 @@
const getMergedConfig = require('./getMergedConfig');

const BABEL_CONFIG = getMergedConfig('babel');
const NPM_SCRIPTS_CONFIG = getMergedConfig('npmscripts');

function updateWebpackRules(baseConfig, babelConfig) {
const clonedConfig = {...baseConfig};

clonedConfig.module = {
...clonedConfig.module,
rules: clonedConfig.module.rules.map((rule) => {
let {use} = rule;

if (!use) {
return rule;
}

if (!Array.isArray(use)) {
use = [use];
}

return {
...rule,
use: use.map((useEntry, i) => {
if (typeof useEntry === 'string') {
return {
loader: useEntry,
options: {...babelConfig},
};
} else {
return {
...useEntry,
options: {...babelConfig, ...useEntry.options},
};
}
}),
};
}),
};

return clonedConfig;
}

/**
* Modify all babel-loader options so that they include our defaults.
Expand All @@ -22,28 +61,53 @@ function mergeBabelLoaderOptions(webpackConfig) {
return webpackConfig;
}

webpackConfig.module.rules.forEach((rule) => {
let {use} = rule;

if (!use) {
return;
}

if (!Array.isArray(use)) {
use = [use];
}

use.forEach((useEntry, i) => {
if (typeof useEntry === 'string') {
use[i] = {
loader: useEntry,
options: {...BABEL_CONFIG},
};
} else {
use[i].options = {...BABEL_CONFIG, ...useEntry.options};
}
});
});
if (NPM_SCRIPTS_CONFIG.dualBuild) {
const modernBabelConfig = {
...BABEL_CONFIG,
presets: BABEL_CONFIG.presets.map((preset) => {
if (
preset === '@babel/preset-env' ||
preset[0] === '@babel/preset-env'
) {
return [
'@babel/preset-env',
{
targets: {
browsers: [
'Edge >= 16',
'Firefox >= 60',
'Chrome >= 61',
'Safari >= 11',
'Opera >= 48',
],
},
},
];
}

return preset;
}),
};

const baseConfig = updateWebpackRules(webpackConfig, BABEL_CONFIG);
const modernConfig = updateWebpackRules(
webpackConfig,
modernBabelConfig
);

webpackConfig = [
baseConfig,
{
...modernConfig,
output: {
...modernConfig.output,
filename: `${modernConfig.output.filename}_modern`,
},
},
];
} else {
webpackConfig = updateWebpackRules(webpackConfig, BABEL_CONFIG);
}

return webpackConfig;
}
Expand Down