From 5b8ab5e104091ee4e9012a4f6c34f19fdb7d89c0 Mon Sep 17 00:00:00 2001 From: Ryan Welcher Date: Fri, 28 Feb 2020 14:46:18 -0500 Subject: [PATCH] Adds DependencyExtractionWebpackPlugin to the plugin scaffold. --- config/webpack.common.js | 4 +++ includes/functions/core.php | 64 ++++++++++++++++++++++++++++++++----- package-lock.json | 58 ++++++++++++++++++++++++++------- package.json | 3 +- 4 files changed, 109 insertions(+), 20 deletions(-) diff --git a/config/webpack.common.js b/config/webpack.common.js index 14c9c51..34d321e 100644 --- a/config/webpack.common.js +++ b/config/webpack.common.js @@ -8,6 +8,7 @@ const MiniCssExtractPlugin = require( 'mini-css-extract-plugin' ); const StyleLintPlugin = require( 'stylelint-webpack-plugin' ); const WebpackBar = require( 'webpackbar' ); const ImageminPlugin = require( 'imagemin-webpack-plugin' ).default; +const DependencyExtractionWebpackPlugin = require( '@wordpress/dependency-extraction-webpack-plugin' ); const isProduction = 'production' === process.env.NODE_ENV; @@ -152,5 +153,8 @@ module.exports = { // Fancy WebpackBar. new WebpackBar(), + + // Extract depenencies + new DependencyExtractionWebpackPlugin( { injectPolyfill: true, combineAssets: true } ), ], }; diff --git a/includes/functions/core.php b/includes/functions/core.php index 88f8b61..0d271a3 100644 --- a/includes/functions/core.php +++ b/includes/functions/core.php @@ -104,6 +104,54 @@ function script_url( $script, $context ) { } +/** + * Retrieve the list of script dependencies for the script being loaded. + * + * @param string $script Script file name (no .js extension) + * + * @return array The array containing the dependencies and version + */ +function script_dependencies( $script ) { + // The file hasn't been created + if ( ! file_exists( TENUP_SCAFFOLD_PATH . '/dist/assets.php' ) ) { + return []; + } + + // include the assets. + $assets = include TENUP_SCAFFOLD_PATH . '/dist/assets.php'; + + // Does this script have depenedencies + if ( ! isset( $assets[ "js/{$script}.js" ] ) ) { + return []; + } + + return $assets[ "js/{$script}.js" ]['dependencies']; +} + +/** + * Retrieve the version for the script + * + * @param string $script Script file name (no .js extension) + * + * @return string Version + */ +function script_version( $script ) { + // The file hasn't been created + if ( ! file_exists( TENUP_SCAFFOLD_PATH . '/dist/assets.php' ) ) { + return TENUP_SCAFFOLD_VERSION; + } + + // include the assets. + $assets = include TENUP_SCAFFOLD_PATH . '/dist/assets.php'; + + // Does this script have depenedencies + if ( ! isset( $assets[ "js/{$script}.js" ] ) ) { + return TENUP_SCAFFOLD_VERSION; + } + + return $assets[ "js/{$script}.js" ]['version']; +} + /** * Generate an URL to a stylesheet, taking into account whether SCRIPT_DEBUG is enabled. * @@ -132,16 +180,16 @@ function scripts() { wp_enqueue_script( 'tenup_scaffold_shared', script_url( 'shared', 'shared' ), - [], - TENUP_SCAFFOLD_VERSION, + array_merge( script_dependencies( 'shared' ), [] ), // Add any manual enqeues to the second array. + script_version( 'shared' ), true ); wp_enqueue_script( 'tenup_scaffold_frontend', script_url( 'frontend', 'frontend' ), - [], - TENUP_SCAFFOLD_VERSION, + array_merge( script_dependencies( 'frontend' ), [] ), // Add any manual enqeues to the second array. + script_version( 'frontend' ), true ); @@ -157,16 +205,16 @@ function admin_scripts() { wp_enqueue_script( 'tenup_scaffold_shared', script_url( 'shared', 'shared' ), - [], - TENUP_SCAFFOLD_VERSION, + array_merge( script_dependencies( 'shared' ), [] ), // Add any manual enqeues to the second array. + script_version( 'shared' ), true ); wp_enqueue_script( 'tenup_scaffold_admin', script_url( 'admin', 'admin' ), - [], - TENUP_SCAFFOLD_VERSION, + array_merge( script_dependencies( 'admin' ), [] ), // Add any manual enqeues to the second array. + script_version( 'admin' ), true ); diff --git a/package-lock.json b/package-lock.json index caa89c1..0eb6aa3 100644 --- a/package-lock.json +++ b/package-lock.json @@ -2304,6 +2304,17 @@ "@xtuc/long": "4.2.2" } }, + "@wordpress/dependency-extraction-webpack-plugin": { + "version": "2.3.0", + "resolved": "https://registry.npmjs.org/@wordpress/dependency-extraction-webpack-plugin/-/dependency-extraction-webpack-plugin-2.3.0.tgz", + "integrity": "sha512-FwEN0PuFr3Q5IdDLgerkIspiHkePNbzem71R3RlUevaSmnw+iH9/0Jzg4uIQ8KCMBpbrn1gAmhgdaTgTDn3EfQ==", + "dev": true, + "requires": { + "json2php": "^0.0.4", + "webpack": "^4.8.3", + "webpack-sources": "^1.3.0" + } + }, "@xtuc/ieee754": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/@xtuc/ieee754/-/ieee754-1.2.0.tgz", @@ -6280,7 +6291,8 @@ "ansi-regex": { "version": "2.1.1", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "aproba": { "version": "1.2.0", @@ -6301,12 +6313,14 @@ "balanced-match": { "version": "1.0.0", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "brace-expansion": { "version": "1.1.11", "bundled": true, "dev": true, + "optional": true, "requires": { "balanced-match": "^1.0.0", "concat-map": "0.0.1" @@ -6321,17 +6335,20 @@ "code-point-at": { "version": "1.1.0", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "concat-map": { "version": "0.0.1", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "console-control-strings": { "version": "1.1.0", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "core-util-is": { "version": "1.0.2", @@ -6448,7 +6465,8 @@ "inherits": { "version": "2.0.3", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "ini": { "version": "1.3.5", @@ -6460,6 +6478,7 @@ "version": "1.0.0", "bundled": true, "dev": true, + "optional": true, "requires": { "number-is-nan": "^1.0.0" } @@ -6474,6 +6493,7 @@ "version": "3.0.4", "bundled": true, "dev": true, + "optional": true, "requires": { "brace-expansion": "^1.1.7" } @@ -6481,12 +6501,14 @@ "minimist": { "version": "0.0.8", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "minipass": { "version": "2.3.5", "bundled": true, "dev": true, + "optional": true, "requires": { "safe-buffer": "^5.1.2", "yallist": "^3.0.0" @@ -6505,6 +6527,7 @@ "version": "0.5.1", "bundled": true, "dev": true, + "optional": true, "requires": { "minimist": "0.0.8" } @@ -6585,7 +6608,8 @@ "number-is-nan": { "version": "1.0.1", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "object-assign": { "version": "4.1.1", @@ -6597,6 +6621,7 @@ "version": "1.4.0", "bundled": true, "dev": true, + "optional": true, "requires": { "wrappy": "1" } @@ -6682,7 +6707,8 @@ "safe-buffer": { "version": "5.1.2", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "safer-buffer": { "version": "2.1.2", @@ -6718,6 +6744,7 @@ "version": "1.0.2", "bundled": true, "dev": true, + "optional": true, "requires": { "code-point-at": "^1.0.0", "is-fullwidth-code-point": "^1.0.0", @@ -6737,6 +6764,7 @@ "version": "3.0.1", "bundled": true, "dev": true, + "optional": true, "requires": { "ansi-regex": "^2.0.0" } @@ -6780,12 +6808,14 @@ "wrappy": { "version": "1.0.2", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "yallist": { "version": "3.0.3", "bundled": true, - "dev": true + "dev": true, + "optional": true } } }, @@ -8340,6 +8370,12 @@ "integrity": "sha1-nbe1lJatPzz+8wp1FC0tkwrXJlE=", "dev": true }, + "json2php": { + "version": "0.0.4", + "resolved": "https://registry.npmjs.org/json2php/-/json2php-0.0.4.tgz", + "integrity": "sha1-a9haHdpqXdfpECK7JEA8wbfC7jQ=", + "dev": true + }, "json5": { "version": "2.1.1", "resolved": "https://registry.npmjs.org/json5/-/json5-2.1.1.tgz", diff --git a/package.json b/package.json index e3e9d6a..e2737b2 100644 --- a/package.json +++ b/package.json @@ -46,6 +46,7 @@ "@babel/core": "^7.7.7", "@babel/preset-env": "^7.7.7", "@babel/register": "^7.7.7", + "@wordpress/dependency-extraction-webpack-plugin": "^2.3.0", "babel-eslint": "^10.0.3", "babel-loader": "^8.0.6", "browser-sync": "^2.26.7", @@ -60,10 +61,10 @@ "eslint": "^6.8.0", "eslint-loader": "^3.0.3", "husky": "^3.1.0", + "imagemin-webpack-plugin": "^2.4.2", "lint-staged": "^9.5.0", "mini-css-extract-plugin": "^0.9.0", "postcss-import": "^12.0.1", - "imagemin-webpack-plugin": "^2.4.2", "postcss-loader": "^3.0.0", "postcss-preset-env": "^6.7.0", "stylelint": "^9.10.1",