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文件就可以了。源码下载。

转载于:https://www.cnblogs.com/xfshen/p/5943205.html

Webpack使用教程五（Babel）相关推荐

webpack基础教程
webpack基础教程一 webpack五大核心二 webpack处理css资源三 webpack处理less.scss.sass.styl资源四 webpack-module的详细配置五 ...
webpack打包教程
webpack打包教程基础教程首先要保证装了nodejs和npm 第一步:创建文件夹,命名为finance-scopa 第二步:win+R,输入cmd,进入命令行窗口, 第三步:进入finance ...
Swift中文教程(五)--对象和类
原文:Swift中文教程(五)--对象和类 Class 类在Swift中可以用class关键字后跟类名创建一个类.在类里,一个属性的声明写法同一个常量或变量的声明写法一样,除非这个属性是在类的上下文 ...
webpack 使用教程--实时刷新测试
学习webpack,基本始终是围绕: 1.如何安装webpack 2.如何使用webpack 3.如何使用loader 4.如何使用开发服务器可能我们会在如何使用开发服务器的时候,遇到诸如调试的相关 ...
webpack使用教程
webpack使用教程 1.webpack安装 webpack依赖于node环境,所有安装webpack前先安装node环境.如果你用过baota那么安装node基本是一键化的了.没使用过baota也 ...
C#微信公众号开发系列教程五（接收事件推送与消息排重）
C#微信公众号开发系列教程五(接收事件推送与消息排重) 原文:C#微信公众号开发系列教程五(接收事件推送与消息排重) 微信公众号开发系列教程一(调试环境部署) 微信公众号开发系列教程一(调试环境部署续 ...
公众号第三方平台开发 - 教程五代公众号发起网页授权源码
教程导航: 微信开放平台公众号第三方平台开发教程一平台介绍微信开放平台公众号第三方平台开发教程二创建公众号第三方平台微信开放平台公众号第三方平台开发教程三一键登录授权给第三方平台 ...
MongoDB 教程五: MongoDB固定集合和性能优化 (索引Indexes, 优化器, 慢查询profile)
mongodb索引详解(Indexes) 索引介绍索引在mongodb中被支持,如果没有索引,mongodb必须扫描每一个文档集合选择匹配的查询记录.这样扫描集合效率并不高,因为它需要mongod进 ...
MongoDB 教程五: MongoDB固定集合和性能优化
MongoDB 固定集合(Capped Collections) MongoDB 固定集合(Capped Collections)是性能出色且有着固定大小的集合,对于大小固定,我们可以想象其就像一个环 ...
区块链教程(五)：合约编写实战实例
注:本教程为技术教程,不谈论且不涉及炒作任何数字货币区块连教程(一):前置知识-linux补充区块链教程(二):基础概念介绍区块链教程(三):Solidity编程基础区块链教程(四):搭建私链 ...

Webpack使用教程五（Babel）

Webpack使用教程五（Babel）相关推荐

最新文章

热门文章