React 开发环境配置
React 开发环境配置
要搭建现代的前端开发环境配套的工具有很多,比如 Grunt / Gulp / Webpack / Broccoli,都是要前端工程化问题,这个很大,这里为了使用 React 我们只关注其中的两个点:
JSX
ES6
好消息是业界领先的 ES6 编译工具 随着作者被 Facebook ,已经内置了对 JSX 的,我们只需要配置 Babel 编译工具就可以了,配合 webpack 非常方便。
Webpack 配置 React 开发环境
是前端资源加载/打包工具,只需要相对简单的配置就可以提供前端工程化需要的各种,并且如果有需要它还可以被整合到其他比如 Grunt / Gulp 的工作流。
安装 Webpack:npm install -g webpack
Webpack 使用名为 webpack.con.js 的,要编译 JSX,先安装对应的 loader: npm install babel-loader --save-dev
假设我们在当前工程目录有入口 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 的介绍