使用 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 官方有一套手脚架工具,我自己也搭建过确实挺 ...
随机推荐
- php编写tcp服务器和客户端程序
这是我从别的地方看到的. 1.修改php.ini,打开extension=php_sockets.dll 2.客户端程序 SocketClient.php <?php set_time_limi ...
- web前端基础知识 - Django进阶
1. 路由系统 1.1 单一路由对应 url(r'^index$', views.index), 1.2 基于正则的路由 url(r'^index/(\d*)', views.index), url( ...
- PHP自带防SQL攻击函数区别
为了防止SQL注入攻击,PHP自带一个功能可以对输入的字符串进行处理,可以在较底层对输入进行安全上的初步处理,也即Magic Quotes.(php.ini magic_quotes_gpc).如果m ...
- idea转eclipse 设置注意。
下载适合的eclipse
- mysql 常用语句模板
插入INSERT IGNORE INTO test (`f1`, `f2`, `f3`) VALUES (v1,v2,v3); 更新update test set f1=v1,f2=v2 where ...
- Oracle EBS APIs
参考链接: http://blog.csdn.net/pan_tian/article/details/7754598 http://blog.itpub.net/26687597/viewspace ...
- 简单封装数据请求(iOS)
#import <Foundation/Foundation.h> //给block起 别名 //类型 void(^)(BOOL success , id data) //别名是 Comp ...
- BigInteger和BigDecimal大数操作
有时候可能会碰到需要计算非常大的数,比如7777777777777777777777777*3333333333333333333333333333,这样的计算需要显然不能用之前的方式来进行.我们不能 ...
- 7.Git的版本退回
现在,你已经学会了修改文件,然后把修改提交到Git版本库,现在,再练习一次,修改readme.txt文件如下: Git is a distributed version control system. ...
- 手机APP功能测试经验分享2016.06.06
1.登录时,Android和IOS同样的操作,提示信息不一致: 2.注册等页面切换成横屏容易不兼容.把内存卡去掉,再发送图片.音频.视频容易出错. 3.Android和IOS同样的功能,同样的原型图, ...