理解babel,babel-loader,@babel/preset-env的作用

分类:环境配置来源:站内 最近更新:2022-08-04 16:31:43浏览:19留言:0

Babel 是一个 JavaScript 编译器


在我们自己搭建脚手架时,肯定会接触到babel编译器,尤其现在ES6语法已经成为我们日常开发的习惯语法糖,但是浏览器对新语法的兼容总是滞后的,所以就需要编译器解析各种ES2015+的语法到ES5,所以Babel就诞生了。Babel 通过语法转换器来支持新版本的 JavaScript 语法。

babel-loader是加载器


它的作用是在webpack打包时加载js等后缀名的文件,然后交给babel处理。

@babel/preset-env


它是一个智能预设,它允许你使用最新的 JavaScript 语法,可以根据制定环境提供语法转换,比如要不要兼容IE,兼容到chrome到什么版本,要不要polyfill等等。

但是仅仅编译js还不行,随着vue,react等框架的诞生,需要让babel编译器去编译jsx等语法,所以各种预设器就出现了,如编译react的"@babel/preset-react"和处理typescript的"@babel/preset-typescript"等等

所以日常webpack工程化中,一般的babel配置如下:

rules: [
      {
        test: /\.(ts|js)x?$/,
        exclude: /(node_modules|bower_components)/,
        use: [
          {
            loader: "babel-loader",
            options: {
              presets: [
                [
                  "@babel/preset-env",
                  {
                    useBuiltIns: "usage", // babel 就可以按需加载 polyfill,并且不需要手动引入 @babel/polyfill:
                    targets: "> 1%,last 2 versions,not ie <= 11",
                    corejs: 2,
                  },
                ],
                "@babel/preset-react",
                "@babel/preset-typescript",
              ],
              plugins: [
                [
                  "@babel/plugin-transform-runtime",
                  {
                    absoluteRuntime: false,
                    corejs: 2,
                    helpers: true,
                    regenerator: true,
                    useESModules: false,
                  },
                ],
                "@babel/plugin-proposal-class-properties",
              ],
            },
          },
        ],
      },
     //其他加载器
    ],


0

发表评论

评论列表(0)

  • 暂时没有留言
热门