(四)Babel

 

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如下：

 

image.png

第二步 在.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被正常打包了。

 

image.png

 

image.png