(四)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