diff --git a/package.json b/package.json index bd64fcfc508fd6..6a83f3b0a9789b 100644 --- a/package.json +++ b/package.json @@ -125,6 +125,7 @@ "shallow-equals": "1.0.0", "shallowequal": "1.1.0", "simple-git": "1.113.0", + "source-map-loader": "0.2.4", "sprintf-js": "1.1.1", "stylelint-config-wordpress": "13.1.0", "uuid": "3.3.2", @@ -163,7 +164,7 @@ "clean:packages": "rimraf ./packages/*/build ./packages/*/build-module ./packages/*/build-style ./packages/*/node_modules", "prebuild:packages": "npm run clean:packages && lerna run build", "build:packages": "node ./bin/packages/build.js", - "build": "npm run build:packages && wp-scripts build --no-babel", + "build": "npm run build:packages && wp-scripts build", "check-engines": "wp-scripts check-engines", "check-licenses": "concurrently \"wp-scripts check-licenses --prod --gpl2\" \"wp-scripts check-licenses --dev\"", "precheck-local-changes": "npm run docs:build", diff --git a/packages/scripts/CHANGELOG.md b/packages/scripts/CHANGELOG.md index 5220992dd18159..7469b3455680bc 100644 --- a/packages/scripts/CHANGELOG.md +++ b/packages/scripts/CHANGELOG.md @@ -5,7 +5,6 @@ - Leverage `@wordpress/dependency-extraction-webpack-plugin` plugin to extract WordPress dependencies. - The bundled `eslint` dependency has been updated from requiring `^5.12.1` to requiring `^5.16.0`. -- Added new `--no-babel` flag for `build` script. ### Enhancements diff --git a/packages/scripts/README.md b/packages/scripts/README.md index 82be1c7be6bd94..b21c7078a61d56 100644 --- a/packages/scripts/README.md +++ b/packages/scripts/README.md @@ -58,10 +58,6 @@ This is how you execute the script with presented setup: * `npm run build` - builds the code for production. -_Flags_: - -- `--no-babel`: When present, excludes the default Babel file processing - #### Advanced information This script uses [webpack](https://webpack.js.org/) behind the scenes. It'll look for a webpack config in the top-level directory of your package and will use it if it finds one. If none is found, it'll use the default config provided by `@wordpress/scripts` packages. Learn more in the [Advanced Usage](#advanced-usage) section. diff --git a/packages/scripts/config/webpack.config.js b/packages/scripts/config/webpack.config.js index eae69e0904560a..5a3b30163a4325 100644 --- a/packages/scripts/config/webpack.config.js +++ b/packages/scripts/config/webpack.config.js @@ -13,7 +13,7 @@ const DependencyExtractionWebpackPlugin = require( '@wordpress/dependency-extrac /** * Internal dependencies */ -const { hasBabelConfig, hasCliArg } = require( '../utils' ); +const { hasBabelConfig } = require( '../utils' ); const isProduction = process.env.NODE_ENV === 'production'; const mode = isProduction ? 'production' : 'development'; @@ -33,8 +33,32 @@ const config = { }, }, module: { - // Rules are conditionally assigned in logic below. - rules: [], + rules: [ + { + test: /\.js$/, + exclude: /node_modules/, + use: [ + require.resolve( 'thread-loader' ), + { + loader: require.resolve( 'babel-loader' ), + options: { + // Babel uses a directory within local node_modules + // by default. Use the environment variable option + // to enable more persistent caching. + cacheDirectory: process.env.BABEL_CACHE_DIRECTORY || true, + + // Provide a fallback configuration if there's not + // one explicitly available in the project. + ...( ! hasBabelConfig() && { + babelrc: false, + configFile: false, + presets: [ require.resolve( '@wordpress/babel-preset-default' ) ], + } ), + }, + }, + ], + }, + ], }, plugins: [ // WP_BUNDLE_ANALYZER global variable enables utility that represents bundle content @@ -50,33 +74,6 @@ const config = { }, }; -if ( ! hasCliArg( '--no-babel' ) ) { - config.module.rules.push( { - test: /\.js$/, - exclude: /node_modules/, - use: [ - require.resolve( 'thread-loader' ), - { - loader: require.resolve( 'babel-loader' ), - options: { - // Babel uses a directory within local node_modules - // by default. Use the environment variable option - // to enable more persistent caching. - cacheDirectory: process.env.BABEL_CACHE_DIRECTORY || true, - - // Provide a fallback configuration if there's not - // one explicitly available in the project. - ...( ! hasBabelConfig() && { - babelrc: false, - configFile: false, - presets: [ require.resolve( '@wordpress/babel-preset-default' ) ], - } ), - }, - }, - ], - } ); -} - if ( ! isProduction ) { // WP_DEVTOOL global variable controls how source maps are generated. // See: https://webpack.js.org/configuration/devtool/#devtool. diff --git a/webpack.config.js b/webpack.config.js index ba130ce0992d4a..3de56a819e0de8 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -4,7 +4,7 @@ const { DefinePlugin } = require( 'webpack' ); const CopyWebpackPlugin = require( 'copy-webpack-plugin' ); const postcss = require( 'postcss' ); -const { get, escapeRegExp } = require( 'lodash' ); +const { get, escapeRegExp, compact } = require( 'lodash' ); const { basename, sep } = require( 'path' ); /** @@ -12,7 +12,7 @@ const { basename, sep } = require( 'path' ); */ const CustomTemplatedPathPlugin = require( '@wordpress/custom-templated-path-webpack-plugin' ); const LibraryExportDefaultPlugin = require( '@wordpress/library-export-default-webpack-plugin' ); -const defaultConfig = require( '@wordpress/scripts/config/webpack.config' ); +const DependencyExtractionWebpackPlugin = require( '@wordpress/dependency-extraction-webpack-plugin' ); const { camelCaseDash } = require( '@wordpress/scripts/utils' ); /** @@ -20,6 +20,11 @@ const { camelCaseDash } = require( '@wordpress/scripts/utils' ); */ const { dependencies } = require( './package' ); +const { + NODE_ENV: mode = 'development', + WP_DEVTOOL: devtool = ( mode === 'production' ? false : 'source-map' ), +} = process.env; + const WORDPRESS_NAMESPACE = '@wordpress/'; const gutenbergPackages = Object.keys( dependencies ) @@ -27,7 +32,7 @@ const gutenbergPackages = Object.keys( dependencies ) .map( ( packageName ) => packageName.replace( WORDPRESS_NAMESPACE, '' ) ); module.exports = { - ...defaultConfig, + mode, entry: gutenbergPackages.reduce( ( memo, packageName ) => { const name = camelCaseDash( packageName ); memo[ name ] = `./packages/${ packageName }`; @@ -39,8 +44,16 @@ module.exports = { library: [ 'wp', '[name]' ], libraryTarget: 'this', }, + module: { + rules: compact( [ + mode !== 'production' && { + test: /\.js$/, + use: require.resolve( 'source-map-loader' ), + enforce: 'pre', + }, + ] ), + }, plugins: [ - ...defaultConfig.plugins, new DefinePlugin( { // Inject the `GUTENBERG_PHASE` global, used for feature flagging. // eslint-disable-next-line @wordpress/gutenberg-phase @@ -82,7 +95,7 @@ module.exports = { to: `./build/${ packageName }/`, flatten: true, transform: ( content ) => { - if ( defaultConfig.mode === 'production' ) { + if ( mode === 'production' ) { return postcss( [ require( 'cssnano' )( { preset: [ 'default', { @@ -134,5 +147,7 @@ module.exports = { }, }, ] ), + new DependencyExtractionWebpackPlugin( { injectPolyfill: true } ), ], + devtool, };