Scripts

Collection of reusable scripts for Teft. For convenience, every tool provided in this package comes with a recommended configuration.

Installation

Install the module

npm install @teft/scripts --save-dev

Setup

This is a CLI and exposes a binary called teft-scripts so you can call it directly. However this module is designed to be configured using the scripts section in the package.json file of your project.

Example:

{
	"scripts": {
		"build": "teft-scripts build",
		"watch": "teft-scripts watch",
		"start": "teft-scripts start",
		"lint:css": "teft-scripts lint-style '**/*.css'",
		"lint:js": "teft-scripts lint-js ."
	}
}

Available Scripts

build

Transforms your code according the configuration provided so it's ready for production and optimized for the best performance. The entry point for your project's code should be located in src/index.js. The output generated will be written to build/index.js. This script exits after producing a single build.

Example:

{
	"scripts": {
		"build": "teft-scripts build"
	}
}

This is how you execute the script with presented setup:

• npm run build - builds the code for production.

Advanced information

This script uses webpack 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 @teft/scripts packages. Learn more in the Advanced Usage section.

lint-js

Helps enforce coding style guidelines for your JavaScript files.

Example:

{
	"scripts": {
		"lint:js": "teft-scripts lint-js ."
	}
}

This is how you execute the script with presented setup:

• npm run lint:js - lints JavaScript files in the entire project's directories.

Advanced information

It uses eslint with the set of recommended rules defined in @dekode/eslint-plugin npm package. You can override default rules with your own as described in eslint docs. Learn more in the Advanced Usage section.

lint-style

Helps enforce coding style guidelines for your style files.

Example:

{
	"scripts": {
		"lint:css": "teft-scripts lint-style '**/*.css'"
	}
}

This is how you execute the script with presented setup:

• npm run lint:css - lints CSS files in the whole project's directory.

Advanced information

It uses stylelint with the stylelint-config-wordpress configuration per the WordPress CSS Coding Standards. You can override them with your own rules as described in stylelint user guide. Learn more in the Advanced Usage section.

watch

Transforms your code according the configuration provided so it's ready for development. The script will automatically rebuild if you make changes to the code, and you will see the build errors in the console. The entry point for your project's code should be located in src/index.js. The output generated will be written to build/index.js. For single builds, better suited for production, see the build script.

Example:

{
	"scripts": {
		"watch": "teft-scripts watch"
	}
}

This is how you execute the script with presented setup:

• npm run watch - starts the build for development.

Advanced information

This script uses webpack 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 @teft/scripts packages. Learn more in the Advanced Usage section.

start

Same as watch, but starts a browser-sync config to auto reload the page on changes.

Example:

{
	"scripts": {
		"start": "teft-scripts start"
	}
}

This is how you execute the script with presented setup:

• npm start -- --proxy=http://teft.io - starts the build for development with a proxy to teft.io.

Advanced Usage

In general, this package should be used with the set of recommended config files. While it is possible to override every single config file provided, if you have to do it, it means that your use case is more complex than anticipated. If that happens, it would be better to avoid using the whole abstraction layer and set up your project with full control over tooling used.

Webpack config

The build command use webpack behind the scenes. Webpack is a tool that helps you transform your code into something else. For example: it can take code written in ESNext and output ES5 compatible code that is minified for production.

Default webpack config

@teft/scripts bundles a default webpack config. The defaults are:

• Entry: src/index.js
• Output: build/index.js

Provide your own webpack config

Should there be any situation where you want to provide your own webpack config, you can do so. The build command will use your provided file when:

• the command receives a --config argument. Example: teft-scripts build --config my-own-webpack-config.js.
• there is a file called webpack.config.js or webpack.config.babel.js in the top-level directory of your package (at the same level than your package.json).

Extending the webpack config

To extend the provided webpack config, or replace subsections within the provided webpack config, you can provide your own webpack.config.js file, require the provided webpack.config.js file, and use the spread operator to import all of or part of the provided configuration.

In the example below, a webpack.config.js file is added to the root folder extending the provided webpack config to include @svgr/webpack and url-loader:

const defaultConfig = require("./node_modules/@teft/scripts/config/webpack.config");

module.exports = {
  ...defaultConfig,
  module: {
    ...defaultConfig.module,
    rules: [
      ...defaultConfig.module.rules,
      {
        test: /\.svg$/,
        use: ["@svgr/webpack", "url-loader"]
      }
    ]
  }
};

If you follow this approach, please, be aware that future versions of this package may change what webpack and Babel plugins we bundle, default configs, etc. Should those changes be necessary, they will be registered in the package's CHANGELOG, so make sure to read it before upgrading.

ESLint config

Teft uses the recommended rules defined in @dekode/eslint-plugin npm package. You can override default rules with your own file.

Provide your own ESLint config

Should there be any situation where you want to provide your own eslint config, you can do so. The lint-js command will use your provided file when:

• the command receives a --config argument. Example: teft-scripts lint-js --config my-own-eslint-config.
• there is a file called .eslintrc.js, .eslintrc.yaml, .eslintrc.yml, .eslintrc.json or .eslintrc in the top-level directory of your package (at the same level than your package.json).

Extending the ESLint config

To extend the provided eslint config, or replace subsections within the provided eslint config, you can can provide your own config.

Example on a .eslintrc.js file:

module.exports = {
  root: true,
  extends: [
      'plugin:@dekode/base',
      'plugin:@dekode/react',
  ],
  plugins: [
      '@dekode',
  ],
  rules: [
    ...
  ]
};

See the eslint docs for more information about adding your own config.

Stylelint config

Teft uses the rules defined in the stylelint-config-wordpress configuration. You can override default rules with your own file.

Provide your own stylelint config

Should there be any situation where you want to provide your own stylelint config, you can do so. The lint-style command will use your provided file when:

• the command receives a --config argument. Example: teft-scripts lint-style --config my-own-stylelint-config.
• there is a file called .stylelintrc, .stylelintrc.js, .stylelintrc.json, .stylelintrc.yml or .stylelint.config.js in the top-level directory of your package (at the same level than your package.json).

Extending the stylelint config

To extend the provided stylelint config, or replace subsections within the provided style config, you can can provide your own config.

Example on a .stylelintrc.js file:

module.exports = {
  module.exports = {
    extends: [ '@teft/stylelint-config' ],
    rules: {
      ...
    },
  }
};

See the stylelint user guide for more information about adding your own config.