3. Babel, webpack, Vite¶

3.1.1. Initial Setup¶

To set up a new webpack project, you can use:

npx create-new-webpack-app init

npx might prompt you to install create-new-webpack-app if it is not yet installed in the project or globally. You might also get additional packages installed to your project depending on the choices you’ve made during the new webpack application generation.

$ npx create-new-webpack-app init
? Which of the following JS solutions do you want to use? ES6
? Would you like to use Webpack Dev server? Yes
? Do you want to simplify the creation of HTML files for your bundle? Yes
? Do you want to add PWA support? No
? Which of the following CSS solution do you want to use? CSS only
? Do you want to use PostCSS in your project? Yes
? Do you want to extract CSS into separate files? Only for Production
? Which package manager do you want to use? npm
[create-webpack] ?? Initializing a new Webpack project ...
franke:~/tmp/webpack$ ls -al

3.1.2. Create a Repository¶

First add the file .gitignore:

/node_modules/
/package-lock.json
/README.md
/package.json
/package.yaml.new
/dist/

Beautify whitespace in the generated files.

Create a git(1) repository:

git init

and add the initial revision

git add .
git commit -m 'Initial revision'

3.1.3. Modifications to Make It Run Properly¶

1. Install additional packages

   npm install --save-dev "@babel/cli" "core-js"
   

2. In pacakge.json apply the following changes:

      "scripts": {
        "build": "webpack --mode=production --node-env=production",
        "build:dev": "webpack --mode=development",
   +    "build:babel": "npx babel src --out-dir lib",
        "serve": "webpack serve",
        "watch": "webpack --watch"
      },
   

3. In webpack.config.js, add

   exclude: /node_modules/,
   

   to all config => module => rules

   const config = {
       module: {
           rules: [
               {
                   test: /\.(js|jsx)$/i,
                   exclude: /node_modules/,
                   loader: 'babel-loader',
               }
   

   Further adding

   config.devtool = 'inline-source-map';
   

   to

   module.exports = () => {
       if (isProduction) {
           [...]
       } else {
           config.mode = 'development';
           config.devtool = 'inline-source-map';
       }
   

   produces code that can be directly inserted into web pages having CSP “script-src ‘self’”, which blocks eval().

4. In file babel.config.json apply the following changes:

        [
          "@babel/preset-env",
          {
   -        "modules": false
   +        "targets": {
   +          "edge": "17",
   +          "firefox": "31",
   +          "chrome": "67",
   +          "safari": "11.1"
   +        },
   +        "useBuiltIns": "usage",
   +        "corejs": "3.6.5"
          }
        ]
   -  ]
   +  ],
   +  "sourceType": "script",
   +  "sourceMaps": true
    }
   

3.1.4. Enhancements¶

Creat file package.yaml and evaluate this Emacs Lisp snippet

(shell-command "snn -m yaml --key gen_ide.package" t)

add the following line in the body:

scripts:

and execute eIDE command #2.

3.1.5. Babel¶

Babel can be integrated with webpack, see Babel.

Install babel-loader:

npm install --save-dev babel-loader

Configure the loader in webpack.config.js:

{
  "module": {
    "rules": [
      {
        "test": /[.]m?js$/,
        "exclude": /node_modules/,
        "use": {
          "options": {
            "presets": [
              "@babel/preset-env"
            ]
          },
          "loader": "babel-loader"
        }
      }
    ]
  }
}

For more information see the babel/babel-loader repo.

3.1.6. Create babel.config.json configuration file¶

Create a babel.config.json config in your project root and enable some presets.

To start, you can use the env preset, which enables transforms for ES2015+

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

In order to enable the preset you have to define it in your babel.config.json file, like this:

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": {
          "edge": "17",
          "firefox": "31",
          "chrome": "67",
          "safari": "11.1"
        },
        "useBuiltIns": "usage",
        "corejs": "3.6.5"
      }
    ]
  ],
  "sourceType": "script"
}