前端开发必备之——Babel

今天给大家介绍一款前端开发必备工具Babel

Babel是什么？

JavaScript编译器

Babel 是一个工具链，主要用于将 es6+ 版本的代码转换为向后兼容的 JavaScript 语法，以便能够运行在当前和旧版本的浏览器或其他环境中
这样我们就可以尽情的使用JS新语法，而不用再顾虑兼容性的问题

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

转换React

我们直接编写react代码并不能够在浏览器执行运行，必须需要转换成原生js才能运行，Babel帮我们实现了这一转换

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

可以删除类型注释

现在TypeScript越来越受欢迎，加入了强大的类型系统极大的规范了js代码，提高了代码可读性和可维护性。Babel可以将TypeScript转换为JS代码

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

Babel怎么用？

这里我们举例在创建一个react工程使用webpack打包工具，用Babel转码
首先我们

下载依赖

npm install babel-loader @babel/core @babel/preset-env @babel/preset-react --save-dev

webpack添加babel-loader

var config = {
        entry:[
            './app.js'
        ],
        output:{
            path:'/build',
            filename:'index.js',
        },
        devServer:{
            inline:true,
            port:7777
        },
        module:{
            rules:[
            {
                test:/\.js$/,
                use:{
                    loader: 'babel-loader',
                },
                exclude: '/node_modules/'
            }]
        }
    }
    
    module.exports = config;

创建.babelrc文件

.babel文件添加预设

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

这样我们就完成了webpack中babel设置，现在你可以将react代码转换为原生JS啦

最后 🙌

好啦，以上就是我本次分享的全部内容啦，如果你觉得我的文章对你有一丢丢帮助，那么请不要吝啬你的赞👍哦，阿门~