话不说直接上正题。

环境搭建

  1. 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 应用的更多相关文章

  1. react+webpack搭建项目

    一.环境准备 ①node ②npm 二.开始搭建 ①使用npm安装create-react-app工具,在cmd命令行中输入: npm install -g create-react-app ②使用命 ...

  2. webpack+babel+ES6+react环境搭建

    webpack+babel+ES6+react环境搭建 步骤: 1 创建项目结构 注意: 先创建一个项目目录  react  这个名字自定义,然后进入到这个目录下面 mkdir app //创建app ...

  3. react+webpack+babel环境搭建

    [react+webpack+babel环境搭建] 1.react官方文档推荐使用 babel-preset-react.babel-preset-es2015 两个perset. Babel官方文档 ...

  4. 详解 Webpack+Babel+React 开发环境的搭建

    1.认识Webpack 构建应用前我们先来了解一下Webpack, Webpack是一个模块打包工具,能够把各种文件(例如:ReactJS.Babel.Coffeescript.Less/Sass等) ...

  5. 最小白的webpack+react环境搭建

    本文也同步发表在我的公众号“我的天空” 从零开始,用最少的配置.最少的代码.最少的依赖来搭建一个最简单的webpack+react环境. 最近在玩webpack+react+移动端,那么第一步自然是搭 ...

  6. 使用webpack搭建react项目 webpack-react-project

    webpack-react-project 使用webpack搭建react项目 webpack搭建react项目 github源码 具体配置信息参照package.json和webpack.conf ...

  7. react项目搭建及webpack配置

    1,配置webpack npm install -g webpack                       webpack的cli环境 npm install -g webpack-dev-se ...

  8. 使用 webpack 搭建 React 项目

    简评:相信很多开发者在入门 react 的时候都是使用 create-react-app 或 react-slingshot 这些脚手架来快速创建应用,当有特殊需求,需要修改 eject 出来的 we ...

  9. webpack 搭建React(手动搭建)

    前言 最近真的都是在瞎学,看到自己不是很明白的东西,都喜欢自己手动去敲1到3遍(晚上下班的时候咯), 瞧,React  基于webpack 搭建,react 官方有一套手脚架工具,我自己也搭建过确实挺 ...

随机推荐

  1. Design and Analysis of Algorithms_Decrease-and-Conquer

    I collect and make up this pseudocode from the book: <<Introduction to the Design and Analysis ...

  2. springmvc之格式化要显示的小数或者日期。

    把保存的小数或者日期按照想要的格式显示. 首先导入jar包joda-time-2.3.jar,下载地址http://pan.baidu.com/s/1gfNuUfp 这里使用注解的方式进行格式化. 创 ...

  3. html5,音频代码

    <!-- <audio src="1.mp3" controls="controls"></audio> -->    &l ...

  4. C语言的内存分配

    内存分为五大区: 1.栈区:在函数内部声明的变量都存在栈区,只管申请,系统会帮我们自动释放,释放的时间是作用域结束,遵循先进后出(first in last off(FILO)),栈的开辟是连续的,不 ...

  5. arm 2440 linux 应用程序 nes 红白机模拟器 第1篇

    对比了很多种,开源的 NES 模拟器 VirtuaNES , nestopia , FakeNES , FCEUX , InfoNES , LiteNES 最后决定使用 LiteNES 进行移值,它是 ...

  6. JavaScript confirm 自定义风格及功能实现

    在网上找了一些弹窗插件,例如bootbox, 功能和动画效果都做的很好,但是很难自定义样式. 项目需要,Google相关方法后写了一个Demo, 没有JavaScript confirm切断线程的功能 ...

  7. POJ 1459:Power Network(最大流)

    http://poj.org/problem?id=1459 题意:有np个发电站,nc个消费者,m条边,边有容量限制,发电站有产能上限,消费者有需求上限问最大流量. 思路:S和发电站相连,边权是产能 ...

  8. 逗比的wifi开关

    笔记本会出现网卡开机不能用的现象.具体表现为:网卡没有禁用,但是搜索不到无线信号.适配器选项框里面选中无线网卡,然后诊断这个链接提示启用无线功能.然后我点击应用此修复就能搜索到无线信号了.问题是,电脑 ...

  9. java static静态方法的并发性

    在做一个web项目的时候需要做一个通用类去处理一些问题,想到这个类很多地方都有用到,又不想每次都new一个,因此就定义了里面的方法是静态方法,然后又因为多个静态方法都用到了同一个对象,结果定义了一个类 ...

  10. 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  ,当然前提是用户名和密码正确