10up Scripts

A collection of bundled scripts for 10up development.

Install

npm install --save-dev @10up/scripts

Scripts

10up-scripts build

Builds CSS and JavaScript files. This uses the 10up configuration for Webpack. Check out the entry points below to see what is built.

10up-scripts start

Builds CSS and JavaScript and watches files for changes.

10up-scripts format-js

Fixes JavaScript formatting issues via ESLint with 10up configuration.

10up-scripts lint-js

Runs ESLint with 10up configuration

10up-scripts lint-style

Runs Stylelint with 10up configuration.

10up-scripts test-unit-jest

Runs Jest on current project.

10up-scripts check-engines

Verify the Node and npm satisfy minimum package.json versions.

Project is a fork of wp-scripts

Configuration and Extension

Under the hood 10up-scripts uses Webpack, Postcss, Stylelint, Jest, Babel, and Eslint. By default the package uses 10up standard configurations for all of these tools. However, configuration can be overrided or extended for each tool.

Entry points

This package uses Webpack under the hood and uses the following entry points:

{
    admin: './assets/js/admin/admin.js',
    blocks: './includes/blocks/blocks.js',
    frontend: './assets/js/frontend/frontend.js',
    shared: './assets/js/shared/shared.js',
    styleguide: './assets/js/styleguide/styleguide.js',

    'admin-style': './assets/css/admin/admin-style.css',
    'editor-style': './assets/css/frontend/editor-style.css',
    'shared-style': './assets/css/shared/shared-style.css',
    style: './assets/css/frontend/style.css',
    'styleguide-style': './assets/css/styleguide/styleguide.css'
}

To override you will need to define @10up/scripts.entry in your package.json file. For example:

{
    "@10up/scripts": {
        "entry": {
            "myEntry: ...
        }
	...
    }
}

WordPress Dependecy Extraction

10up scripts will automatically run the dependecy extraction plugin. If you don't want to run the dependecy extraction plugin you can disable it by setting a ENV var TENUP_NO_EXTERNAL or by setting the wpDependencyExternals setting to false in package.json.

{
    "@10up/scripts": {
        "entry": {
            "myEntry: ...
        },
        "wpDependencyExternals": false
	...
    }
}

Browsersync

10up Scripts starts Browsersync automatically. All you need to do is change @10up/scripts.devURL in your package.json to point to your local development URL:

{
    "@10up/scripts": {
        "devURL": "https://project.test",
	...
    }
}

Webpack

10up-scripts will use 10up standard Webpack configuration located in /config/webpack.config.js UNLESS you define a Webpack config file in your project e.g. you have a webpack.config.js in your project root. If you just need to change entry points, see the Entry Points section below.

Here's an example webpack.config.js you could add to the root of your project to extend 10up/scripts Webpack.

const defaultConfig = require('@10up/scripts/config/webpack.config');
module.exports = {
	...defaultConfig,
	myObject: {
        stuffHere: true
    }
};

ESLint

10up-scripts will use 10up standard ESLint configuration located in /config/.eslintrc.js which extends @10up/eslint-config UNLESS you define a ESLint config file in your project e.g. you have a .eslintrc.js in your project root.

Stylelint

10up-scripts will use 10up standard Stylelint configuration located in /config/stylelint.config.js which extends @10up/stylelint-config UNLESS you define a Stylelint config file in your project e.g. you have a stylelint.config.js in your project root.

PostCSS

10up-scripts will use 10up standard PostCSS configuration located in /config/postcss.config.js UNLESS you define a PostCSS config file in your project e.g. you have a postcss.config.js in your project root.

Babel

10up-scripts will use 10up standard Babel configuration of @10up/babel-preset-default UNLESS you define a Babel config file in your project e.g. you have a .babelrc in your project root.

Support Level

Active: 10up is actively working on this, and we expect to continue work for the foreseeable future including keeping tested up to the most recent version of WordPress. Bug reports, feature requests, questions, and pull requests are welcome.

Like what you see?