配置React的Babel 6和Webpack 2环境
Facebook的一帮子工程师在忙碌之余开发除了一套前段UI框架React
。这个框架最大的有点就在于让UI的开发都基于组件
,这样View都是根据props和state变化的。
项目地址:https://github.com/future-challenger/petshop/tree/master/client
虽然学React
比起来其他的前端框架要容易不少,但是其生态的各种工具(Babel, Webpack)却着实让人费一番功夫。事实上,这些工具不只适用于React
。但是为了发挥ES2015
和JSX
的威力需要它们。这里,我们主要讨论如何建立React
的开发环境,工具的事不做主要讨论。
现在开始进入正题
创建一个目录react-demo的目录,并在里面初始化npm项目。
mkdir react-demo
cd react-demo
npm init
按照要求填写npm init
命令需要的输入内容就可以。
安装配置Webpack
Webpack
是一个模块打包工具,可以把模块以及其依赖项一起打包成静态资源的工具。由于对加载器的支持,webpack和React完美契合。本文的后面会详细讨论。
使用npm安装webpack。
npm install webpack --save-dev
Webpack需要某些配置才能完成给他的工作。所以我们需要创建一个webpack.config.js
的配置文件。
touch webpack.config.js
在该文件中添加如下的代码。
var webpack = require('webpack');
var path = require('path');var BUILD_DIR = path.resolve(__dirname, 'src/client/public');
var APP_DIR = path.resolve(__dirname, 'src/client/app');var config = {entry: APP_DIR + '/index.jsx',output: { path: BUILD_DIR,filename: 'bundle.js'}
};module.exports = config;
Webpack的配置最少需要两项,一个是入口属性,一个是输出属性。APP_DIR
指向React项目的代码所在目录,BUILD_DIR
指向打包后文件的输出目录。
就如同配置项名称所表达的一样。entry是打包所需要的入口文件。如果你对静态语言,比如c/c++之类的熟悉的话。这个入口文件就是c/c++包含main方法的文件。Webpack支持多个入口文件。这里目录src/client/app里的index.jsx文件就是整个应用的入口文件。
output指明webpack在打包完成后需要做什么。这里,使用src/client/public目录存放打包后生成的文件bundle.js。
在src/client/app目录下创建文件index.jsx。并添加如下代码。
console.log('Hello World!');
在terminal里输入下面的命令。
$ ./node_modules/.bin/webpack -d
命令会调用webpack,生成开发环境下的bundle.js文件以及关联的map文件bundle.js.map。这两个文件都在配置文件制定的目录src/client/public下。
但是目前只看到了编译之后的js文件,不够直观。在目录src/client下创建一个index.html文件。这样js文件是否加载成功都能看到了。
<html><head><meta charset="utf-8"><title>React.js using NPM, Babel6 and Webpack</title></head><body><div id="app" /><script src="public/bundle.js" type="text/javascript"></script><span style="float:center">Yo!</span></body>
</html>
现在打开浏览器,你就会看到“Yo”了。
注意:
有一个webpack的加载器`html-loader`可以自动创建html文件。里面会把编译以后的js文件的路径添加好。
使用Babel-Loader
就如前文所说,使用JSX和ES2015我们的开发效率会更高。但是JSX语法和ES2015在某些浏览器里是不兼容的。
因此,如果我们要使用React代码,我们就需要使用一个工具把JSX和ES2015翻译成浏览器都支持的语法。Babel
就是干这个用的。
在安装webpack的时候我们就接触到了一个概念加载器,Webpack就是用这个加载器来翻译指定的文件的。
使用npm安装babel-loader。
npm install babel-loader babel-preset-es2015 babel-preset-react --save-dev
babel-preset-es2015和babel-preset-react是babel-loader
使用的插件。专门用来翻译JSX和ES2015语法。安装之后还需要配置一下才能使用。
创建一个.babelrc的文件,并添加一下内容。
touch .babelrc
{"presets": ["es2015", "react"]
}
下一步就是告诉webpack使用babel-loader
来打包文件。
打开webpack.config.js并添加如下内容。
var webpack = require('webpack');
var path = require('path');var BUILD_DIR = path.resolve(__dirname, 'src/client/public');
var APP_DIR = path.resolve(__dirname, 'src/client/app');var config = {entry: APP_DIR + '/index.jsx',output: {path: BUILD_DIR,filename: 'bundle.js'},module: {rules: [{test: /\.jsx$/,use: ['babel-loader',],include: [// path.resolve(__dirname, "app")APP_DIR],},
};module.exports = config;
loaders
属性对应的值是一个数组。不过我们只是用babel-loader
。每一个加载器都需要通过test
属性指定可以处理的文件的后缀。我们的babel-loader
用来处理.js和.jsx文件。include
属性指定处理哪个目录下的文件。loader
属性就是加载器的名称。
现在环境配置就都完成了。下面写几行代码体验一下。
Hello React
使用npm安装react和react-dom。
npm install react react-dom --save
把index.jsx文件里的console.log(...)
替换成下面的代码。
import React from 'react';
import {render} from 'react-dom';class App extends React.Component {render() {return <p> Yo, React </p>
}
}render(<App />, document.getElementById('app'));
执行我们上面说的命令。
./node_modules/.bin/webpack -d
现在你就可以在浏览器里看到Yo React了。
更进一步
让webpack监视文件变化
每次修改了文件之后还要停止-启动一次webpack的命令实在是太麻烦了。我们可以简单的修改一下命令。
./node_modules/.bin/webpack -d --watch
现在webpack就在监视模式下运行了,每次文件修改发生之后都会自动打包。要看到实际效果,可以把Yo React修改成任何其他的字符串。之后在浏览器里刷新一下就会看到结果。
如果你连刷新浏览器都懒得可以使用react-hot-loader。
使用npm运行
命令./node_modules/.bin/webpack
可以简化一下。
在packages.json文件里修改。
"scripts": {"test": "echo \"Error: no test specified\" && exit 1","dev": "webpack -d --watch","build": "webpack -p"},
现在使用命令npm run build
就可以让webpack在产品模式下运行了。在这个模式下会自动压缩打包好的文件。命令npm run dev
会在监视模式下运行webpack。
添加一些文件
在示例中,我们只有一个叫做App
的组件。我们来添加更多组件。
创建一个新的文件叫做AwesomeComponent.jsx,并添加如下代码。
import React from 'react';class AwesomeComponent extends React.Component {constructor(props) {super(props);this.state = {likesCount: 0};this.onLike = this.onLike.bind(this);}onLike() {let newLikesCount = this.state.likesCount + 1;this.setState({likesCount: newLikesCount});}render() {return (<div>Likes: <span>{this.state.likesCount}</span>
<div><button onClick={this.onLike}>Like Me</button></div>
</div>);}
}export default AwesomeComponent;
在index.jsx文件中引入。
import React from 'react';
import {render} from 'react-dom';
import AwesomeComponent from './AwesomeComponent.js';class App extends React.Component {render() {return (<div><p> Yo, React </p>
<AwesomeComponent /></div>
)
}
}render(<App />, document.getElementById('app'));
如果webpack已经运行在监视模式下了,那么直接刷新一下浏览器就可以看到AwesomeComponent
的运行结果了。
总结
本文可以用来指导你配置React的开发环境。
配置React的Babel 6和Webpack 2环境相关推荐
- React多页面应用5(webpack生产环境配置,包括压缩js代码,图片转码等)
本教程总共7篇,每日更新一篇,请关注我们!你可以进入历史消息查看以往文章,也敬请期待我们的新文章! 1.React多页面应用1(webpack开发环境搭建,包括Babel.热更新等) ----2017 ...
- 记一次node+react项目发布过程(一)--webpack生产环境打包优化
先附上项目效果: 项目地址: http://47.105.144.204/index github: github.com/dsying/reac- 未优化之前 webpack配置文件 const p ...
- 使用webpack、babel、react、antdesign配置单页面应用开发环境
这是Webpack+React系列配置过程记录的第一篇.其他内容请参考: 第一篇:使用webpack.babel.react.antdesign配置单页面应用开发环境 第二篇:使用react-rout ...
- Create React App 2.0 正式发布:Babel 7、webpack 4 等
英文原文:Create React App 2.0: Babel 7, Sass, and More – React Blog 以下是简要翻译 React 本身是没有附带任何编译工具的,如果没有测试运 ...
- React + Typescript + Webpack 开发环境配置
对于复杂或多人开发的 React 项目来说,管理和使用每个组件的 props . state 或许会成为一件让人头痛的事情,而为每一个组件写文档,成本也会比较大,对项目的开发效率也不是最理想的. Ty ...
- 从零开始配置 react + typescript(三):webpack
本篇为 从零开始配置 react + typescript 系列第三篇,将带大家完成模板项目的 webpack 配置.整个项目的配置我力求达到以下目标: 灵活: 我在配置 eslint 是选择使用 j ...
- React系列---Babel
Babel是一个广泛使用的转码器,可以将ES6/ES7代码转为ES5代码.JavaScript在不断发展,各种新的标准提案层出不穷,由于浏览器的多样性导致可能几年之内都无法广泛普及,Babel可以让你 ...
- 配置React项目的运行环境
两种配置react项目运行环境的方法 第一种方法,一步步配置项目的运行环境: 1)下载node,在官方网站可以下载,安装步骤不难,差不多一步步意 点next就行: 2)运行cmd 输入node -v ...
- 六、Webpack详解学习笔记——webpack的安装、起步、配置、loader的使用、webpack中配置Vue、plugin的使用、搭建本地服务器、webpack配置的分离
一.认识webpack 什么是webpack? 这个webpack还真不是一两句话可以说清楚的. 我们先看看官方的解释: At its core, webpack is a static module ...
最新文章
- 南理工c语言程序设计,北理工年C语言程序设计考试.doc
- Exchange 2010 共享邮箱
- VS2017源代码版本管理
- jenkins 手动执行_我常用的SpringBoot+Jenkins自动化部署技巧,贼好用,推荐给大家...
- redis session java获取attribute_redis里的数据结构
- java返回datatable_(转)在JAVA实现DataTable对象(三)——DataTable对象实现
- 北京可以备案什么域名
- Swift4.0复习Optional
- CentOS6.8安装oracle11gR2
- Linux快速构建apache web服务器
- 2d模型文件_Supergiant美术师:如何将2D美术做成3D游戏模型?
- Wifi模块与串口助手通信的常用AT指令集
- 银行卡四要素验证补充测试
- 一年级计算机知识竞赛,2016一年级语文下册基础知识竞赛试题
- vue+typescript(vben-admin)前端开发
- 移植mysql到安卓手机_记录dbnet文本检测转ncnn并移植到安卓上
- Android TextView 文字两端对齐
- 三星识别文字_三星手机实现音频转文字、文字录入的方法,不知道的看这里!一遍就会了...
- 计算机实验小学教导主任,小学教导主任职责
- Pytorch版deeplabv3+环境配置训练自己的数据集
热门文章
- 数据产品经理:如何做需求管控?
- 2019年上半年收集到的人工智能大神与大咖观点文章
- 业界丨一文看懂AI人才百万美元年薪因何而来?
- 《用Python进行自然语言处理》第 9 章 建立基于特征的文法
- (已解决)Jupyter Notebook使用argparse报错:An exception has occurred, use %tb to see the full traceback.
- 生成式AI,引领AI从“换脸”到“造脸”
- IBM将收购Instana公司,持续推进其混合云和人工智能战略
- 【创新应用】未来10年,这些黑科技必将颠覆我们的生活
- 【机器视觉】机器视觉产业链
- 国产首款脑机编解码集成芯片发布