Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”.

You’ll probably need to be compatible with Internet Explorer (although it’s a bumble) in front end development. Be careful when you’re compatible with Internet Explorer, because Internet Explorer doesn’t support anything beyond ES2015, so you’ll probably find promises, arrow functions, etc.

Webpack

In the process of front-end project, many will use tools such as Webpack and Gulp.

I’m using Webpack here, but I won’t go into too much detail about the configuration of the Webpack project because I’ve talked about it in detail before.

Reference links:

• Simple front-end project configuration
• Webpack packaging typescript
• Webpack5 hot update package TS

1. The javascript package management tool is YARN. Run the YARN init command to create the project.

2. Use YARN Add to install the WebPack required by the project

Run the yarn add webpack webpack-cli webpack-dev-server command

3. Create webpack.config.js in the project folder and configure the basic structure. Create the required entry file main.js in the folder

const path = require('path');  // Node comes with a package
const webpack = require('webpack');

module.exports = {
    // The file you want to pack
    entry:'./main.js'.output: {filename:'main_out.js'.// Output the file name
        path:path.resolve(__dirname,'./build/'),  // Get the output path
    },
    mode: 'development'.// The whole mode can not be used, mode is the production environment is compressed good pair, here configure the development environment to facilitate the generation of code
    module: {rules: []},resolve: {
        extensions: ['.js']      // Parse the file format
    },
    devServer: {
        hot: false.// Enable hot update
        // The packaging progress is displayed on the command line
        progress: false.liveReload: true.port: 9000.filename: 'main_out.js',},plugins: [
        // Hot update plugin
        new webpack.HotModuleReplacementPlugin()
    ],
    target: ['node'.'es5'].// Here I set up es5 in advance
}
Copy the code

Add scripts to package.json and run the command

"scripts": {
    "dev": "webpack --mode development"."start": "webpack serve --config webpack.config.js --mode development"
}
Copy the code

With the basic Webpack configured, we can now write some statements in main.js

class A {
    a;
    constructor(a) {
        this.a = a; }}let a1 = new A(10);
console.log(a1);
Copy the code

If you run YARN dev on the terminal, the main_out.js file in the build folder is generated.

main_out.jsThe content of the

Run main_out.js with Node and you can see the output

Note: In webpack.config.js I set target to [‘node’, ‘es5’]. If ES5 is not added, the generated main_out.js will have arrow functions, so if main_out.js is introduced, it will cause an error in IE.

---

---

Babel

With the target configuration above, you might think that you are already able to make IE compatible with the post-ES6 approach.

In practice, however, the use of Promise, Set, class, and so on still fails to compile into JS that Internet Explorer can use.

Add the following code to main.js:

class A {
    a;
    constructor(a) {
        this.a = a; }}let a1 = new A(10);
console.log(a1);
let pro = new Promise((resolve, reject) = >{});console.log(pro);

let set = new Set([1.2.3.3.7.8.4.7]);
console.log(set);
Copy the code

Main_out.js is generated in Yarn dev and works fine when running node or in Chrome.

However, there is still an error in IE:

---

Install Babel

This is where the Babel plug-in comes in

Babel is a tool chain for converting code written in ECMAScript 2015+ syntax into a backward-compatible JavaScript syntax that can run in current and older browsers or other environments.

Official website: www.babeljs.cn/docs/

Let me start installing Babel

Run the yarn add @babel/ core@babel /cli babel-loader -d command

@babel/core is the core component of Babel. @babel/cli is a built-in CLI command line tool that can compile files through the command line.

In addition to the two plug-ins mentioned above, you need to install some other Babel components that you need

Run the yarn add @babel/preset-env @babel/polyfill @babel/runtime -d command

@babel/polyfill is a set of core-js and generation Runtime, and can be used in the configuration file with @babel/preset-env. @babel/ Runtime is similar to @babel/polyfill, except that it uses some helper functions to extend locally without contaminating the global environment

---

Configure the Babel

Next, you need to configure Babel

Create a.babelrc file that contains the configuration that Babel needs to support

{
    "presets": [["@babel/preset-env",
            {
                "useBuiltIns": "usage"."corejs": 2.// The new version of @babel/polyfill includes core-js@2 and core-js@3 versions, so you need to declare the version, otherwise WebPack will run warning}}]],Copy the code

Exclude to exclude. Js files from the babel-loader directory

rules: [
    {
        test: /\.js$/,
        use: {
            loader: 'babel-loader',},exclude:'/node_modules/',}]Copy the code

Now the configuration in my package is as follows:

After running yarn dev, the generated main_out.js file can be used in Internet Explorer

Note: Since the Babel version has changed, many tutorials on the web may have different versions and different plug-ins installed. I used a tutorial to install core-js, but I kept getting errors. Maybe there was a conflict, and I removed it. Configuration project is really a pit to lie over…