webpack使用Babel转换JavaScript代码

最新推荐文章于 2024-11-18 16:04:06 发布

原创最新推荐文章于 2024-11-18 16:04:06 发布 · 491 阅读

CC 4.0 BY-SA版权

本文介绍了Babel作为JavaScript编译器的作用，详细讲解了如何使用babel-cli进行命令行转换，配置Babel文件，以及在Webpack项目中集成Babel的步骤。同时，还提到了如何配置webpack-dev-server来搭建本地开发服务器。

什么是Babel

Babel是一个JavaScript的编译器，我们在webpack中可以使用ES6以上版本的语法写代码，但是目前主流的浏览器仅支持ES5语法，通过Babel可以将ES6+语法自动转换成ES5语法，来适配浏览器的JavaScript解释器。

比如说，我们使用ES6语法中的箭头函数实现代码：

(val) => (val + 1) ;

使用Babel转化成ES5语法后：

function(val){
	return val+1 ;
}

babel-cli命令行工具的使用

在项目中安装babel-cli，命令如下：

npm install --save-dev @babel/core @babel/cli
## 简写
npm i -D @babel/core @babel/cli

然后再安装转换规则：

# 安装 preset-env
npm i -D @babel/preset-env
# 执行 CLI 添加--presets
npx babel babel.js --presets=@babel/preset-env

测试babel-cli命令行工具，先创建一个app.js文件，输入下面的代码：

[1, 2, 3].map(n => n ** 2);

然后在命令行中输入下面命令：

npx babel app.js
## 或者 指定输出结果到固定文件
npx babel app.js --out-file appout.js
## 简写
npx babel app.js -o appout.js

转化命令执行成功后，app.js的语法就变成了ES5语法：

[1, 2, 3].map(function(n) {
    return Math.pow(n, 2);
});

Babel配置文件

Babel还支持配置文件的方式进行转化操作，配置文件支持两种形式：

（1）使用package.json的babel属性

示例：

{
    "name": "demo",
    "version": "1.0.0",
    "babel": {
        "presets": ["@babel/preset-env"]
    }
}

（2）使用.babelrc文件

在项目的根目录创建.babelrc或.babelrc.js文件，Babel会在正在被转义的文件当前目录中查找一个.babelrc文件，如果不存在，它会向外层目录遍历目录树，直到找到一个 .babelrc 文件，或一个 package.json 文件中有 "babel": {} 。在文件中配置如下：

{
    "presets": ["@babel/preset-env"]
}

在webpack中使用babel

第一步：安装依赖包

# 安装开发依赖
npm i webpack babel-loader webpack-cli @babel/core @babel/preset-env @babel/plugin-transform-runtime -D
# 将 runtime 作为依赖
npm i @babel/runtime -S

第二步：创建webpack.config.js文件，配置如下：

module.exports = {
    //......
    module: {
        rules: [
            {
                test: /\.js$/,
                use: [
                    {
                        loader: 'babel-loader',
                        options: {
                            presets: [
                                [
                                    '@babel/preset-env',
                                    {
                                        useBuiltIns: 'usage'
                                    }
                                ]
                            ]
                        }
                    }
                ]
            }
        ]
    }
};