大家好，又见面了，我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新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"：这些包仅用于开发和测试,即开发中所需要的产品中就不需要。