ReactJS + Webpack 开发环境配置

一、简介

1、关于React

(1)Facebook 开发;

(2)React不是完整的MVC框架,React只负责V(View);

(3)React很快。React创造了虚拟DOM(Virtual DOM)的概念,使性能显著提高;

(4)组件化。React的开发都是组件化的开发思想,具有高组合能力、重用性和可维护性;

(5)JSX语法。

(6)ReactJS官网地址:http://facebook.github.io/react/

2、关于webpack

webpack是一款模块加载器兼打包工具,它能把各种资源,例如JS(含JSX)、coffee、样式(含less/sass)、图片等都作为模块来使用和处理。

webpack的官网地址:http://webpack.github.io/

 

二、ReactJS + Webpack 开发环境配置

1、项目目录结构:

- React根目录                                         // 目录/项目目录
    - src目录                                         // 目录/项目代码文件夹
        - js目录                                      // 目录/你所编写的代码所在文件夹
             - components目录                         // 目录/你所编辑的组件
             - main.js                                // 文件/你所编辑的JS主入口文件
         - index.html                                 // 文件/项目入口文件
         - main.min.js                                // 文件/JS目录中main.js编译得到
    - package.json                                    // 文件/所有的依赖和配置
    - webpack.config.js                               // 文件/项目webpack配置

2、建立package.json

{
 "name": "reactJS",
 "version": "1.0.0",
 "description": "",
 "main": "webpack.config.js",
 "dependencies": {
 "babel-loader": "6.2.0",
 "babel-plugin-add-module-exports": "0.1.2",
 "babel-plugin-react-html-attrs": "2.0.0",
 "babel-plugin-transform-class-properties": "6.3.13",
 "babel-plugin-transform-decorators-legacy": "1.3.4",
 "babel-preset-es2015": "6.3.13",
 "babel-preset-react": "6.3.13",
 "babel-preset-stage-0": "6.3.13",
 "history": "^2.0.1",
 "react": "^0.14.1",
 "react-dom": "^0.14.7",
 "react-router": "1.0.3",
 "webpack": "1.12.9",
 "webpack-dev-server": "^1.14.1"
 },
 "devDependencies": {},
 "scripts": {
 "test": "echo \"Error: no test specified\" && exit 1"
 },
 "author": "",
 "license": ""
}

3、配置webpack.config.js

var debug = process.env.NODE_ENV !== "production";
var webpack = require('webpack');
var path = require('path');
module.exports = {
 context: path.join(__dirname, "src"),
 devtool: debug ? "inline-sourcemap" : null,
 entry: "./js/main.js",
 module: {
 loaders: [
 {
 test: /\.jsx?$/,
 exclude: /(node_modules|bower_components)/,
 loader: 'babel-loader',
 query: {
 presets: ['react', 'es2015', 'stage-0'],
 plugins: ['react-html-attrs', 'transform-class-properties', 'transform-decorators-legacy'],
 }
 }
 ]
 },
 output: {
 path: __dirname + "/src/",
 filename: "main.min.js"
 },
 plugins: debug ? [] : [
 new webpack.optimize.DedupePlugin(),
 new webpack.optimize.OccurenceOrderPlugin(),
 new webpack.optimize.UglifyJsPlugin({ mangle: false, sourcemap: false }),
 ],
};

4、安装

npm install

5、测试

(1)index.html入口文件

在项目目录/src/下创建index.html文件

<!DOCTYPE html>
 <html>
 <head>
 <meta charset="utf-8">
 <title>ReactJS</title>
 </head>
 <body>
 <div id="app"></div>
 <script src="main.min.js"></script>
 </body>
 </html>

(2)创建并曝露一个组件

创建一个Hello组件,在项目目录/src/js/components下新建一个Hello.js文件。

import React from "react";
import ReactDOM from "react-dom";
export default class Hello extends React.Component {
 render(){
 return (
 <h1>Hello,{this.props.name}</h1>
 );
 }
 }

(3)引入组件

接着编辑项目目录/src/js/main.js文件。

import React from "react";
import ReactDOM from "react-dom";
import Hello from './components/Hello';
const app = document.getElementById('app');
ReactDOM.render(<Hello name="ken yao" />, app);

(4)编译运行

然后在命令窗口中进入项目文件夹,输入命令

webpack

这时开始编译,编译完成后,直接打开index.html即可看到效果。

目前项目目录如下:

react-dev

如果不想每次都手动编译,可以输入命令:

webpack --watch

这样我们每次对main.js修改后,只要到浏览器刷新即可看到最新结果。

当然还有更炫的,就是所谓的“热替换”(Hot-replace),可以让任何代码修改可以实时在浏览器中体现,而且不需要刷新浏览器。

三、webpack-dev-server和热替换

上面是直接在文件夹中双击打开入口index.html,而不是使用路由形式运行。

我们可以安装webpack-dev-server来达到目的。

npm install -g webpack-dev-server

上面安装完成后,我们执行

webpack-dev-server

这时候就已经有了一个轻量级的“服务器”了,在浏览器中输入http://localhost:8080/

这时会出来一个类似服务器目录管理的界面,如图。

webpack-dev-server

这时,如果我们点击src目录(我们入口文件index.html所在目录),可以看到我们的代码生效。

如果不想这么麻烦,我们可以直接把http://localhost:8080/指向src目录。

Ctrl + C 退出webpack-dev-server,然后输入

webpack-dev-server --content-base src

这时,直接在浏览器中输入http://localhost:8080/就可以得到想要的结果了。每次修改完刷新浏览器可以得到最新的结果。

webpack-dev-server2

如果我们不想每次修改完后刷新浏览器才能得到最新结果,而是想实时得到,我们可以运行命令

webpack-dev-server --content-base src --inline --hot

这样,你的每次修改保存后,webpack都会自动编译,并且自动将最新结果表现到浏览器上。

我们还可以把上面的

webpack-dev-server --content-base src --inline --hot

定义到package.json的”scripts”中,每次开启服务器,直接npm run 就可以了。

"scripts": {
 "server":"webpack-dev-server --content-base src --inline --hot",
 "test": "echo \"Error: no test specified\" && exit 1"
 }

开发调试时,输入

npm run server

在浏览器输入http://localhost:8080/

同样可以实时得到最新结果。

 

ReactJS + Webpack 开发环境配置就介绍到此了,ReactJS是一个必学的框架,Webpack可以极大的方便开发,Have Fun!

那时那我

jinyunblogadmin

4 thoughts to “ReactJS + Webpack 开发环境配置”

    1. 已经解决  ,好像是环境变量的问题,在stackoverflow上找到了答案。解决如下

      Try this

      echo $(npm config get prefix)/bin
      you will get STRING, which should include to your .bash_profile such way

      export PATH=$PATH:STRING

发表评论

电子邮件地址不会被公开。 必填项已用*标注