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 4教程 - 第七部分 减少打包体积与Tree Shaking
转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具.解决方案和服务,赋能开发者.原文出处:https://wanago.io/2018/08/13/webpack-4-course-part ...
- webpack入门教程之初识loader(二)
上一节我们学习了webpack的安装和编译,这一节我们来一起学习webpack的加载器和配置文件. 要想让网页看起来绚丽多彩,那么css就是必不可少的一份子.如果想要在应用中增加一个css文件,那么w ...
- webpack,react,babel
window搭建webpack,react,babel傻瓜教程 首先现在的webpack教程已经很多了,写这篇的原因是因为自己在从小白开始的搭建过程中,并没有找到比较好的教程,花费了很多的时间,s ...
- 全网最贴心webpack系列教程和配套代码
webpack-demos:全网最贴心 webpack 系列教程和配套代码 欢迎关注个人技术博客:godbmw.com.每周 1 篇原创技术分享!开源教程(webpack.设计模式).面试刷题(偏前端 ...
- CRL快速开发框架系列教程五(使用缓存)
本系列目录 CRL快速开发框架系列教程一(Code First数据表不需再关心) CRL快速开发框架系列教程二(基于Lambda表达式查询) CRL快速开发框架系列教程三(更新数据) CRL快速开发框 ...
- webpack 使用教程--实时刷新测试
学习webpack,基本始终是围绕: 1.如何安装webpack 2.如何使用webpack 3.如何使用loader 4.如何使用开发服务器 可能我们会在如何使用开发服务器的时候,遇到诸如调试的相关 ...
- C#微信公众号开发系列教程五(接收事件推送与消息排重)
微信公众号开发系列教程一(调试环境部署) 微信公众号开发系列教程一(调试环境部署续:vs远程调试) C#微信公众号开发系列教程二(新手接入指南) C#微信公众号开发系列教程三(消息体签名及加解密) C ...
- 无废话ExtJs 入门教程五[文本框:TextField]
无废话ExtJs 入门教程五[文本框:TextField] extjs技术交流,欢迎加群(201926085) 继上一节内容,我们在表单里加了个两个文本框.如下所示代码区的第42行位置,items: ...
- Android Studio系列教程五--Gradle命令详解与导入第三方包
Android Studio系列教程五--Gradle命令详解与导入第三方包 2015 年 01 月 05 日 DevTools 本文为个人原创,欢迎转载,但请务必在明显位置注明出处!http://s ...
随机推荐
- linux文件上传
租了个服务器,要把自己打的war包打上去发布,服务器是linux的(本机是mac).以前都是用wget命令,把需要上传的东西先放到github上面再在服务器上用wget命令下载.最近不知道什么原因,w ...
- python函数,lambda表达式,三目运算,列表解析,递归
一.自定义函数 定义函数时,函数体不执行:只有在调用函数时,函数体才执行.函数的结构: 1. def 2. 函数名 3. 函数体 def func_name(): 函数体 4. 返回值 如果没有声明返 ...
- 关键字static和this
1.this关键字 this:代表当前对象,就是代表所在函数所属类的引用.哪个对象调用了this所在的函数,this就代表哪个对象. this关键字也可以用于在构造函数中调用其他构造函数,此时要注意, ...
- RegExp 对象的三个方法:compile()、exec()、test()
这三个都是RegExp对象下的三个方法,使用方法是一致得. 使用方法:RegExpObject.方法() 方法解析:其实就是根据定义好的正则对象,调用对应的方法. 1.RegExpObject.com ...
- 使用nssm在windows服务器上部署nodejs
Linux上,可以轻松的使用forever或者pm2来部署nodejs应用.但是在windows下就麻烦了,pm2明确的说支持Linux & MacOS,forever在windows下貌似问 ...
- eclipse中导入项目后中文成乱码解决办法
转自:http://blog.163.com/lang_zi_ming/blog/static/1140161762010412112650774/ 编程时在往eclipse中导入项目后 项目中的中文 ...
- HTML标签CSS默认值研究
最近写css的时候,发现在div元素里面添加ul元素后发现,ul列表在div里面距离最上方总是有一段空行,当时很奇怪,以为是哪个css出了问题,就把css去掉了,发现问题依旧,然后就查了一下发现htm ...
- Echarts x轴显示不全
xAxis : [ { type : 'category', data : ['采矿业','制造业','电力热力燃气及水生产和供应业','建筑业'], axisTick: { alignWithLab ...
- 【POJ2949】Word Rings(最大平均值环)
题意:给定N个字符串,如果A串的最后两个字母跟B串的前两个字母相同它们就能连接. 求一个由字符串组成的首尾相连的环,使(字符串总长度/字符串个数)最大. n<=100000 len<=10 ...
- OutSystems学习一,安装以及入门
官方网站:http://www.outsystems.com/home/HomePage.aspx 安装完成后,在官网申请自己的管理云平台 启动客户端 详细参考帮助,跟着走就行