Build: Split out vendor files into separate, shared JS & CSS files (https://github.com/woocommerce/woocommerce-blocks/pull/314)

* Add splitchunks to webpack config to combine node_modules imports into a vendors script

* Move legacy CSS into legacy folder

* Get components css without needing to use relative path

* Add vendors css file
This commit is contained in:
Kelly Dwan 2019-01-14 15:33:17 -05:00 committed by GitHub
parent 162c55d0cc
commit 71b448f8b6
5 changed files with 38 additions and 10 deletions

View File

@ -1,5 +1,5 @@
// Import the woocommerce components stylesheet
@import "../../node_modules/@woocommerce/components/build-style/style.css";
@import "~@woocommerce/components/build-style/style.css";
// Hack to hide preview overflow.
.editor-block-preview__content {

View File

@ -5,7 +5,7 @@ const { InspectorControls, BlockControls } = wp.editor;
const { Toolbar, Button, Dashicon, RangeControl, Tooltip, SelectControl } = wp.components;
const { apiFetch } = wp;
import '../../css/products-block.scss';
import './products-block.scss';
import { ProductsSpecificSelect } from './views/specific-select.jsx';
import { ProductsCategorySelect } from './views/category-select.jsx';

View File

@ -45,6 +45,17 @@ const GutenbergBlocksConfig = {
libraryTarget: 'this',
},
externals,
optimization: {
splitChunks: {
cacheGroups: {
commons: {
test: /[\\/]node_modules[\\/]/,
name: 'vendors',
chunks: 'all',
},
},
},
},
module: {
rules: [
{

View File

@ -159,6 +159,7 @@ function wgpb_register_scripts() {
'wp-i18n',
'wp-url',
'lodash',
'wc-vendors',
);
// @todo Remove this dependency (as it adds a separate react instance).
@ -170,6 +171,14 @@ function wgpb_register_scripts() {
true
);
wp_register_script(
'wc-vendors',
plugins_url( 'build/vendors.js', __FILE__ ),
array(),
wgpb_get_file_version( '/build/vendors.js' ),
true
);
wp_register_script(
'wc-handpicked-products',
plugins_url( 'build/handpicked-products.js', __FILE__ ),
@ -238,6 +247,13 @@ function wgpb_register_scripts() {
wp_set_script_translations( 'woocommerce-blocks', 'woo-gutenberg-products-block' );
}
wp_register_style(
'wc-vendors',
plugins_url( 'build/vendors.css', __FILE__ ),
array(),
wgpb_get_file_version( '/build/vendors.css' )
);
wp_register_style(
'wc-products-grid',
plugins_url( 'build/products-grid.css', __FILE__ ),
@ -248,56 +264,56 @@ function wgpb_register_scripts() {
wp_register_style(
'wc-handpicked-products-editor',
plugins_url( 'build/handpicked-products.css', __FILE__ ),
array( 'wp-edit-blocks', 'wc-products-grid' ),
array( 'wc-vendors', 'wp-edit-blocks', 'wc-products-grid' ),
wgpb_get_file_version( '/build/handpicked-products.css' )
);
wp_register_style(
'wc-product-best-sellers-editor',
plugins_url( 'build/product-best-sellers.css', __FILE__ ),
array( 'wp-edit-blocks', 'wc-products-grid' ),
array( 'wc-vendors', 'wp-edit-blocks', 'wc-products-grid' ),
wgpb_get_file_version( '/build/product-best-sellers.css' )
);
wp_register_style(
'wc-product-category-editor',
plugins_url( 'build/product-category.css', __FILE__ ),
array( 'wp-edit-blocks', 'wc-products-grid' ),
array( 'wc-vendors', 'wp-edit-blocks', 'wc-products-grid' ),
wgpb_get_file_version( '/build/product-category.css' )
);
wp_register_style(
'wc-product-new-editor',
plugins_url( 'build/product-new.css', __FILE__ ),
array( 'wp-edit-blocks', 'wc-products-grid' ),
array( 'wc-vendors', 'wp-edit-blocks', 'wc-products-grid' ),
wgpb_get_file_version( '/build/product-new.css' )
);
wp_register_style(
'wc-product-on-sale-editor',
plugins_url( 'build/product-on-sale.css', __FILE__ ),
array( 'wp-edit-blocks', 'wc-products-grid' ),
array( 'wc-vendors', 'wp-edit-blocks', 'wc-products-grid' ),
wgpb_get_file_version( '/build/product-on-sale.css' )
);
wp_register_style(
'wc-product-top-rated-editor',
plugins_url( 'build/product-top-rated.css', __FILE__ ),
array( 'wp-edit-blocks', 'wc-products-grid' ),
array( 'wc-vendors', 'wp-edit-blocks', 'wc-products-grid' ),
wgpb_get_file_version( '/build/product-top-rated.css' )
);
wp_register_style(
'woocommerce-products-block-editor',
plugins_url( 'build/products-block.css', __FILE__ ),
array( 'wp-edit-blocks' ),
array( 'wc-vendors', 'wp-edit-blocks' ),
wgpb_get_file_version( '/build/products-block.css' )
);
wp_register_style(
'wc-featured-product-editor',
plugins_url( 'build/featured-product.css', __FILE__ ),
array( 'wp-edit-blocks' ),
array( 'wc-vendors', 'wp-edit-blocks' ),
wgpb_get_file_version( '/build/featured-product.css' )
);
@ -312,6 +328,7 @@ function wgpb_register_scripts() {
*/
function wgpb_get_file_version( $file ) {
if ( defined( 'SCRIPT_DEBUG' ) && SCRIPT_DEBUG ) {
$file = trim( $file, '/' );
return filemtime( plugin_dir_path( __FILE__ ) . $file );
}
return WGPB_VERSION;