From f533ba1daa22e8bd5d6bbfc9f66e2a44be4dcf65 Mon Sep 17 00:00:00 2001 From: asharirfan Date: Fri, 6 Mar 2020 01:06:33 +0500 Subject: [PATCH 1/8] New wp-scripts package in cgb-scripts --- packages/cgb-scripts/package.json | 1 + packages/cgb-scripts/scripts/start.js | 122 ++++++++++-------- .../app/npmInstallScripts.js | 2 +- 3 files changed, 67 insertions(+), 58 deletions(-) diff --git a/packages/cgb-scripts/package.json b/packages/cgb-scripts/package.json index 10db173f..429e223f 100644 --- a/packages/cgb-scripts/package.json +++ b/packages/cgb-scripts/package.json @@ -30,6 +30,7 @@ "cgb-scripts": "./bin/cgb-scripts.js" }, "dependencies": { + "@wordpress/scripts": "^7.1.2", "autoprefixer": "^7.2.4", "babel-core": "^6.25.0", "babel-eslint": "^8.2.1", diff --git a/packages/cgb-scripts/scripts/start.js b/packages/cgb-scripts/scripts/start.js index aa637b27..24236f67 100644 --- a/packages/cgb-scripts/scripts/start.js +++ b/packages/cgb-scripts/scripts/start.js @@ -23,9 +23,11 @@ process.on( 'unhandledRejection', err => { const ora = require( 'ora' ); const chalk = require( 'chalk' ); const webpack = require( 'webpack' ); +const spawn = require( 'cgb-dev-utils/crossSpawn' ); const config = require( '../config/webpack.config.dev' ); const resolvePkg = require( 'resolve-pkg' ); const cgbDevUtilsPath = resolvePkg( 'cgb-dev-utils', { cwd: __dirname } ); +const wpscripts = resolvePkg( '@wordpress/scripts', { cwd: __dirname } ); const clearConsole = require( cgbDevUtilsPath + '/clearConsole' ); const formatWebpackMessages = require( cgbDevUtilsPath + '/formatWebpackMessages' ); @@ -56,65 +58,71 @@ const spinner = new ora( { text: '' } ); // Create the production build and print the deployment instructions. async function build( webpackConfig ) { // Compiler Instance. - const compiler = await webpack( webpackConfig ); + // const compiler = await webpack( webpackConfig ); + const result = spawn.sync( + wpscripts, + ['start'], + { stdio: 'inherit' } + ); + console.log( result ); // Run the compiler. - compiler.watch( {}, ( err, stats ) => { - clearConsole(); - - if ( err ) { - return console.log( err ); - } - - // Get the messages formatted. - const messages = formatWebpackMessages( stats.toJson( {}, true ) ); - - // If there are errors just show the errors. - if ( messages.errors.length ) { - // Only keep the first error. Others are often indicative - // of the same problem, but confuse the reader with noise. - if ( messages.errors.length > 1 ) { - messages.errors.length = 1; - } - - // Clear success messages. - clearConsole(); - - // Formatted errors. - console.log( '\nāŒ ', chalk.black.bgRed( ' Failed to compile. \n' ) ); - const logErrors = console.log( '\nšŸ‘‰ ', messages.errors.join( '\n\n' ) ); - console.log( '\n' ); - spinner.start( chalk.dim( 'Watching for changes... let\'s fix this... (Press CTRL + C to stop).' ) ); - return logErrors; - } - - // CI. - if ( - process.env.CI && - ( typeof process.env.CI !== 'string' || process.env.CI.toLowerCase() !== 'false' ) && - messages.warnings.length - ) { - console.log( - chalk.yellow( - '\nTreating warnings as errors because process.env.CI = true.\n' + - 'Most CI servers set it automatically.\n' - ) - ); - return console.log( messages.warnings.join( '\n\n' ) ); - } - - // Start the build. - console.log( `\n${ chalk.dim( 'Let\'s build and compile the files...' ) }` ); - console.log( '\nāœ… ', chalk.black.bgGreen( ' Compiled successfully! \n' ) ); - console.log( - chalk.dim( ' Note that the development build is not optimized. \n' ), - chalk.dim( ' To create a production build, use' ), - chalk.green( 'npm' ), - chalk.white( 'run build\n\n' ), - chalk.dim( 'šŸ‘Œ Support Awais via VSCode Power User at https://VSCode.pro ā†’\n\n' ) - ); - return spinner.start( `${ chalk.dim( 'Watching for changes... (Press CTRL + C to stop).' ) }` ); - } ); + // compiler.watch( {}, ( err, stats ) => { + // clearConsole(); + + // if ( err ) { + // return console.log( err ); + // } + + // // Get the messages formatted. + // const messages = formatWebpackMessages( stats.toJson( {}, true ) ); + + // // If there are errors just show the errors. + // if ( messages.errors.length ) { + // // Only keep the first error. Others are often indicative + // // of the same problem, but confuse the reader with noise. + // if ( messages.errors.length > 1 ) { + // messages.errors.length = 1; + // } + + // // Clear success messages. + // clearConsole(); + + // // Formatted errors. + // console.log( '\nāŒ ', chalk.black.bgRed( ' Failed to compile. \n' ) ); + // const logErrors = console.log( '\nšŸ‘‰ ', messages.errors.join( '\n\n' ) ); + // console.log( '\n' ); + // spinner.start( chalk.dim( 'Watching for changes... let\'s fix this... (Press CTRL + C to stop).' ) ); + // return logErrors; + // } + + // // CI. + // if ( + // process.env.CI && + // ( typeof process.env.CI !== 'string' || process.env.CI.toLowerCase() !== 'false' ) && + // messages.warnings.length + // ) { + // console.log( + // chalk.yellow( + // '\nTreating warnings as errors because process.env.CI = true.\n' + + // 'Most CI servers set it automatically.\n' + // ) + // ); + // return console.log( messages.warnings.join( '\n\n' ) ); + // } + + // // Start the build. + // console.log( `\n${ chalk.dim( 'Let\'s build and compile the files...' ) }` ); + // console.log( '\nāœ… ', chalk.black.bgGreen( ' Compiled successfully! \n' ) ); + // console.log( + // chalk.dim( ' Note that the development build is not optimized. \n' ), + // chalk.dim( ' To create a production build, use' ), + // chalk.green( 'npm' ), + // chalk.white( 'run build\n\n' ), + // chalk.dim( 'šŸ‘Œ Support Awais via VSCode Power User at https://VSCode.pro ā†’\n\n' ) + // ); + // return spinner.start( `${ chalk.dim( 'Watching for changes... (Press CTRL + C to stop).' ) }` ); + // } ); } build( config ); diff --git a/packages/create-guten-block/app/npmInstallScripts.js b/packages/create-guten-block/app/npmInstallScripts.js index 7f94dc7d..cadf7a7a 100644 --- a/packages/create-guten-block/app/npmInstallScripts.js +++ b/packages/create-guten-block/app/npmInstallScripts.js @@ -45,7 +45,7 @@ module.exports = ( blockName, blockDir, isCanary ) => { } // Install latest exact version of cgb-scripts. return new Promise( async resolve => { - await execa( 'npm', [ 'install', 'cgb-scripts', '--save', '--save-exact', '--silent' ] ); + await execa( 'npm', [ 'install', '../packages/cgb-scripts', '--save', '--save-exact', '--silent' ] ); resolve( true ); } ); }; From 777134d2a9fc145aea29b46b952a1abba0752979 Mon Sep 17 00:00:00 2001 From: asharirfan Date: Sun, 15 Mar 2020 15:34:35 +0500 Subject: [PATCH 2/8] Fix wp-scripts CLI path --- packages/cgb-scripts/scripts/start.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/cgb-scripts/scripts/start.js b/packages/cgb-scripts/scripts/start.js index 24236f67..4dc5d576 100644 --- a/packages/cgb-scripts/scripts/start.js +++ b/packages/cgb-scripts/scripts/start.js @@ -27,7 +27,7 @@ const spawn = require( 'cgb-dev-utils/crossSpawn' ); const config = require( '../config/webpack.config.dev' ); const resolvePkg = require( 'resolve-pkg' ); const cgbDevUtilsPath = resolvePkg( 'cgb-dev-utils', { cwd: __dirname } ); -const wpscripts = resolvePkg( '@wordpress/scripts', { cwd: __dirname } ); +const wpScripts = resolvePkg( '@wordpress/scripts/bin/wp-scripts.js', { cwd: __dirname } ); const clearConsole = require( cgbDevUtilsPath + '/clearConsole' ); const formatWebpackMessages = require( cgbDevUtilsPath + '/formatWebpackMessages' ); @@ -60,7 +60,7 @@ async function build( webpackConfig ) { // Compiler Instance. // const compiler = await webpack( webpackConfig ); const result = spawn.sync( - wpscripts, + wpScripts, ['start'], { stdio: 'inherit' } ); From 1c6bbc35bb07771314b11b44750c5f69953ce5f7 Mon Sep 17 00:00:00 2001 From: Ashar Irfan Date: Sat, 28 Mar 2020 00:19:39 +0500 Subject: [PATCH 3/8] =?UTF-8?q?=F0=9F=91=8C=20IMPROVE:=20Integration=20of?= =?UTF-8?q?=20cgb-scripts=20dev=20config=20with=20wp-scripts?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/cgb-scripts/config/paths.js | 4 +- .../cgb-scripts/config/webpack.config.dev.js | 252 ++++++++++++------ packages/cgb-scripts/package.json | 9 +- packages/cgb-scripts/scripts/start.js | 10 +- .../app/npmInstallScripts.js | 2 +- 5 files changed, 186 insertions(+), 91 deletions(-) diff --git a/packages/cgb-scripts/config/paths.js b/packages/cgb-scripts/config/paths.js index c555ecb7..df99a529 100644 --- a/packages/cgb-scripts/config/paths.js +++ b/packages/cgb-scripts/config/paths.js @@ -17,7 +17,7 @@ module.exports = { pluginSrc: resolvePlugin( 'src' ), // Plugin src folder path. pluginBlocksJs: resolvePlugin( 'src/blocks.js' ), yarnLockFile: resolvePlugin( 'yarn.lock' ), - pluginDist: resolvePlugin( '.' ), // We are in ./dist folder already so the path '.' resolves to ./dist/. + pluginDist: resolvePlugin( 'dist' ), // We are in ./dist folder already so the path '.' resolves to ./dist/. }; // @remove-on-eject-begin @@ -28,7 +28,7 @@ module.exports = { dotenv: resolvePlugin( '.env' ), pluginSrc: resolvePlugin( 'src' ), pluginBlocksJs: resolvePlugin( 'src/blocks.js' ), - pluginDist: resolvePlugin( '.' ), // We are in ./dist folder already so the path '.' resolves to ./dist/. + pluginDist: resolvePlugin( 'dist' ), // We are in ./dist folder already so the path '.' resolves to ./dist/. yarnLockFile: resolvePlugin( 'yarn.lock' ), appPath: resolvePlugin( '.' ), // These properties only exist before ejecting: diff --git a/packages/cgb-scripts/config/webpack.config.dev.js b/packages/cgb-scripts/config/webpack.config.dev.js index 88b39db2..de1153f2 100644 --- a/packages/cgb-scripts/config/webpack.config.dev.js +++ b/packages/cgb-scripts/config/webpack.config.dev.js @@ -20,104 +20,196 @@ * @since 1.0.0 */ -const paths = require( './paths' ); -const externals = require( './externals' ); -const autoprefixer = require( 'autoprefixer' ); -const ExtractTextPlugin = require( 'extract-text-webpack-plugin' ); +// const autoprefixer = require( 'autoprefixer' ); +// const ExtractTextPlugin = require( 'extract-text-webpack-plugin' ); -// Extract style.css for both editor and frontend styles. -const blocksCSSPlugin = new ExtractTextPlugin( { - filename: './dist/blocks.style.build.css', -} ); +// // Extract style.css for both editor and frontend styles. +// const blocksCSSPlugin = new ExtractTextPlugin( { +// filename: './dist/blocks.style.build.css', +// } ); -// Extract editor.css for editor styles. -const editBlocksCSSPlugin = new ExtractTextPlugin( { - filename: './dist/blocks.editor.build.css', -} ); +// // Extract editor.css for editor styles. +// const editBlocksCSSPlugin = new ExtractTextPlugin( { +// filename: './dist/blocks.editor.build.css', +// } ); -// Configuration for the ExtractTextPlugin ā€” DRY rule. -const extractConfig = { - use: [ - // "postcss" loader applies autoprefixer to our CSS. - { loader: 'raw-loader' }, - { - loader: 'postcss-loader', - options: { - ident: 'postcss', - plugins: [ - autoprefixer( { - browsers: [ - '>1%', - 'last 4 versions', - 'Firefox ESR', - 'not ie < 9', // React doesn't support IE8 anyway - ], - flexbox: 'no-2009', - } ), - ], - }, - }, - // "sass" loader converts SCSS to CSS. - { - loader: 'sass-loader', - options: { - // Add common CSS file for variables and mixins. - data: '@import "./src/common.scss";\n', - outputStyle: 'nested', - }, - }, - ], -}; +// // Configuration for the ExtractTextPlugin ā€” DRY rule. +// const extractConfig = { +// use: [ +// // "postcss" loader applies autoprefixer to our CSS. +// { loader: 'raw-loader' }, +// { +// loader: 'postcss-loader', +// options: { +// ident: 'postcss', +// plugins: [ +// autoprefixer( { +// browsers: [ +// '>1%', +// 'last 4 versions', +// 'Firefox ESR', +// 'not ie < 9', // React doesn't support IE8 anyway +// ], +// flexbox: 'no-2009', +// } ), +// ], +// }, +// }, +// // "sass" loader converts SCSS to CSS. +// { +// loader: 'sass-loader', +// options: { +// // Add common CSS file for variables and mixins. +// data: '@import "./src/common.scss";\n', +// outputStyle: 'nested', +// }, +// }, +// ], +// }; + +// // Export configuration. +// module.exports = { +// entry: { +// './dist/blocks.build': paths.pluginBlocksJs, // 'name' : 'path/file.ext'. +// }, +// output: { +// // Add /* filename */ comments to generated require()s in the output. +// pathinfo: true, +// // The dist folder. +// path: paths.pluginDist, +// filename: '[name].js', // [name] = './dist/blocks.build' as defined above. +// }, +// // You may want 'eval' instead if you prefer to see the compiled output in DevTools. +// devtool: 'cheap-eval-source-map', +// module: { +// rules: [ +// { +// test: /\.(js|jsx|mjs)$/, +// exclude: /(node_modules|bower_components)/, +// use: { +// loader: 'babel-loader', +// options: { +// // @remove-on-eject-begin +// babelrc: false, +// presets: [ require.resolve( 'babel-preset-cgb' ) ], +// // @remove-on-eject-end +// // This is a feature of `babel-loader` for webpack (not Babel itself). +// // It enables caching results in ./node_modules/.cache/babel-loader/ +// // directory for faster rebuilds. +// cacheDirectory: true, +// }, +// }, +// }, +// { +// test: /style\.s?css$/, +// exclude: /(node_modules|bower_components)/, +// use: blocksCSSPlugin.extract( extractConfig ), +// }, +// { +// test: /editor\.s?css$/, +// exclude: /(node_modules|bower_components)/, +// use: editBlocksCSSPlugin.extract( extractConfig ), +// }, +// ], +// }, +// // Add plugins. +// plugins: [ blocksCSSPlugin, editBlocksCSSPlugin ], +// stats: 'minimal', +// // stats: 'errors-only', +// // Add externals. +// externals: externals, +// }; + +const path = require( 'path' ); +const paths = require( './paths' ); +const externals = require( './externals' ); +const postcssPresetEnv = require( 'postcss-preset-env' ); +const MiniCssExtractPlugin = require( 'mini-css-extract-plugin' ); +const FixStyleOnlyEntriesPlugin = require( 'webpack-fix-style-only-entries' ); +const defaultConfig = require( '@wordpress/scripts/config/webpack.config' ); +const { mode, resolve } = defaultConfig; -// Export configuration. module.exports = { + mode, entry: { - './dist/blocks.build': paths.pluginBlocksJs, // 'name' : 'path/file.ext'. + 'blocks.build': paths.pluginBlocksJs, }, output: { - // Add /* filename */ comments to generated require()s in the output. - pathinfo: true, - // The dist folder. + filename: '[name].js', path: paths.pluginDist, - filename: '[name].js', // [name] = './dist/blocks.build' as defined above. + pathinfo: true, + }, + resolve, + optimization: { + splitChunks: { + chunks: 'all', + cacheGroups: { + editor: { + name: 'editor', + test: /editor\.(sc|sa|c)ss$/, + enforce: true, + }, + style: { + name: 'style', + test: /style\.(sc|sa|c)ss$/, + enforce: true, + }, + default: false, + }, + }, }, - // You may want 'eval' instead if you prefer to see the compiled output in DevTools. - devtool: 'cheap-eval-source-map', module: { + ...defaultConfig.module, rules: [ + ...defaultConfig.module.rules, { - test: /\.(js|jsx|mjs)$/, - exclude: /(node_modules|bower_components)/, - use: { - loader: 'babel-loader', - options: { - // @remove-on-eject-begin - babelrc: false, - presets: [ require.resolve( 'babel-preset-cgb' ) ], - // @remove-on-eject-end - // This is a feature of `babel-loader` for webpack (not Babel itself). - // It enables caching results in ./node_modules/.cache/babel-loader/ - // directory for faster rebuilds. - cacheDirectory: true, + test: /\.scss$/, + use: [ + path.resolve( MiniCssExtractPlugin.loader ), + path.resolve( __dirname, '../node_modules/css-loader' ), + { + loader: path.resolve( __dirname, '../node_modules', 'postcss-loader' ), + options: { + ident: 'postcss', + plugins: () => [ + postcssPresetEnv( { + stage: 3, + browsers: [ + '>1%', + 'last 4 versions', + 'Firefox ESR', + 'not ie < 9', // React doesn't support IE8 anyway + ], + } ), + ], + }, }, - }, - }, - { - test: /style\.s?css$/, - exclude: /(node_modules|bower_components)/, - use: blocksCSSPlugin.extract( extractConfig ), - }, - { - test: /editor\.s?css$/, - exclude: /(node_modules|bower_components)/, - use: editBlocksCSSPlugin.extract( extractConfig ), + { + loader: path.resolve( __dirname, '../node_modules', 'sass-loader' ), + options: { + prependData: '@import "./src/common.scss";', + sassOptions: { + outputStyle: 'nested', + }, + }, + }, + ], }, ], }, // Add plugins. - plugins: [ blocksCSSPlugin, editBlocksCSSPlugin ], - stats: 'minimal', - // stats: 'errors-only', + plugins: [ + new FixStyleOnlyEntriesPlugin( { + silent: false, + } ), + + // Extract CSS into individual files. + new MiniCssExtractPlugin( { + filename: 'blocks.[name].build.css', + chunkFilename: 'blocks.[name].build.css', + } ), + ], + // stats: 'minimal', // Add externals. externals: externals, }; diff --git a/packages/cgb-scripts/package.json b/packages/cgb-scripts/package.json index 429e223f..6855fbbb 100644 --- a/packages/cgb-scripts/package.json +++ b/packages/cgb-scripts/package.json @@ -40,6 +40,7 @@ "chalk": "^2.3.0", "cross-env": "^5.0.1", "cross-spawn": "^5.1.0", + "css-loader": "^3.4.2", "eslint": "^4.15.0", "eslint-config-wordpress": "^2.0.0", "eslint-plugin-jest": "^21.6.1", @@ -51,15 +52,17 @@ "fs-extra": "^5.0.0", "gzip-size": "^4.1.0", "inquirer": "^5.0.0", + "mini-css-extract-plugin": "^0.9.0", "node-sass": "^4.7.2", "ora": "^1.3.0", - "postcss-loader": "^2.0.10", + "postcss-loader": "^3.0.0", + "postcss-preset-env": "^6.7.0", "raw-loader": "^0.5.1", "resolve-pkg": "^1.0.0", - "sass-loader": "^6.0.6", + "sass-loader": "^8.0.2", "shelljs": "^0.8.0", "style-loader": "^0.23.1", "update-notifier": "^2.3.0", - "webpack": "^3.1.0" + "webpack-fix-style-only-entries": "^0.4.0" } } diff --git a/packages/cgb-scripts/scripts/start.js b/packages/cgb-scripts/scripts/start.js index 4dc5d576..2b018da4 100644 --- a/packages/cgb-scripts/scripts/start.js +++ b/packages/cgb-scripts/scripts/start.js @@ -24,8 +24,8 @@ const ora = require( 'ora' ); const chalk = require( 'chalk' ); const webpack = require( 'webpack' ); const spawn = require( 'cgb-dev-utils/crossSpawn' ); -const config = require( '../config/webpack.config.dev' ); const resolvePkg = require( 'resolve-pkg' ); +const config = resolvePkg( 'cgb-scripts/config/webpack.config.dev.js', { cwd: __dirname } ); const cgbDevUtilsPath = resolvePkg( 'cgb-dev-utils', { cwd: __dirname } ); const wpScripts = resolvePkg( '@wordpress/scripts/bin/wp-scripts.js', { cwd: __dirname } ); const clearConsole = require( cgbDevUtilsPath + '/clearConsole' ); @@ -59,16 +59,16 @@ const spinner = new ora( { text: '' } ); async function build( webpackConfig ) { // Compiler Instance. // const compiler = await webpack( webpackConfig ); - const result = spawn.sync( + spawn.sync( wpScripts, - ['start'], + [ 'start', '--config', webpackConfig ], { stdio: 'inherit' } ); - console.log( result ); + // console.log( result ); // Run the compiler. // compiler.watch( {}, ( err, stats ) => { - // clearConsole(); + // clearConsole(); // if ( err ) { // return console.log( err ); diff --git a/packages/create-guten-block/app/npmInstallScripts.js b/packages/create-guten-block/app/npmInstallScripts.js index cadf7a7a..7f94dc7d 100644 --- a/packages/create-guten-block/app/npmInstallScripts.js +++ b/packages/create-guten-block/app/npmInstallScripts.js @@ -45,7 +45,7 @@ module.exports = ( blockName, blockDir, isCanary ) => { } // Install latest exact version of cgb-scripts. return new Promise( async resolve => { - await execa( 'npm', [ 'install', '../packages/cgb-scripts', '--save', '--save-exact', '--silent' ] ); + await execa( 'npm', [ 'install', 'cgb-scripts', '--save', '--save-exact', '--silent' ] ); resolve( true ); } ); }; From 16769dcf04d6e37eadf762e3280897f5cf0ce965 Mon Sep 17 00:00:00 2001 From: Ashar Irfan Date: Sat, 28 Mar 2020 01:05:33 +0500 Subject: [PATCH 4/8] =?UTF-8?q?=F0=9F=91=8C=20IMPROVE:=20Dev=20config=20lo?= =?UTF-8?q?ader=20paths?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/cgb-scripts/config/webpack.config.dev.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/cgb-scripts/config/webpack.config.dev.js b/packages/cgb-scripts/config/webpack.config.dev.js index de1153f2..1161e381 100644 --- a/packages/cgb-scripts/config/webpack.config.dev.js +++ b/packages/cgb-scripts/config/webpack.config.dev.js @@ -166,9 +166,9 @@ module.exports = { test: /\.scss$/, use: [ path.resolve( MiniCssExtractPlugin.loader ), - path.resolve( __dirname, '../node_modules/css-loader' ), + path.resolve( 'css-loader' ), { - loader: path.resolve( __dirname, '../node_modules', 'postcss-loader' ), + loader: path.resolve( 'postcss-loader' ), options: { ident: 'postcss', plugins: () => [ @@ -185,7 +185,7 @@ module.exports = { }, }, { - loader: path.resolve( __dirname, '../node_modules', 'sass-loader' ), + loader: path.resolve( 'sass-loader' ), options: { prependData: '@import "./src/common.scss";', sassOptions: { From d52a984366d5b6cd8be7010a80e6d1608299e196 Mon Sep 17 00:00:00 2001 From: Ashar Irfan Date: Sat, 28 Mar 2020 03:04:33 +0500 Subject: [PATCH 5/8] =?UTF-8?q?=F0=9F=91=8C=20IMPROVE:=20Dev=20cgb-scripts?= =?UTF-8?q?=20config?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../cgb-scripts/config/webpack.config.dev.js | 117 ++---------------- 1 file changed, 9 insertions(+), 108 deletions(-) diff --git a/packages/cgb-scripts/config/webpack.config.dev.js b/packages/cgb-scripts/config/webpack.config.dev.js index 1161e381..1a5e1de4 100644 --- a/packages/cgb-scripts/config/webpack.config.dev.js +++ b/packages/cgb-scripts/config/webpack.config.dev.js @@ -19,115 +19,13 @@ * * @since 1.0.0 */ - -// const autoprefixer = require( 'autoprefixer' ); -// const ExtractTextPlugin = require( 'extract-text-webpack-plugin' ); - -// // Extract style.css for both editor and frontend styles. -// const blocksCSSPlugin = new ExtractTextPlugin( { -// filename: './dist/blocks.style.build.css', -// } ); - -// // Extract editor.css for editor styles. -// const editBlocksCSSPlugin = new ExtractTextPlugin( { -// filename: './dist/blocks.editor.build.css', -// } ); - -// // Configuration for the ExtractTextPlugin ā€” DRY rule. -// const extractConfig = { -// use: [ -// // "postcss" loader applies autoprefixer to our CSS. -// { loader: 'raw-loader' }, -// { -// loader: 'postcss-loader', -// options: { -// ident: 'postcss', -// plugins: [ -// autoprefixer( { -// browsers: [ -// '>1%', -// 'last 4 versions', -// 'Firefox ESR', -// 'not ie < 9', // React doesn't support IE8 anyway -// ], -// flexbox: 'no-2009', -// } ), -// ], -// }, -// }, -// // "sass" loader converts SCSS to CSS. -// { -// loader: 'sass-loader', -// options: { -// // Add common CSS file for variables and mixins. -// data: '@import "./src/common.scss";\n', -// outputStyle: 'nested', -// }, -// }, -// ], -// }; - -// // Export configuration. -// module.exports = { -// entry: { -// './dist/blocks.build': paths.pluginBlocksJs, // 'name' : 'path/file.ext'. -// }, -// output: { -// // Add /* filename */ comments to generated require()s in the output. -// pathinfo: true, -// // The dist folder. -// path: paths.pluginDist, -// filename: '[name].js', // [name] = './dist/blocks.build' as defined above. -// }, -// // You may want 'eval' instead if you prefer to see the compiled output in DevTools. -// devtool: 'cheap-eval-source-map', -// module: { -// rules: [ -// { -// test: /\.(js|jsx|mjs)$/, -// exclude: /(node_modules|bower_components)/, -// use: { -// loader: 'babel-loader', -// options: { -// // @remove-on-eject-begin -// babelrc: false, -// presets: [ require.resolve( 'babel-preset-cgb' ) ], -// // @remove-on-eject-end -// // This is a feature of `babel-loader` for webpack (not Babel itself). -// // It enables caching results in ./node_modules/.cache/babel-loader/ -// // directory for faster rebuilds. -// cacheDirectory: true, -// }, -// }, -// }, -// { -// test: /style\.s?css$/, -// exclude: /(node_modules|bower_components)/, -// use: blocksCSSPlugin.extract( extractConfig ), -// }, -// { -// test: /editor\.s?css$/, -// exclude: /(node_modules|bower_components)/, -// use: editBlocksCSSPlugin.extract( extractConfig ), -// }, -// ], -// }, -// // Add plugins. -// plugins: [ blocksCSSPlugin, editBlocksCSSPlugin ], -// stats: 'minimal', -// // stats: 'errors-only', -// // Add externals. -// externals: externals, -// }; - -const path = require( 'path' ); const paths = require( './paths' ); const externals = require( './externals' ); const postcssPresetEnv = require( 'postcss-preset-env' ); const MiniCssExtractPlugin = require( 'mini-css-extract-plugin' ); const FixStyleOnlyEntriesPlugin = require( 'webpack-fix-style-only-entries' ); const defaultConfig = require( '@wordpress/scripts/config/webpack.config' ); -const { mode, resolve } = defaultConfig; +const { mode, resolve, plugins, stats } = defaultConfig; module.exports = { mode, @@ -165,10 +63,10 @@ module.exports = { { test: /\.scss$/, use: [ - path.resolve( MiniCssExtractPlugin.loader ), - path.resolve( 'css-loader' ), + MiniCssExtractPlugin.loader, + 'css-loader', { - loader: path.resolve( 'postcss-loader' ), + loader: 'postcss-loader', options: { ident: 'postcss', plugins: () => [ @@ -185,7 +83,7 @@ module.exports = { }, }, { - loader: path.resolve( 'sass-loader' ), + loader: 'sass-loader', options: { prependData: '@import "./src/common.scss";', sassOptions: { @@ -208,8 +106,11 @@ module.exports = { filename: 'blocks.[name].build.css', chunkFilename: 'blocks.[name].build.css', } ), + + // Extract @wordpress/scripts plugins. + ...plugins, ], - // stats: 'minimal', + stats, // Add externals. externals: externals, }; From 13629ceb81156c57d2434b7ee458f6ef3e8fe297 Mon Sep 17 00:00:00 2001 From: Ashar Irfan Date: Sat, 28 Mar 2020 19:40:24 +0500 Subject: [PATCH 6/8] =?UTF-8?q?=F0=9F=93=A6=20NEW:=20wp-scripts=20build=20?= =?UTF-8?q?config=20for=20production=20config=20of=20cgb-scripts?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../cgb-scripts/config/webpack.config.prod.js | 174 ++++++++---------- packages/cgb-scripts/scripts/build.js | 148 ++++++++------- 2 files changed, 150 insertions(+), 172 deletions(-) diff --git a/packages/cgb-scripts/config/webpack.config.prod.js b/packages/cgb-scripts/config/webpack.config.prod.js index 53c9ed79..dd5bf716 100644 --- a/packages/cgb-scripts/config/webpack.config.prod.js +++ b/packages/cgb-scripts/config/webpack.config.prod.js @@ -21,132 +21,102 @@ */ const paths = require( './paths' ); -const webpack = require( 'webpack' ); const externals = require( './externals' ); -const autoprefixer = require( 'autoprefixer' ); -const ExtractTextPlugin = require( 'extract-text-webpack-plugin' ); +const postcssPresetEnv = require( 'postcss-preset-env' ); +const MiniCssExtractPlugin = require( 'mini-css-extract-plugin' ); +const FixStyleOnlyEntriesPlugin = require( 'webpack-fix-style-only-entries' ); +const defaultConfig = require( '@wordpress/scripts/config/webpack.config' ); +const { mode, resolve, plugins, stats } = defaultConfig; // Source maps are resource heavy and can cause out of memory issue for large source files. const shouldUseSourceMap = process.env.GENERATE_SOURCEMAP === 'true'; -// Extract style.css for both editor and frontend styles. -const blocksCSSPlugin = new ExtractTextPlugin( { - filename: './dist/blocks.style.build.css', -} ); - -// Extract editor.css for editor styles. -const editBlocksCSSPlugin = new ExtractTextPlugin( { - filename: './dist/blocks.editor.build.css', -} ); - -// Configuration for the ExtractTextPlugin ā€” DRY rule. -const extractConfig = { - use: [ - // "postcss" loader applies autoprefixer to our CSS. - { loader: 'raw-loader' }, - { - loader: 'postcss-loader', - options: { - ident: 'postcss', - plugins: [ - autoprefixer( { - browsers: [ - '>1%', - 'last 4 versions', - 'Firefox ESR', - 'not ie < 9', // React doesn't support IE8 anyway - ], - flexbox: 'no-2009', - } ), - ], - }, - }, - // "sass" loader converts SCSS to CSS. - { - loader: 'sass-loader', - options: { - // Add common CSS file for variables and mixins. - data: '@import "./src/common.scss";\n', - outputStyle: 'compressed', - }, - }, - ], -}; - -// Export configuration. module.exports = { + mode, entry: { - './dist/blocks.build': paths.pluginBlocksJs, // 'name' : 'path/file.ext'. + 'blocks.build': paths.pluginBlocksJs, }, output: { - // Add /* filename */ comments to generated require()s in the output. - pathinfo: true, - // The dist folder. + filename: '[name].js', path: paths.pluginDist, - filename: '[name].js', // [name] = './dist/blocks.build' as defined above. + pathinfo: true, }, + resolve, // You may want 'eval' instead if you prefer to see the compiled output in DevTools. devtool: shouldUseSourceMap ? 'source-map' : false, + optimization: { + splitChunks: { + chunks: 'all', + cacheGroups: { + editor: { + name: 'editor', + test: /editor\.(sc|sa|c)ss$/, + enforce: true, + }, + style: { + name: 'style', + test: /style\.(sc|sa|c)ss$/, + enforce: true, + }, + default: false, + }, + }, + }, module: { + ...defaultConfig.module, rules: [ + ...defaultConfig.module.rules, { - test: /\.(js|jsx|mjs)$/, - exclude: /(node_modules|bower_components)/, - use: { - loader: 'babel-loader', - options: { - // @remove-on-eject-begin - babelrc: false, - presets: [ require.resolve( 'babel-preset-cgb' ) ], - // @remove-on-eject-end - // This is a feature of `babel-loader` for webpack (not Babel itself). - // It enables caching results in ./node_modules/.cache/babel-loader/ - // directory for faster rebuilds. - cacheDirectory: true, + test: /\.scss$/, + use: [ + MiniCssExtractPlugin.loader, + 'css-loader', + { + loader: 'postcss-loader', + options: { + ident: 'postcss', + plugins: () => [ + postcssPresetEnv( { + stage: 3, + browsers: [ + '>1%', + 'last 4 versions', + 'Firefox ESR', + 'not ie < 9', // React doesn't support IE8 anyway + ], + } ), + ], + }, }, - }, - }, - { - test: /style\.s?css$/, - exclude: /(node_modules|bower_components)/, - use: blocksCSSPlugin.extract( extractConfig ), - }, - { - test: /editor\.s?css$/, - exclude: /(node_modules|bower_components)/, - use: editBlocksCSSPlugin.extract( extractConfig ), + { + loader: 'sass-loader', + options: { + prependData: '@import "./src/common.scss";', + sassOptions: { + outputStyle: 'compressed', + }, + }, + }, + ], }, ], }, // Add plugins. plugins: [ - blocksCSSPlugin, - editBlocksCSSPlugin, - // Minify the code. - new webpack.optimize.UglifyJsPlugin( { - compress: { - warnings: false, - // Disabled because of an issue with Uglify breaking seemingly valid code: - // https://github.com/facebookincubator/create-react-app/issues/2376 - // Pending further investigation: - // https://github.com/mishoo/UglifyJS2/issues/2011 - comparisons: false, - }, - mangle: { - safari10: true, - except: ['__', '_n', '_x', '_nx' ], - }, - output: { - comments: false, - // Turned on because emoji and regex is not minified properly using default - // https://github.com/facebookincubator/create-react-app/issues/2488 - ascii_only: true, - }, - sourceMap: shouldUseSourceMap, + new FixStyleOnlyEntriesPlugin( { + silent: false, } ), + + // Extract CSS into individual files. + new MiniCssExtractPlugin( { + filename: 'blocks.[name].build.css', + chunkFilename: 'blocks.[name].build.css', + } ), + + // Extract @wordpress/scripts plugins. + ...plugins, ], - stats: 'minimal', - // stats: 'errors-only', + stats, // Add externals. externals: externals, }; diff --git a/packages/cgb-scripts/scripts/build.js b/packages/cgb-scripts/scripts/build.js index 3435750d..bbded906 100644 --- a/packages/cgb-scripts/scripts/build.js +++ b/packages/cgb-scripts/scripts/build.js @@ -25,8 +25,10 @@ const chalk = require( 'chalk' ); const webpack = require( 'webpack' ); const fileSize = require( 'filesize' ); const gzipSize = require( 'gzip-size' ); +const spawn = require( 'cgb-dev-utils/crossSpawn' ); const resolvePkg = require( 'resolve-pkg' ); -const config = require( '../config/webpack.config.prod' ); +const config = resolvePkg( 'cgb-scripts/config/webpack.config.prod', { cwd: __dirname } ); +const wpScripts = resolvePkg( '@wordpress/scripts/bin/wp-scripts.js', { cwd: __dirname } ); const cgbDevUtilsPath = resolvePkg( 'cgb-dev-utils', { cwd: __dirname } ); const clearConsole = require( cgbDevUtilsPath + '/clearConsole' ); const formatWebpackMessages = require( cgbDevUtilsPath + '/formatWebpackMessages' ); @@ -62,78 +64,84 @@ const spinner = new ora( { text: '' } ); * @param {json} webpackConfig config */ async function build( webpackConfig ) { + spawn.sync( + wpScripts, + [ 'build', '--config', webpackConfig ], + { stdio: 'inherit' } + ); + // Compiler Instance. - const compiler = await webpack( webpackConfig ); + // const compiler = await webpack( webpackConfig ); // Run the compiler. - compiler.run( ( err, stats ) => { - clearConsole(); - - if ( err ) { - return console.log( err ); - } - - // Get the messages formatted. - const messages = formatWebpackMessages( stats.toJson( {}, true ) ); - - // If there are errors just show the errors. - if ( messages.errors.length ) { - // Only keep the first error. Others are often indicative - // of the same problem, but confuse the reader with noise. - if ( messages.errors.length > 1 ) { - messages.errors.length = 1; - } - // Formatted errors. - clearConsole(); - console.log( '\nāŒ ', chalk.black.bgRed( ' Failed to compile build. \n' ) ); - console.log( '\nšŸ‘‰ ', messages.errors.join( '\n\n' ) ); - - // Don't go beyond this point at this time. - return; - } - - // CI. - if ( - process.env.CI && - ( typeof process.env.CI !== 'string' || process.env.CI.toLowerCase() !== 'false' ) && - messages.warnings.length - ) { - console.log( - chalk.yellow( - '\nTreating warnings as errors because process.env.CI = true.\n' + - 'Most CI servers set it automatically.\n' - ) - ); - console.log( messages.warnings.join( '\n\n' ) ); - } - - // Start the build. - console.log( `\n ${ chalk.dim( 'Let\'s build and compile the files...' ) }` ); - console.log( '\nāœ… ', chalk.black.bgGreen( ' Built successfully! \n' ) ); - - console.log( - '\n\n', - 'File sizes after gzip:', - '\n\n', - getFileSize( fileBuildJS ), - `${ chalk.dim( 'ā€” ./dist/' ) }`, - `${ chalk.green( 'blocks.build.js' ) }`, - '\n', - getFileSize( fileEditorCSS ), - `${ chalk.dim( 'ā€” ./dist/' ) }`, - `${ chalk.green( 'blocks.editor.build.css' ) }`, - - '\n', - getFileSize( fileStyleCSS ), - `${ chalk.dim( 'ā€” ./dist/' ) }`, - `${ chalk.green( 'blocks.style.build.css' ) }`, - '\n\n' - ); - - console.log( '\nšŸ‘Œ ', chalk.dim( ' Support Awais via VSCode Power User at https://VSCode.pro ā†’ \n' ) ); - - return true; - } ); + // compiler.run( ( err, stats ) => { + // clearConsole(); + + // if ( err ) { + // return console.log( err ); + // } + + // // Get the messages formatted. + // const messages = formatWebpackMessages( stats.toJson( {}, true ) ); + + // // If there are errors just show the errors. + // if ( messages.errors.length ) { + // // Only keep the first error. Others are often indicative + // // of the same problem, but confuse the reader with noise. + // if ( messages.errors.length > 1 ) { + // messages.errors.length = 1; + // } + // // Formatted errors. + // clearConsole(); + // console.log( '\nāŒ ', chalk.black.bgRed( ' Failed to compile build. \n' ) ); + // console.log( '\nšŸ‘‰ ', messages.errors.join( '\n\n' ) ); + + // // Don't go beyond this point at this time. + // return; + // } + + // // CI. + // if ( + // process.env.CI && + // ( typeof process.env.CI !== 'string' || process.env.CI.toLowerCase() !== 'false' ) && + // messages.warnings.length + // ) { + // console.log( + // chalk.yellow( + // '\nTreating warnings as errors because process.env.CI = true.\n' + + // 'Most CI servers set it automatically.\n' + // ) + // ); + // console.log( messages.warnings.join( '\n\n' ) ); + // } + + // // Start the build. + // console.log( `\n ${ chalk.dim( 'Let\'s build and compile the files...' ) }` ); + // console.log( '\nāœ… ', chalk.black.bgGreen( ' Built successfully! \n' ) ); + + // console.log( + // '\n\n', + // 'File sizes after gzip:', + // '\n\n', + // getFileSize( fileBuildJS ), + // `${ chalk.dim( 'ā€” ./dist/' ) }`, + // `${ chalk.green( 'blocks.build.js' ) }`, + // '\n', + // getFileSize( fileEditorCSS ), + // `${ chalk.dim( 'ā€” ./dist/' ) }`, + // `${ chalk.green( 'blocks.editor.build.css' ) }`, + + // '\n', + // getFileSize( fileStyleCSS ), + // `${ chalk.dim( 'ā€” ./dist/' ) }`, + // `${ chalk.green( 'blocks.style.build.css' ) }`, + // '\n\n' + // ); + + // console.log( '\nšŸ‘Œ ', chalk.dim( ' Support Awais via VSCode Power User at https://VSCode.pro ā†’ \n' ) ); + + // return true; + // } ); } build( config ); From 8b2704fbc33f7602b9f8d567537edb2c599cdc03 Mon Sep 17 00:00:00 2001 From: Ashar Irfan Date: Sun, 5 Apr 2020 00:29:14 +0500 Subject: [PATCH 7/8] =?UTF-8?q?=F0=9F=91=8C=20IMPROVE:=20Webpack=20config?= =?UTF-8?q?=20paths?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/cgb-scripts/config/paths.js | 12 ++++++++++-- packages/cgb-scripts/scripts/build.js | 3 ++- packages/cgb-scripts/scripts/start.js | 3 ++- 3 files changed, 14 insertions(+), 4 deletions(-) diff --git a/packages/cgb-scripts/config/paths.js b/packages/cgb-scripts/config/paths.js index df99a529..6c62960c 100644 --- a/packages/cgb-scripts/config/paths.js +++ b/packages/cgb-scripts/config/paths.js @@ -7,6 +7,10 @@ const path = require( 'path' ); const fs = require( 'fs' ); +// @remove-on-eject-begin +const resolvePkg = require( 'resolve-pkg' ); +// @remove-on-eject-end + // Make sure any symlinks in the project folder are resolved: const pluginDir = fs.realpathSync( process.cwd() ); const resolvePlugin = relativePath => path.resolve( pluginDir, relativePath ); @@ -17,7 +21,9 @@ module.exports = { pluginSrc: resolvePlugin( 'src' ), // Plugin src folder path. pluginBlocksJs: resolvePlugin( 'src/blocks.js' ), yarnLockFile: resolvePlugin( 'yarn.lock' ), - pluginDist: resolvePlugin( 'dist' ), // We are in ./dist folder already so the path '.' resolves to ./dist/. + pluginDist: resolvePlugin( 'dist' ), + devConfig: 'config/webpack.config.dev.js', + prodConfig: 'config/webpack.config.prod.js', }; // @remove-on-eject-begin @@ -28,10 +34,12 @@ module.exports = { dotenv: resolvePlugin( '.env' ), pluginSrc: resolvePlugin( 'src' ), pluginBlocksJs: resolvePlugin( 'src/blocks.js' ), - pluginDist: resolvePlugin( 'dist' ), // We are in ./dist folder already so the path '.' resolves to ./dist/. + pluginDist: resolvePlugin( 'dist' ), yarnLockFile: resolvePlugin( 'yarn.lock' ), appPath: resolvePlugin( '.' ), // These properties only exist before ejecting: ownPath: resolveOwn( '.' ), + devConfig: resolvePkg( 'cgb-scripts/config/webpack.config.dev.js', { cwd: __dirname } ), + prodConfig: resolvePkg( 'cgb-scripts/config/webpack.config.prod.js', { cwd: __dirname } ), }; // @remove-on-eject-end diff --git a/packages/cgb-scripts/scripts/build.js b/packages/cgb-scripts/scripts/build.js index bbded906..3169328c 100644 --- a/packages/cgb-scripts/scripts/build.js +++ b/packages/cgb-scripts/scripts/build.js @@ -27,11 +27,12 @@ const fileSize = require( 'filesize' ); const gzipSize = require( 'gzip-size' ); const spawn = require( 'cgb-dev-utils/crossSpawn' ); const resolvePkg = require( 'resolve-pkg' ); -const config = resolvePkg( 'cgb-scripts/config/webpack.config.prod', { cwd: __dirname } ); const wpScripts = resolvePkg( '@wordpress/scripts/bin/wp-scripts.js', { cwd: __dirname } ); const cgbDevUtilsPath = resolvePkg( 'cgb-dev-utils', { cwd: __dirname } ); const clearConsole = require( cgbDevUtilsPath + '/clearConsole' ); const formatWebpackMessages = require( cgbDevUtilsPath + '/formatWebpackMessages' ); +const paths = require( '../config/paths' ); +const config = paths.prodConfig; // Build file paths. const theCWD = process.cwd(); diff --git a/packages/cgb-scripts/scripts/start.js b/packages/cgb-scripts/scripts/start.js index 2b018da4..7dce5a1e 100644 --- a/packages/cgb-scripts/scripts/start.js +++ b/packages/cgb-scripts/scripts/start.js @@ -25,11 +25,12 @@ const chalk = require( 'chalk' ); const webpack = require( 'webpack' ); const spawn = require( 'cgb-dev-utils/crossSpawn' ); const resolvePkg = require( 'resolve-pkg' ); -const config = resolvePkg( 'cgb-scripts/config/webpack.config.dev.js', { cwd: __dirname } ); const cgbDevUtilsPath = resolvePkg( 'cgb-dev-utils', { cwd: __dirname } ); const wpScripts = resolvePkg( '@wordpress/scripts/bin/wp-scripts.js', { cwd: __dirname } ); const clearConsole = require( cgbDevUtilsPath + '/clearConsole' ); const formatWebpackMessages = require( cgbDevUtilsPath + '/formatWebpackMessages' ); +const paths = require( '../config/paths' ); +const config = paths.devConfig; // Don't run below node 8. const currentNodeVersion = process.versions.node; From 7276e74105171c978c62f130f6e6edac5fd20cde Mon Sep 17 00:00:00 2001 From: Ashar Irfan Date: Sun, 5 Apr 2020 00:33:06 +0500 Subject: [PATCH 8/8] =?UTF-8?q?=E2=9D=8C=20REMOVE:=20Babel=20presets=20add?= =?UTF-8?q?ition=20from=20eject=20routine?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/cgb-scripts/scripts/eject.js | 90 +++++++++++++-------------- 1 file changed, 45 insertions(+), 45 deletions(-) diff --git a/packages/cgb-scripts/scripts/eject.js b/packages/cgb-scripts/scripts/eject.js index 001afbfa..7bda13c3 100644 --- a/packages/cgb-scripts/scripts/eject.js +++ b/packages/cgb-scripts/scripts/eject.js @@ -213,51 +213,51 @@ inquirer console.log( '\n šŸ‘‰ ', `${ chalk.black.bgYellow( ' Configuring package.json... ' ) }`, '\n' ); // Add Babel config. - console.log( ` āž• Adding ${ green( 'Babel' ) } preset.` ); - appPackage.babel = { - presets: [ - [ - 'env', - { - modules: false, - targets: { - browsers: [ - 'last 2 Chrome versions', - 'last 2 Firefox versions', - 'last 2 Safari versions', - 'last 2 iOS versions', - 'last 1 Android version', - 'last 1 ChromeAndroid version', - 'ie 11', - ], - }, - }, - ], - ], - plugins: [ - [ 'transform-object-rest-spread' ], - [ - 'transform-object-rest-spread', - { - useBuiltIns: true, - }, - ], - [ - 'transform-react-jsx', - { - pragma: 'wp.element.createElement', - }, - ], - [ - 'transform-runtime', - { - helpers: false, - polyfill: false, - regenerator: true, - }, - ], - ], - }; + // console.log( ` āž• Adding ${ green( 'Babel' ) } preset.` ); + // appPackage.babel = { + // presets: [ + // [ + // 'env', + // { + // modules: false, + // targets: { + // browsers: [ + // 'last 2 Chrome versions', + // 'last 2 Firefox versions', + // 'last 2 Safari versions', + // 'last 2 iOS versions', + // 'last 1 Android version', + // 'last 1 ChromeAndroid version', + // 'ie 11', + // ], + // }, + // }, + // ], + // ], + // plugins: [ + // [ 'transform-object-rest-spread' ], + // [ + // 'transform-object-rest-spread', + // { + // useBuiltIns: true, + // }, + // ], + // [ + // 'transform-react-jsx', + // { + // pragma: 'wp.element.createElement', + // }, + // ], + // [ + // 'transform-runtime', + // { + // helpers: false, + // polyfill: false, + // regenerator: true, + // }, + // ], + // ], + // }; // // Add ESlint config ā€” already there. // console.log( ` Adding ${ cyan( 'ESLint' ) } configuration` );