你的位置:首页 > Java教程

[Java教程]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模块

安装babelnpm install babel-core babel-loader babel-preset-es2015 babel-preset-react安装reactnpm install react react-dom安装json loadernpm install json-loader

2、代码文件

//Greeter.jsimport React, {Component} from 'react'import config from './config.json'class Greeter extends Component {  render() {    return (      <div>{config.greetText}</div>    );  }}export default Greeter//main.jsimport 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文件就可以了。源码下载。