Kselax.ru

Hacker Kselax – the best hacker in the world

Menu
  • Blog
  • Contacts
  • wp plugin generator
  • English
    • Русский
Menu

Webpack sclerotic

Posted on 21 June, 201921 June, 2019 by admin

How to set up webpack to work with React

React is written in es6 so we have to transpile es6 to es5, so we have to use bable. Wabpack uses a concepts ‘loaders‘. Loader is a transformer. We want to install babel-loader that will transform the code. Obviously babel-loader makes use of babel and babel must be configured to use bunch of presets. We need two presets:

  1. babel preset env to transform es6 to es5
  2. babel preset react to transform JSX to es5

Let’s install packages

1
npm i @babel/core babel-loader @babel/preset-env @babel/preset-react --save-dev

and to the webpack.config.js add the module

1
2
3
4
5
6
7
8
9
10
11
12
13
14
module: {
  rules: [
    {
      test: /\.m?js$/,
      exclude: /(node_modules|bower_components)/,
      use: {
        loader: 'babel-loader',
        options: {
          presets: ['@babel/preset-env', "@babel/preset-react"]
        }
      }
    }
  ]
}

We use options to pass presets. We can use a .babelrc file with the code

1
2
3
{
  "presets": ["@babel/preset-env", "@babel/preset-react"]
}

so that’s it now run npx webpack and and you are able to handle es6 and jsx.

 

How to watch  changes

Watch and watch options

webpack supports a file watching we can enable it by adding to the webpack.config.js

1
watch: true,

on the whole add such config

1
2
3
4
5
6
7
8
9
module.exports = {
  //...
  watch: true,
  watchOptions: {
    aggregateTimeout: 300,
    poll: 1000,
    ignored: [/node_modules/]
  }
}

you can ignore a lot of files by adding

1
ignored: ['files/**/*.js', 'node_modules']

to know when it is finished compile in the console use

1
npx webpack --watch --info-verbosity verbose

 

How to add eslint to webpack

We have to install packages

1
npm i babel-eslint eslint eslint-loader eslint-plugin-react

Then add rule to the webpack.config.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
module: {
    rules: [
      //...
      {
        enforce: "pre",
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "eslint-loader",
          options: {
            emitWornings: true
          }
        }
      },
      //...
    ]
//...

It should be added after babel. The direction from the bottom to the top. babel should be closer to the top.

Then create an eslint config file .eslintrc and put there the rules

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
{
  "extends": [
    "eslint:recommended",
    "plugin:react/recommended"
  ],
  "parserOptions": {
    "ecmaVersion": 6,
    "sourceType": "module",
    "ecmaFeatures": {
      "jsx": true,
      "modules": true,
      "experimentalObjectRestSpread": true
    }
  },
  "plugins": [
    "eslint-plugin-react"
  ],
  "parser": "babel-eslint",
  "rules": {
    "react/jsx-uses-react": "error",
    "react/jsx-uses-vars": "error",
    "no-unused-vars": "warn",
    "no-console": "off",
    "react/jsx-key": "warn",
    "react/no-unknown-property": "warn"
  },
  "env": {
    "browser": true,
    "node": true,
    "jasmine": true,
  },
}

That’s it, now everything should work.

 

 

the end

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Categories

  • bash (1)
  • English (9)
  • JavaScript (4)
  • node.js (22)
  • photoshop (1)
  • php (3)
  • React (9)
  • sclerotic (6)
  • Ubuntu (10)
  • Uncategorized (13)
  • Wordpress (1)

Tags

Ajax apache2 automation bash chrome-extension command line editor ejs email English English-grammar framework functions git graphql handlebars hybrid app installation javascript js linux newbie node.js node.js javascript nodemailer npm objects Performance php phpmyadmin playonlinux promise rabbitmq React react-router redis reverse-proxy session shell socket.io sublime text 3 time zones ubuntu unity webpack

Recent Comments

  • damien on How to install npm and nodejs the latest versions on ubuntu
  • Cam on How to install npm and nodejs the latest versions on ubuntu
  • Pierre on socket.io with apache as a reverse proxy on the CentOS
  • admin on How to use react-router with a few languages
  • admin on How to install npm and nodejs the latest versions on ubuntu
©2021 Kselax.ru Theme by ThemeGiant