入门webpack(四) 说说babel

最新推荐文章于 2026-04-01 03:35:22 发布

原创最新推荐文章于 2026-04-01 03:35:22 发布 · 845 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

webpack

入门webpack

Babel是一款流行的JavaScript转译工具，用于将ES2016及以后版本的JavaScript代码转换为旧版本浏览器能理解的形式。本文介绍了如何安装和配置Babel，并详细解释了如何使用babel-presets和插件来指定转译规范。

什么是babel
babel is a JavaScript Compiler,这是官网上的一句话，简单来说，babel是一个转译工具，目标是对使用当前浏览器还没有完全支持的JavaScript规范比如ES2016，ES2017,TypeScrit等开发的代码进行转译，转译后的代码浏览器就能支持并解析。

2.babel怎么用

查看最新版本

安装babel

npm install babel-loader babel-core --save-dev  //普通版本

npm install babel-loader@8.0.0-beta.0 @babel/core -- save-dev //最新版本

基础使用

moduls.exports = {
    entry: {...},
    output: {...},
    module: {
        rules: [ // rules的每个对象代表一个规则
            {
                test: /\.js$/,
                use: 'babel-loader'
                exclude: '/nodule_modules/'
            }
        ]   
    }
}

这一步只是配置了babel,但是babel并不知道按照怎样的规范进行转译，所以需要使用babel-presets指定规范，一般开发使用babel-preset-env

安装babel-prset-env

npm install @babel/preset-env --save-dev   // 当前最新版

npm install babel-preset-env --save-dev   // 基础版本

使用

module.exports = {
    entry: {...},
    output: {...},
    module: {
        rules: [
            {
                test: /\.js$/,
                use: {
                    loader: 'babel-loader',
                    options:{
                        presets:[
                            ['@babel/preset-env',{
                                targets: {
                                    browsers: ['> 1%', 'last 2 version']            
                                }
                            }]
                        ]
                    }
                }
            }
        ]
    }
}

使用了babel-presets时，use后不直接写插件名'babel-loader' ,在use对象的loader键中指定插件名'babel-loader' ,options对象指定presets,presets是一个数组:在数组中指定babel-presets:’@babel/preset-env’,target对象指定按照什么目标编译。这里可以指定浏览器型号，浏览器版本，浏览器份额等等。

babel只能转移部分最新规范，所以我们还需要babel相关的插件babel polyfill和babe runtime transform来进行拓展。

babel polyfill 全局，针对应用
babel runtime transform局部，开发框架给第三方使用采取此插件。

安装babel polyfill

npm install babel-polyfill --save

使用

import 'babel-polyfill' // 在需要使用babel-polyfill 的js文件import

安装babel transform runtime

npm install babel-plugin-transform-runtime --save-dev

npm insatll babel-runtime --save

使用

在.babelrc里配置

 {
    "presets": [
      ["@babel/preset-env", {
        "targets": {
          "browsers": ["> 1%", "last 2 version"]
        }
      }]
    ],
    "plugins": ["@babel/transform-runtime"]
}

tips：

--save-dev   //package.json文件中指定devDependencies依赖

--save     
//  package.json文件中指定dependencies依赖,打包发布后还需要依赖，比如jquery.js

标签

#babel #webapck