Improving the Webpack Pipeline

For the first step, I need to add Babel, ESLint, and the ESLint configurations with the following npm packages. For completeness, I’ll also include the normal React/Flux/Hapi/Webpack dependencies from my previous post:

# Install runtime dependencies

npm install --save react react-dom flux hapi hapi-react-views inert vision dateformat superagent babel-register babel-preset-es2015 babel-preset-react # Install build time dependencies

npm install --save-dev webpack babel-core babel-loader babel-eslint eslint eslint-loader eslint-plugin-react eslint-config-airbnb browser-sync browser-sync-webpack-plugin

With those dependencies in place, I can add Babel and ESLint to my existing webpack.config.js file:

First, I added a preLoaders section to ensure the linting occurs before Babel transpiles the code. There I specified that the eslint-loader should look for both .jsx and .js files, only look in the assets directory, and exclude the bundle.js file generated by Babel. Next in the loaders section, I edited the test property regex to include both .js and .jsx files. I also replaced jsx-loader with babel-loader since Babel converts JSX automatically, and I excluded the node_modules folder for faster rendering. For an explanation of Webpack and the other settings, see my previous posts about serving React and Flux with Hapi and Webpack and Adding BrowserSync to Hapi and Webpack.

To finish the ESLint setup, I added this small .eslintrc configuration file to the root of the project, which simply includes the Airbnb configuration I installed earlier:

However, since I use Vim for editing and like to have an extra newline at the end of files, here’s an example of how you can override the ESLint configuration with your own rules:

Any rules explicitly stated in the .eslintrc in the root of your project will override any existing configurations you are extending.

Next, I need to make sure I have this .babelrc file at the root of my project which is required with Babel v6+:

As an optional step, I’m also going to edit my package.json scripts to add a lint script that mimics the eslint-loader settings in my Webpack config. This gives either myself or a build pipeline the option to run ESLint by itself:

“lint”: “eslint --ignore-pattern **/bundle-*.js --ext .js,.jsx assets/**”

At this point, I now have the tools in place to start using ES6 features.