react開發環境搭建
2016-03-30 11:31
344 查看
最近接触react框架,小记一下~~~
JSX 支持
ES6 支持
配合 webpack 非常方便。
npm(Node Package Manager)是nodejs时代不可或缺的最好的包管理器,现在已经随nodejs官方包同时会安装到你的设备上去。只要给项目书写好package.json放于项目根目录,在重新部署之时只需要执行
NPM主要运用于Node.js项目的内部依赖包管理,安装的模块位于项目根目录下的node_modules文件夹内。而Bower大部分情况下用于前端开发,对于CSS/JS/模板等内容进行依赖管理,依赖的下载目录结构可以自定义。
关于NPM的具体使用已经不需更多赘述,可以自行参考http://www.cnblogs.com/reese-blogs/p/5336460.html
安装Bower
例如:bower install chartjs 安装chart.js
安装 Webpack:
Webpack 使用一个名为
使用npm start启动项目,使用npm run build 打包
假设我们在当前工程目录有一个入口文件
监听编译:
更多关于 Webpack 的介绍
webpack-howto
开发环境配置
要搭建一个现代的前端开发环境配套的工具有很多,比如 Grunt / Gulp / Webpack / Broccoli,都是要解决前端工程化问题,这个主题很大,这里为了使用 React 我们只关注其中的两个点:JSX 支持
ES6 支持
配合 webpack 非常方便。
Webpack 配置 React 开发环境
Webpack 是一个前端资源加载/打包工具,只需要相对简单的配置就可以提供前端工程化需要的各种功能,并且如果有需要它还可以被整合到其他比如 Grunt / Gulp 的工作流。npm(Node Package Manager)是nodejs时代不可或缺的最好的包管理器,现在已经随nodejs官方包同时会安装到你的设备上去。只要给项目书写好package.json放于项目根目录,在重新部署之时只需要执行
npm install一行简单的命令,所有相关的依赖就能够自动安装到项目目录下面,并且还能很方便的对不同项目的不同依赖包版本进行良好、统一的管理。
NPM主要运用于Node.js项目的内部依赖包管理,安装的模块位于项目根目录下的node_modules文件夹内。而Bower大部分情况下用于前端开发,对于CSS/JS/模板等内容进行依赖管理,依赖的下载目录结构可以自定义。
关于NPM的具体使用已经不需更多赘述,可以自行参考http://www.cnblogs.com/reese-blogs/p/5336460.html
安装Bower
npm install -g bower之后你就可以使用
bower install类似于NPM的方式,对于当前项目进行前端依赖的相关管理。使用起来和NPM一样方便快捷。
例如:bower install chartjs 安装chart.js
安装 Webpack:
npm install -g webpack
Webpack 使用一个名为
webpack.config.js的配置文件,要编译 JSX,先安装对应的 loader:
npm install babel-loader --save-dev
使用npm start启动项目,使用npm run build 打包
假设我们在当前工程目录有一个入口文件
entry.js,React 组件放置在一个
components/目录下,组件被
entry.js引用,要使用
entry.js,我们把这个文件指定输出到
dist/bundle.js,Webpack 配置如下:
var path = require('path'); module.exports = { entry: './entry.js', output: { path: path.join(__dirname, '/dist'), filename: 'bundle.js' }, resolve: { extensions: ['', '.js', '.jsx'] }, module: { loaders: [ { test: /\.js|jsx$/, loaders: ['babel'] } ] } }
resolve指定可以被
import的文件后缀。比如
Hello.jsx这样的文件就可以直接用
import Hello from 'Hello'引用。
loaders指定 babel-loader 编译后缀名为
.js或者
.jsx的文件,这样你就可以在这两种类型的文件中自由使用 JSX 和 ES6 了。
监听编译:
webpack -d --watch
更多关于 Webpack 的介绍
webpack-howto
相关文章推荐
- MVVM 模式优化MVC模式之With ReactiveCocoa
- React.js入门学习第一篇
- 基于React.js实现原生js拖拽效果引发的思考
- MVVM With ReactiveCocoa
- React组件生命周期
- React Native for Android 发布独立的安装包
- 夜晚 十点 React-Native 源码 暴力畜 系列
- 配置React Native环境
- 知乎上关于ReactNative的评论汇总(网友们有才哟...)
- 深入浅出React Native 3: 从零开始写一个Hello World
- 使用Typescript编写Redux+Reactjs应用程序
- React.js实现原生js拖拽效果及思考
- ReactiveCocoa
- ReactJS学习笔记(一)-深入理解ReactJS的面向组件即对象
- 深入浅出React(一):React的设计哲学 - 简单之美
- [React] React Router: Named Components
- [React] React Router: Route Parameters
- 搭建react-native过程中,cmd中输入npm install -g react-native-cli出现nmp error 404
- webpack 打包一个简单react组件
- 颠覆式前端UI开发框架:React