使用Babel将es6转换es5

使用Babel将es6转换es5目录Babel是什么?命令行转换babel-cli安装使用配置文件babel-polyfill安装在js中使用将Babel集成到webpack中Babel配置webpack配置1)安装webpack2)添加配置文件webpack.config.js3)修改package.json4)打包 拓展npm中save与save-d…

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺

目录

Babel是什么?

命令行转换babel-cli

安装

使用

配置文件

babel-polyfill

安装

在js中使用

将Babel集成到webpack中

Babel配置

webpack配置

1)安装webpack

2)添加配置文件 webpack.config.js

3) 修改package.json

4)打包 

拓展

npm中 save与 save-dev区别


Babel是什么?

Babel是一个javascript编译器即一个工具链,主要用于在旧的浏览器或环境中将ECMAScript2015+代码转换为向后兼容版本的javascript代码。

命令行转换babel-cli

 全局环境下进行Babel转换。这意味着,如果项目要运行,全局环境必须有Babel,也就是说项目产生了对环境的依赖。

安装

1) 安装 babel-cli

 $ sudo npm install  –global babel-cli

2) 安装预设

$ npm install –save-dev babel-preset –latest

3) 在项目中添加配置文件

在当前项目的根目录下创建该文件           vim  .babelrc

{

      “presets”:[“latest“]

}

**:红色标注的要保持一致,具体原因请看后面的配置文件信息

使用

转换结果输出到标准输出

$ babel example.js

将结果输出到指定文件

$ babel example.js -o index.js

整个目录转码 –out-dir 或 -d 参数指定输出目录

$ babel src -d lib

 

配置文件

Babel的配置文件是.babelrc,存放在项目的根目录下。使用Babel的前,应先配置这个文件。该文件用来设置转码规则和插件,基本如下:

{

“parsets”:[],

“plugins”:[]
}

parsets字段设定转换规则,官方提供以下规则集。

ES2015转码规则

$ npm install  babel-preset-es2015 –save-dev 

最新转码规则

$npm install babel-preset-latest  –save-dev

不会过时的转码规则

$npm install babel-preset-env  –save-dev

最后将这些规则加入.babelrc.例如 将最新转码规则加入

{“presets”:[“latest”]}

babel-polyfill

Babel默认只转换新的javascript语法,但并不转换新的API,比如 Generator、Set、Symbol、promise等全局对象,以及一些定义在全局对象上的方法都不会转码。如果想让这些方法运行则必须使用babel-polyfill。

安装

$ npm install –save babel-polyfill

在js中使用

require(“babel-polyfill”);

将Babel集成到webpack中

Babel配置

1) 安装babel-loader与babel-core

$ npm install babel-core babel-loader  –save-dev

2)安装预设

$ npm isntall babel-preset-latest  –save-dev

3)配置.babelrc

{“presets”:[“latest”]}

webpack配置

1)安装webpack

$  npm install webpack webpack-cli –save-dev

2)添加配置文件 webpack.config.js

const path=require(‘path’);
module.exports={

    entry:’./index.js’,
    output:{

        filename:’bundle.js’,
         path:path.resolve(__dirname,’dist’)
    },
    module:{

        rules:[{ 
               test:/\.js$/,
               use:’babel-loader’
           }]
    }
}
 

3) 修改package.json

 “scripts”:{

                “build”:”webpack”
            }

4)打包 

$ npm run bulid

可能会报如下错误:

cdCannot find module ‘@babel/core’ babel-loader@8 requires Babel 7.x,如果按我上面步骤我们装的babel-loader是8.0.4版本,因为我们只需要重新装7版本。

npm install babel-loader@7 –save-dev

拓展

npm中 save与 save-dev区别

–save

会将依赖安装到package.json 中的 dependencies中

–save-dev

会将依赖安装在package.json中的devDependencies

"dependencies":应用程序在生产中需要这些包,即项目上线后所依赖的环境。

"devDependencies":这些包仅用于开发和测试,即开发中所需要的产品中就不需要。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/193549.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号