@deloitte-digital-au/babel-preset-app-react

@deloitte-digital-au/babel-preset-react

Ract Babel preset used by Deloitte Digital for our modern web apps.

If you are using our webpack-config package. This is already pre-installed, please read the main instructions to configure this package.

Installing

Prerequisite

To use, you will need to install the Babel cli:

npm install @babel/cli --save-dev 

You may also like to set it up for a tool of your choice.

Install @deloitte-digital-au/babel-preset-react

npm install @deloitte-digital-au/babel-preset-app-react --save-dev

Then create a .babelrc in the root of your project:

{
	"presets": ["@deloitte-digital-au/babel-preset-app-react"]
}

IMPORTANT: Please ensure you polyfill Object.assign for older browsers.

Adding Typing (Optional)

Adding Typescript

npm install @babel/preset-typescript --save-dev 

Then add the typescript preset to your .babelrc

{
	"presets": [
		"@deloitte-digital-au/babel-preset-app-react",
		"@babel/preset-typescript"
	]
}

Adding Flow

npm install  @babel/preset-flow --save-dev

Then add the flow preset to your .babelrc

{
	"presets": [
		"@deloitte-digital-au/babel-preset-app-react",
		"@babel/preset-flow"
	]
}

Changelog

1.0.0

• Upgraded API to expose createConfig function (see breaking changes below)
• Updated loaders for CSS delivery (mini-css-extract-plugin-loader vs style-loader) (see breaking changes below)
• Added loaders for CSS files (previously only SCSS files were supported)
• Improved unit tests for build
• Added functional tests for watch
• Updated dependency vue-loader to v15
• Update babel monorepo dependencies to v7.0.0-beta.55
• Update dependency autoprefixer to v9

Breaking Changes

1.

Previously we exported a single config object. Now we export { baseConfig, createConfig, mergeConfig }.

Previously, the base config was extended like this:

const config = require('@deloitte-digital-au/webpack-config');

config.entry = {
    main: [
        './src/index.js',
    ],
};

module.exports = config;

Now, the base config is extended like this:

const { createConfig } = require('@deloitte-digital-au/webpack-config');

module.exports = createConfig({
    entry: {
        main: [
            './src/index.js',
        ],
    },
});

2.

The module rule matching files with an extension of .js.scss has been removed. If you would like your CSS to be embedded into a JavaScript file and served with style-loader, simply import it into a JavaScript file. If you would like your CSS to be extracted to a CSS file, add it to an entry point or @import it into another CSS / SCSS file.