From d90f1ee6aada7a90148e855b98ef8882616bb174 Mon Sep 17 00:00:00 2001 From: Jarda Snajdr Date: Thu, 19 Dec 2019 13:04:43 +0100 Subject: [PATCH] Build: move dependency transpilation config to calypso-build Alternative to #33492 which still uses the special Babel config for transpiling dependencies, but moves it to the `calypso-build` package. This PR, unlike #33492, doesn't attempt to transpile both app and `node_modules` code with the same Babel config. It keeps the separation and shouldn't cause any changes in output -- just moves code to a different location. Also, this approach is in line with what Create React App does. After merging this, `calypso-build` should start transpiling dependencies out of the box, without any configuration. Jetpack can just upgrade to the new version and be done. --- packages/calypso-build/CHANGELOG.md | 1 + .../calypso-build/babel/dependencies.js | 6 +-- packages/calypso-build/webpack.config.js | 8 ++- packages/calypso-build/webpack/util.js | 50 ++++++++++++++++- webpack.config.js | 53 +------------------ 5 files changed, 61 insertions(+), 57 deletions(-) rename babel.dependencies.config.js => packages/calypso-build/babel/dependencies.js (93%) diff --git a/packages/calypso-build/CHANGELOG.md b/packages/calypso-build/CHANGELOG.md index 156781d60bee88..1f507a8d9267c1 100644 --- a/packages/calypso-build/CHANGELOG.md +++ b/packages/calypso-build/CHANGELOG.md @@ -6,6 +6,7 @@ - Upgrade to [sass-loader@8](https://github.com/webpack-contrib/sass-loader/releases/tag/v8.0.0) - Add basic TypeScript config, `tsconfig.json` (for projects to extend). - Replace `copy-styles` with a generic `copy-assets` script to handle both styles and images. +- Add support for transpiling selected NPM dependencies from ESnext to the target's ES version. # 5.0.1 diff --git a/babel.dependencies.config.js b/packages/calypso-build/babel/dependencies.js similarity index 93% rename from babel.dependencies.config.js rename to packages/calypso-build/babel/dependencies.js index 535879e959d3a4..5994cb768962c3 100644 --- a/babel.dependencies.config.js +++ b/packages/calypso-build/babel/dependencies.js @@ -1,4 +1,4 @@ -const config = { +module.exports = () => ( { // see https://github.com/webpack/webpack/issues/4039#issuecomment-419284940 sourceType: 'unambiguous', presets: [ @@ -25,6 +25,4 @@ const config = { }, ], ], -}; - -module.exports = config; +} ); diff --git a/packages/calypso-build/webpack.config.js b/packages/calypso-build/webpack.config.js index 1b83a3f18afbf0..7349c81d2d2a71 100644 --- a/packages/calypso-build/webpack.config.js +++ b/packages/calypso-build/webpack.config.js @@ -20,7 +20,7 @@ const DependencyExtractionWebpackPlugin = require( '@wordpress/dependency-extrac /** * Internal dependencies */ -const { cssNameFromFilename } = require( './webpack/util' ); +const { cssNameFromFilename, shouldTranspileDependency } = require( './webpack/util' ); // const { workerCount } = require( './webpack.common' ); // todo: shard... /** @@ -112,6 +112,12 @@ function getWebpackConfig( presets, workerCount, } ), + TranspileConfig.loader( { + cacheDirectory: true, + include: shouldTranspileDependency, + presets: [ path.join( __dirname, 'babel', 'dependencies' ) ], + workerCount, + } ), SassConfig.loader( { postCssConfig: { path: postCssConfigPath } } ), FileConfig.loader(), ], diff --git a/packages/calypso-build/webpack/util.js b/packages/calypso-build/webpack/util.js index 09b48d8834e343..11927ecfbfb714 100644 --- a/packages/calypso-build/webpack/util.js +++ b/packages/calypso-build/webpack/util.js @@ -67,4 +67,52 @@ function IncrementalProgressPlugin() { return new webpack.ProgressPlugin( createProgressHandler() ); } -module.exports = { cssNameFromFilename, IncrementalProgressPlugin }; +const nodeModulesToTranspile = [ + // general form is /. + // The trailing slash makes sure we're not matching these as prefixes + // In some cases we do want prefix style matching (lodash. for lodash.assign) + '@automattic/calypso-polyfills/', + '@github/webauthn-json/', + 'acorn-jsx/', + 'chalk/', + 'd3-array/', + 'd3-scale/', + 'debug/', + 'escape-string-regexp/', + 'filesize/', + 'prismjs/', + 'react-spring/', + 'regenerate-unicode-properties/', + 'regexpu-core/', + 'striptags/', + 'unicode-match-property-ecmascript/', + 'unicode-match-property-value-ecmascript/', +]; + +/** + * Check to see if we should transpile certain files in node_modules + * + * @param {string} filepath the path of the file to check + * @returns {boolean} True if we should transpile it, false if not + * + * We had a thought to try to find the package.json and use the engines property + * to determine what we should transpile, but not all libraries set engines properly + * (see d3-array@2.0.0). Instead, we transpile libraries we know to have dropped Node 4 support + * are likely to remain so going forward. + */ +function shouldTranspileDependency( filepath ) { + // find the last index of node_modules and check from there + // we want /node_modules/a-package/node_modules/foo/index.js to only match foo, not a-package + const marker = '/node_modules/'; + const lastIndex = filepath.lastIndexOf( marker ); + if ( lastIndex === -1 ) { + // we're not in node_modules + return false; + } + + const checkFrom = lastIndex + marker.length; + + return nodeModulesToTranspile.some( modulePart => filepath.startsWith( modulePart, checkFrom ) ); +} + +module.exports = { cssNameFromFilename, IncrementalProgressPlugin, shouldTranspileDependency }; diff --git a/webpack.config.js b/webpack.config.js index 1f7780d0ba570c..3adb0efa61c996 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -25,6 +25,7 @@ const TranspileConfig = require( '@automattic/calypso-build/webpack/transpile' ) const { cssNameFromFilename, IncrementalProgressPlugin, + shouldTranspileDependency, } = require( '@automattic/calypso-build/webpack/util' ); const ExtensiveLodashReplacementPlugin = require( '@automattic/webpack-extensive-lodash-replacement-plugin' ); @@ -60,56 +61,6 @@ if ( ! process.env.BROWSERSLIST_ENV ) { process.env.BROWSERSLIST_ENV = browserslistEnv; } -const nodeModulesToTranspile = [ - // general form is /. - // The trailing slash makes sure we're not matching these as prefixes - // In some cases we do want prefix style matching (lodash. for lodash.assign) - '@automattic/calypso-polyfills/', - '@github/webauthn-json/', - 'acorn-jsx/', - 'chalk/', - 'd3-array/', - 'd3-scale/', - 'debug/', - 'escape-string-regexp/', - 'filesize/', - 'prismjs/', - 'react-spring/', - 'regenerate-unicode-properties/', - 'regexpu-core/', - 'striptags/', - 'unicode-match-property-ecmascript/', - 'unicode-match-property-value-ecmascript/', -]; -/** - * Check to see if we should transpile certain files in node_modules - * - * @param {string} filepath the path of the file to check - * @returns {boolean} True if we should transpile it, false if not - * - * We had a thought to try to find the package.json and use the engines property - * to determine what we should transpile, but not all libraries set engines properly - * (see d3-array@2.0.0). Instead, we transpile libraries we know to have dropped Node 4 support - * are likely to remain so going forward. - */ -function shouldTranspileDependency( filepath ) { - // find the last index of node_modules and check from there - // we want /node_modules/a-package/node_modules/foo/index.js to only match foo, not a-package - const marker = '/node_modules/'; - const lastIndex = filepath.lastIndexOf( marker ); - if ( lastIndex === -1 ) { - // we're not in node_modules - return false; - } - - const checkFrom = lastIndex + marker.length; - - return _.some( - nodeModulesToTranspile, - modulePart => filepath.substring( checkFrom, checkFrom + modulePart.length ) === modulePart - ); -} - let outputFilename = '[name].[chunkhash].min.js'; // prefer the chunkhash, which depends on the chunk, not the entire build let outputChunkFilename = '[name].[chunkhash].min.js'; // ditto @@ -194,7 +145,7 @@ const webpackConfig = { } ), TranspileConfig.loader( { workerCount, - configFile: path.resolve( __dirname, 'babel.dependencies.config.js' ), + presets: [ require.resolve( '@automattic/calypso-build/babel/dependencies' ) ], cacheDirectory: path.join( __dirname, 'build', '.babel-client-cache', extraPath ), cacheIdentifier, include: shouldTranspileDependency,