Webpack使用教程五(Babel)

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Webpack使用教程五(Babel)相关的知识,希望对你有一定的参考价值。

Babel是一个javascript编译和工具平台,使用Babel我们可以:使用新版本的JavaScript(ES6/ES2015,ES7/ES2016),尽管有些浏览器不能全部支持新特性;使用JavaScript语言扩展,例如React JSX。Babel是一个独立的工具,可以与Webpack一起使用。Babel已经模块化并分布在不同的npm模块中,其中核心的功能可以在babel-core模块中获得。其他的部分根据用户的需求来下载:如果想与webpack一起使用,需要安装babel-loader模块;如果想使用ES6特性,需要安装babel-preset-2015;如果想使用React JSX,那么需要安装babel-preset-react。当然还有一些其他的配置模块,这里并没有全部列出。接下来我们看一个简单的React例子(源码下载)。

1、安装必须的npm模块

安装babel
npm install babel-core babel-loader babel-preset-es2015 babel-preset-react

安装react
npm install react react-dom

安装json loader
npm install json-loader

2、代码文件

//Greeter.js
import React, {Component} from ‘react‘
import config from ‘./config.json‘

class Greeter extends Component {
    render() {
        return (
            <div>{config.greetText}</div>
        );
    }
}

export default Greeter

//main.js
import React from ‘react‘;
import {render} from ‘react-dom‘;
import Greeter from ‘./Greeter‘;

render(<Greeter />, document.getElementById(‘root‘));

3、设置webpack文件

module.exports = {
    devtool: ‘eval-source-map‘,
    entry: __dirname + "/app/main.js",
    output: {
        path: __dirname + "/public",
        filename: "bundle.js"
    },
    module: {
        loaders: [
            {
                test: /\.json$/,
                loader: "json"
            },
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: ‘babel‘,
                query: {
                    presets: [‘es2015‘, ‘react‘]
                }
            }
        ]
    },
    devServer: {
        contentBase: "./public",
        colors: true,
        historyApiFallback: true,
        inline: true
    }
};

运行webpack命令,然后打开index.html文件就可以了。源码下载

以上是关于Webpack使用教程五(Babel)的主要内容,如果未能解决你的问题,请参考以下文章

webpack打包和gulp打包工具详细教程

将 webpack 与 babel 和 babel-preset-react 和 babel-preset-es2015 一起使用

Vue 教程(三十一)webpack-ES6 转 ES5 处理

babel 7.x 结合 webpack 4.x 配置

使用 babel 和 webpack 转换代码时,导出默认值不会被转换

经过webpack和babel打包过的前端代码可以还原最初的html+css+js吗?