Installation and use of babel plug-in converted from es6 to es5

First of all, you need to have any of the three package managers, npm or cnpm or yarn. This installation is based on Visual Studio Code

It means that it is running in the terminal of vscode. When it is Insert picture description hereopened, if an error is reported after entering the command in the terminal, it may be that node is not installed and configured. You can search it online. After configuration, you need to restart the computer. If all of the above are available, then do the following:

  1. If you enter babel --version and no version number appears, you need to execute the following code

    cnpm install -g babel-cli

  2. New app01 folder

  3. Enter the app01 folder and initialize the current folder as a nodejs project

    After a series of operations, npm init or
    npm init -y
    will eventually create a package.json file, which saves the configuration information of the entire project

  4. Create a new src folder, create a.js under the src folder, write ES6 code in the a.js file
    let a = 1;
    let test = () => {}

  5. Install babel

    cnpm install --save-dev babel-cli or
    cnpm install --save babel-cli
    –save-dev means production dependency, which is only used during project development –
    save means product dependency, which will also be used when the product is online

  6. Install babel preset [conversion rules]

    cnpm install --save-dev babel-preset-latest

  7. Create and configure a .babelrc file in the root directory of the project, pay attention to the "."
    { "presets":["latest"] }

  8. Use babel to convert ES6 code to ES5 code
    in src path
    > babel a.js
    in app01 path
    > babel src/a.js

    expand:

    1. If it is just a single file, a b.js file will be generated after converting a.js to ES5 code

      babel a.js --out-file b.js

    2. If there are multiple files, directly convert its parent folder: Convert the src folder to ES5 code to generate a dist folder

      babel src --out-dir dist

    3. You can configure
      "scripts" in the package.json file : { "build": "babel src --out-dir dist", }, and then every time you execute npm run build in the root directory of the project, you can perform src Convert and then sign out the dist folder


Guess you like

Origin blog.csdn.net/weixin_49549509/article/details/108377401