首页 HTML5前端工具正文

babel的使用与配置

景先 前端工具 2019-10-10 218 0
  • 前端开发必备工具
  • 同webpack,需要了解基本配置和使用

环境搭建&基本配置

//package.json
"devDependencies": {
    "@babel/cli": "^7.7.5",
    "@babel/core": "^7.7.5",
    "@babel/plugin-transform-runtime": "^7.7.5",
    "@babel/preset-env": "^7.7.5"
  },
  "dependencies": {
    "@babel/polyfill": "^7.7.0",
    "@babel/runtime": "^7.7.5"
  }



  //.babelrc
 {
   //预设
    "presets": [
        [
            "@babel/preset-env",
            {
                "useBuiltIns": "usage",
                "corejs": 3
            }
        ]
    ],
    "plugins": [
        [
            "@babel/plugin-transform-runtime",
            {
                "absoluteRuntime": false,
                "corejs": 3,
                "helpers": true,
                "regenerator": true,
                "useESModules": false
            }
        ]
    ]
}

es6,es7 ==> es5 语法

babel-polyfill

polyfill: 是一块代码(通常是 Web 上的 JavaScript),用来为旧浏览器提供它没有原生支持的较新的功能。

core-js:标准的库集成了es6+以上的polyfill
regenerator:支持generator的polyfill

babel-polyfill即以上两者的集合

  • 按需引入,编译后展示代码的
    presets": [
          [
              "@babel/preset-env",
              {
                  "useBuiltIns": "usage",
                  "corejs": 3
              }
          ]
      ],

babel-runtime

不会污染全局环境

版权声明

本文仅代表作者观点,不代表本站立场。
本文系作者授权发表,未经许可,不得转载。

评论