create-react-app:来自 Facebook官方的零配置命令行工具
create-react-app 是来自于 Facebook 出品的零配置命令行工具，能够帮你自动创建基于 Webpack+ES6 的最简易的 React 项目模板，有助于初学者快速上手实践。安装 create-react-app 的方式也非常简单，可以直接使用npm命令进行全局安装。
npm install -g create-react-app create-react-app my-app cd my-app/ npm start
执行完上述命令之后，你可以直接打开http://localhost:3000，即可以看到你 React APP 的运行效果。此时也是处于开发模式下，如果你要进行发布，则使用npm run build进行编译。
create-react-app生成的目录格式如下所示:
my-app/ README.md index.html favicon.ico node_modules/ package.json src/ App.css App.js index.css index.js logo.svg
如果你是使用npm start来启动配置，那么自动会进入开发模式，此时热替换是处于自动激活状态，你也可以实时地在界面或者命令行中看到错误提示:
如果你使用npm run build来编译得到生产环境，此时代码会被编译到build目录下，此时会自动将整个应用打包发布，它会自动使用Webpack控件进行优化与压缩。
Multiple Application Configuration:真实环境下单项目多应用配置
上述所讲的create-react-app是来自于 Facebook 官方，不过笔者在自己的真实应用开发中还是习惯使用 Webpack-React-Redux-Boilerplate，其允许在一个项目中配置多个应用入口，同时支持开发模式、构建模式与库构建模式。同时笔者习惯不将 webpac k配置文件分成单独的 dev 与 prod 文件，而是合并到一个文件中。如果需要使用该模板，直接使用如下命令:
git clone -b boilerplate https://github.com/wxyyxc1992/Webpack-React-Redux-Boilerplate/ # 克隆模板文件夹
./install.sh # 安装运行所需要的依赖项得到的模本文件夹主要由以下构成:
├── README.md ├── README.zh.md ├── dev-config : 配置文件入口 │ ├── apps.config.js : 应用配置文件 │ ├── dev.html : 开发模式下使用的HTML文件 │ ├── devServer.js : 开发服务器 │ ├── eslint.js : ESLint配置文件 │ ├── template.html : 构建模式下推荐的HTML模板文件 │ └── webpack.config.js : webpack配置文件 ├── install.sh ├── package.json └── src : 源代码目录 ├── count : 某个应用 │ ├── App.js │ ├── async_library.js │ ├── colors.js │ ├── count.html │ └── count.js ├── helloworld │ ├── App.css │ ├── App.js │ ├── helloworld.css │ ├── helloworld.html │ ├── helloworld.js │ └── logo.svg ├── library │ ├── foo.js │ ├── library.html │ └── library_portal.js └── vendors.js
其核心的关于应用的配置文件即apps.config.js，在模板项目中其配置为:
/**
* Created by apple on 16/6/8.
*/
module.exports = {
apps: [
//HelloWorld
{
id: "helloworld",
title: "HelloWorld",
entry: {
name: "helloworld",
src: "./src/helloworld/helloworld.js"
},
indexPage: "./src/helloworld/helloworld.html",
compiled: true
},
//Count
{
id: "count",
title: "Count",
entry: {
name: "count",
src: "./src/count/count.js"
},
indexPage: "./src/count/count.html",
compiled: true
}
],
//开发服务器配置
devServer: {
appEntrySrc: "./src/helloworld/helloworld.js", //当前待调试的APP的编号
port: 3000 //监听的Server端口
},
//如果是生成的依赖库的配置项
library: {
name: "library_portal",//依赖项入口名
entry: "./src/library/library_portal.js",//依赖库的入口,
library: "libraryName",//生成的挂载在全局依赖项下面的名称
libraryTarget: "var"//挂载的全局变量名
}
};开发模式
开发模式下主要读取apps.config.js中的devServer配置，主要是可以配置调试的入口 JS 文件与开发服务器监听的端口号。开发模式下会自动使用dev.html作为默认的 HTML 文件传输到浏览器中展示，譬如在模板项目中是将 helloworld 项目作为当前正在开发的项目，切换到项目目录下使用npm start，即可开启开发模式，此时在浏览器内打开http://localhost:3000，即可以看到如下画面:
开发模式默认是支持热加载机制，另外，因为笔者经常需要进行移动端开发，因此需要在局域网内使用手机端进行访问，目前开发模式已经支持以 LAN 地址进行访问，你可以直接在其他端输入http://192.168.1.1:3000即可。
构建模式
对于应用中存在的多应用入口，主要是在apps.config.js中的apps下进行配置的，一个典型的应用配置为:
id: "helloworld", //编号
title: "HelloWorld", //生成的HTML文件中的标题
entry: {
name: "helloworld", //用于webpack的入口名
src: "./src/helloworld/helloworld.js" //入口文件地址},
indexPage: "./src/helloworld/helloworld.html", //HTML模板文件地址
compiled: true //是否进行编译我们使用npm run build即可以自动进行打包，同样的，会自动进行代码压缩与优化，同时还会将 CSS 提取到一个单独的文件中，以在文件头部引入。对于图片等资源也会自动放置到 dist 目录下。如果你使用npm run deploy，则会自动地建立一个监听 dist 目录的 HTTP Server，譬如在模板项目中使用npm run deploy，然后再访问http://localhost:8080，既可以得到如下界面:
另外，构建模式下也默认设置了vendors这个公共的Chunk来进行公共代码提取，建议是将 React 等公共代码的引入放置到src/vendors.js文件中，这样多应用之间共享的公共代码就会被提取出来。
库构建模式
有时候，我们希望使用 Webpack 编译好的函数能够直接在 Global 作用域下使用，或者能够通过 AMD/CMD 规范引入，最直观的用法就是能够直接挂载在 script 标签下使用。关于此部分的理论说明参考 Webpack Configuration。在模板项目中，关于库构建的配置在:
//如果是生成的依赖库的配置项
library: {
name: "library_portal",//依赖项入口名
entry: "./src/library/library_portal.js",//依赖库的入口,
library: "libraryName",//生成的挂载在全局依赖项下面的名称
libraryTarget: "var"//挂载的全局变量名
}我们首先构建一个基于 ES6 类的服务:
/**
* Created by apple on 16/7/23.
*//**
* @function 基于ES6的服务类
*/
export class FooService {
static echo(){
const fooService = new FooService();
return fooService.getMessage();
}
/**
* @function 默认构造函数
*/
constructor() {
this.message = "This is Message From FooService!";
}
getMessage() {
return this.message;
}
}然后设置一个模板的入口文件:
/**
* Created by apple on 16/7/23.
*/
import {FooService} from "./foo";
/**
* @function 配置需要暴露的API
* @type {{foo: {echo: FooService.echo}}}
*/
module.exports = {
foo: {
echo: FooService.echo
}
};注意，暴露出来的接口貌似只能是静态函数。最后我们使用npm run build:library进行库构建，构建完成后再 HTML 文件中可以如此使用:
alert(window.libraryName.foo.echo());
