Babel是一个广泛使用的转码器，它可以帮你实现以下操作：

它可以帮你将（ES6、ES7...）转换为现浏览器支持的ES5，这样你就不用考虑新标准是否被浏览器识别了。
	
让你能使用基于JavaScript进行了拓展的语言，比如React的JSX。
1. 安装

Babel其实是几个模块化的包，其核心功能位于称为babel-core的npm包中，webpack可以把其不同的包整合在一起使用，对于每一个你需要的功能或拓展，你都需要安装单独的包（用得最多的是解析Es6的babel-env-preset包和解析JSX的babel-preset-react包）。

npm install --save-dev babel-core
npm install --save-dev babel-preset-env
npm install --save-dev babel-preset-react


安装的依赖包是不是有点多，需要npm安装好多遍，当然也不是必须要分开安装，你完全可以多个依赖包一起安装，这里要注意的是：“如果多个依赖包一起安装那么每个依赖包之间需要用空格隔开”，如下：
npm install --save-dev babel-core babel-preset-env babel-preset-react

本文以webpack文章的demo为例，如果未阅读上文，并且想了解完整过程请点击回到上文

2. 配置

先来看下在webpack.config.js文件中配置如下：

module.exports = {
    ...
    module: { // 这里配置Bobal
        rules: [
            {
                test: /(\.jsx|\.js)$/,
                use: {
                    loader: "babel-loader",
                    options: {
                        presets: [
                            "env", "react"
                        ]
                    }
                },
                exclude: /node_modules/
            }
        ]
    }
}


当然这样配置是完全没错的，但是在正式项目中需要在webpack.config.js文件中配置很多项配置，这样就使得这个文件有特别多配置，从而使得这个配置文件会特别复杂，因此为了使这个文件配置变得稍微简单点，一些开发者支持把babel的配置选项放在一个单独的名为 ".babelrc" 的配置文件中，webpack会自动调用.babelrc里的babel配置选项。

接下来我们在来修改配置文件

第一步 在项目根目录创建.babelrc如下：



第二步 在.babelrc中配置babel

{
  "presets": ["react", "env"]
}


第三步 修改webpack.config.js

module.exports = {
    ...
    module: {
        rules: [
            {
                test: /(\.jsx|\.js)$/,
                use: {
                    loader: "babel-loader",
                },
                exclude: /node_modules/
            }
        ]
    }
}


在配置Babel过程中大家有没有注意到react，大家想到了什么，没错就是安装react，我们要先安装react才能用ES6以及JSX语法。

npm install --save react react-dom


接下来我们要用ES6语法

第四步 修改app.js，让他以组件形式返回

这个时候要注意了，我们之前app.js文件名称的开头字母是小写，这里我们要改为大写，因为react组件名称是需要大写的。

import React, {Component} from 'react'
import config from './config.json';

class App extends Component{
    render(){
        return (
            <div>
                {config[0].text}
            </div>
        )
    }
}
export default App


修改main.js如下，使用ES6的模块定义和渲染App模块

import React from 'react';
import {render} from 'react-dom';
import App from './App';

render(<App />, document.getElementById('root'));


第五步 重新使用npm start打包，并且使用npm run server启动本地服务，如果之前打开的本地服务器没有关闭，你应该可以在localhost:8080下看到与之前一样的内容，这说明react和es6被正常打包了。





 

node.js的模块化–babel的安装和使用
在node.js和npm环境下加粗样式
1 .安装babel

1 在目标文件位置打开终端，输入命令：npm install --save-dev @babel/core @babel/cli @babel/preset-env @babel/node

2  安装完毕之后，再次输入命令安装：npm install --save @babel/polyfill
2.创建babel.config.js

1 在项目目录中创建babel.config.js文件。

编辑js文件中的代码如下：
   const presets = [
            ["@babel/env",{
                targets:{
                    edge:"17",
                    firefox:"60",
                    chrome:"67",
                    safari:"11.1"
                }
            }]
        ]
        module.exports = { presets }  //暴露

3.创建index.js文件

1.index.js文件作为入口文件，与babel.config.js同级

2 在index.js中输入需要执行的js代码（导入导出模块）
4 使用npx执行文件

1 打开终端，输入命令：npx babel-node ./index.js

2 可以看到的执行代码
5 导入导出

1 设置默认导入/导出

A.默认导出
export default {
    a
},如下：
let num = 100;
//在一个模块中，只允许使用export default向外默认暴露一次成员
export default{
    num
}

B.默认导入

import  接收名称  from  “模块标识符”，如下：
 import m1 from './m1.js'

2 设置按需导入/导出

A.按需导出

直接导出需要的数据，可多次
 	export let num = 998;
    export let myName = "jack";
    export function fn = function(){ console.log("fn") }

B.按需导入
import { num,fn ,myName } from "./m1.js"

一个模块中既可以按需导入也可以默认导入，一个模块中既可以按需导出也可以默认导出，互不影响
3.直接导入并执行代码

直接import  “模块标识符”;