使用 Babel + React + Webpack 搭建 Web 应用
话不说直接上正题。
环境搭建
- Babel--目前浏览器对于ES6的语法解析支持度还不高,所以要通过转码在编译,所以在使用ES6之前要安装Babel,之前安装的时候遇到了一些问题但是没有全部记录下来,现在只能是尽力重现一下。
Babel6版本开始已经不支持使用npm install babel -g 安装了,它分成了几个部分
- babel cli,适用于命令行
- babel-core,包含node api
npm install babel-cli -g
npm install babel-core --save-dev
babel需要手动安装插件
npm install babel-preset-es2015
然后在命令行输入vim .babelrc在文件夹下面创建一个叫.babelrc
的文件,并写入如下代码:
{
"presets": ["es2015"]
}
然后保存退出。
2.配置webpack
可以参考
http://www.cnblogs.com/vajoy/p/4650467.html
首先记录下webpack的使用
1、新建一个文件夹存放我们的项目
npm init 创建package.json的配置文件
2、把webpack保存到本地依赖里面
npm install webpack --save-dev
3、单个文件打包
新建js文件entry.js里面写上js代码,然后使用
webpack entry.js bundle.js
即可在本地目录生成一个打包好的bundle.js,然后把bundle.js引入到页面中
4、webpack默认打包js文件,如果我们需要打包css文件需要加载相应的loader
例如:css需要加载的loader有css-loader和style-loader
npm install css-loader style-loader --save-dev
然后在入口文件entry.js中加入
require('style!css! ./style.css'); //把css当做模块加载进来
5、文件太多时候这样写就过于繁琐了,我们可以使用webpack.config.js文件定义webpack的配置,
module.exports ={
entry:'./entry.js', //定义的入口文件
output:{
path: __dirname, //打包好的文件的路径
filename: 'bundle.js' //打包好的文件名
},
devtool:'source-map', //生成source-map 可以在浏览器通过sourcemap看到我们写的打包之前的文件,便于调试 (可以在打包之前的文件需要调试的地方加入 debugger;作用类似于断点)
module:{ //当打包的文件中使用了loader时候我们需要这样写
loaders:[
{test:/\.js$/, exclude:/node_modules /, loader: 'react-hot!babel'}, //exclude 指的是排除那些文件不打包
{test:/\.css$/, loader:'style!css'} ]
}
}
6、在webpack中使用babel
首先得在本地安装babel需要的依赖
npm install babel-loader babel-core babel-preset-es2015 --save-dev
然后在项目根目录下增加.babelrc文件里面输入
{
presets:["es2015"]
}
总和使用webpack+babel+react
首先在项目本地安装依赖
npm install babel-core babel-preset-es2015 babel-preset-react webpack webpack-dev-server babel-loader react-hot-loader --save-dev
然后安装react的
npm install react react-dom --save
然后在项目中配置.babelrc
{
"presets":["es2015","react"]
}
新建一个name.js
" use strict";
import React from "react"; class Name extends React.Component{
render(){
return(
<div>
hello~~ yang <input />
</div>
);
}
}
export {Name as default};
然后在entry.js入口文件中配置
"use strict"; import React from "react";
import ReactDOM from "react-dom"; import Name from './name'; ReactDOM.render(
<Name />,
document.getElementById('app')
);
webpack.config.js配置
module.exports ={
entry:'./entry.js',
output:{
path: __dirname,
filename: 'bundle.js'
},
devtool:'source-map',
module:{
loaders:[
{test:/\.js$/, exclude:/node_modules /, loader: 'react-hot!babel'},
{test:/\.css$/, loader:'style!css'} ]
}
}
然后在package.json中加一句话在
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"watch": "webpack-dev-server --inline --hot"
},
然后在控制台运行
npm run watch
就能在浏览器中访问 http://localhost:8080
使用 Babel + React + Webpack 搭建 Web 应用的更多相关文章
- react+webpack搭建项目
一.环境准备 ①node ②npm 二.开始搭建 ①使用npm安装create-react-app工具,在cmd命令行中输入: npm install -g create-react-app ②使用命 ...
- webpack+babel+ES6+react环境搭建
webpack+babel+ES6+react环境搭建 步骤: 1 创建项目结构 注意: 先创建一个项目目录 react 这个名字自定义,然后进入到这个目录下面 mkdir app //创建app ...
- react+webpack+babel环境搭建
[react+webpack+babel环境搭建] 1.react官方文档推荐使用 babel-preset-react.babel-preset-es2015 两个perset. Babel官方文档 ...
- 详解 Webpack+Babel+React 开发环境的搭建
1.认识Webpack 构建应用前我们先来了解一下Webpack, Webpack是一个模块打包工具,能够把各种文件(例如:ReactJS.Babel.Coffeescript.Less/Sass等) ...
- 最小白的webpack+react环境搭建
本文也同步发表在我的公众号“我的天空” 从零开始,用最少的配置.最少的代码.最少的依赖来搭建一个最简单的webpack+react环境. 最近在玩webpack+react+移动端,那么第一步自然是搭 ...
- 使用webpack搭建react项目 webpack-react-project
webpack-react-project 使用webpack搭建react项目 webpack搭建react项目 github源码 具体配置信息参照package.json和webpack.conf ...
- react项目搭建及webpack配置
1,配置webpack npm install -g webpack webpack的cli环境 npm install -g webpack-dev-se ...
- 使用 webpack 搭建 React 项目
简评:相信很多开发者在入门 react 的时候都是使用 create-react-app 或 react-slingshot 这些脚手架来快速创建应用,当有特殊需求,需要修改 eject 出来的 we ...
- webpack 搭建React(手动搭建)
前言 最近真的都是在瞎学,看到自己不是很明白的东西,都喜欢自己手动去敲1到3遍(晚上下班的时候咯), 瞧,React 基于webpack 搭建,react 官方有一套手脚架工具,我自己也搭建过确实挺 ...
随机推荐
- Design and Analysis of Algorithms_Decrease-and-Conquer
I collect and make up this pseudocode from the book: <<Introduction to the Design and Analysis ...
- springmvc之格式化要显示的小数或者日期。
把保存的小数或者日期按照想要的格式显示. 首先导入jar包joda-time-2.3.jar,下载地址http://pan.baidu.com/s/1gfNuUfp 这里使用注解的方式进行格式化. 创 ...
- html5,音频代码
<!-- <audio src="1.mp3" controls="controls"></audio> --> &l ...
- C语言的内存分配
内存分为五大区: 1.栈区:在函数内部声明的变量都存在栈区,只管申请,系统会帮我们自动释放,释放的时间是作用域结束,遵循先进后出(first in last off(FILO)),栈的开辟是连续的,不 ...
- arm 2440 linux 应用程序 nes 红白机模拟器 第1篇
对比了很多种,开源的 NES 模拟器 VirtuaNES , nestopia , FakeNES , FCEUX , InfoNES , LiteNES 最后决定使用 LiteNES 进行移值,它是 ...
- JavaScript confirm 自定义风格及功能实现
在网上找了一些弹窗插件,例如bootbox, 功能和动画效果都做的很好,但是很难自定义样式. 项目需要,Google相关方法后写了一个Demo, 没有JavaScript confirm切断线程的功能 ...
- POJ 1459:Power Network(最大流)
http://poj.org/problem?id=1459 题意:有np个发电站,nc个消费者,m条边,边有容量限制,发电站有产能上限,消费者有需求上限问最大流量. 思路:S和发电站相连,边权是产能 ...
- 逗比的wifi开关
笔记本会出现网卡开机不能用的现象.具体表现为:网卡没有禁用,但是搜索不到无线信号.适配器选项框里面选中无线网卡,然后诊断这个链接提示启用无线功能.然后我点击应用此修复就能搜索到无线信号了.问题是,电脑 ...
- java static静态方法的并发性
在做一个web项目的时候需要做一个通用类去处理一些问题,想到这个类很多地方都有用到,又不想每次都new一个,因此就定义了里面的方法是静态方法,然后又因为多个静态方法都用到了同一个对象,结果定义了一个类 ...
- java.sql.SQLException: null, message from server: "Host '192.168.xxx.xxx' is not allowed to connect to this MySQL server"
当你连接自己的电脑上的MySQL时,报这样的错,你可以把ip换成 127.0.0.1或者localhost ,当然前提是用户名和密码正确