babel的打包方式

1. 打包javascript

  1) 安装所需的包

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

  2) 设置配置

    方式一:babel.config.json

        {

          "presets": [

             [ "@babel/env",

              { "targets": {

                "edge": "17",

                "firefox": "60",

                "chrome": "67",

                "safari": "11.1"

              }, "useBuiltIns": "usage",

              "corejs": "3.6.5" }

          ]

         ] }

      方式二:创建.babelrc的文件

        添加如下:

          {

            “presets”: ["@babel/preset-env"]

          }

    3) 编译

    ./node_modules/.bin/babel src --out-dir lib

     说明: 将src下的js转为ES2015+的代码转为ES5  并输出到 lib文件夹里

     简写:你可以利用 npm@5.2.0 所自带的 npm 包运行器将 ./node_modules/.bin/babel 命令缩短为 npx babel

    npx babel src --out-dir lib

  插件使用方式

    如:安装处理箭头函数的插件

    npm install --save-dev @babel/plugin-transform-arrow-functions

    执行转码

    ./node_modules/.bin/babel src --out-dir lib --plugins=@babel/plugin-transform-arrow-functions

   使用预设,直接转码所有的ES2015+的代码,而不需要一个一个的安装插件再去转码

    使用方式:

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

      ./node_modules/.bin/babel src --out-dir lib --presets=@babel/env

 

posted @ 2021-06-17 09:03  淡然の不淡  阅读(482)  评论(0编辑  收藏  举报