简介
redux-webpack-es6-boilerplate 是一款完全基于 es6 的 React 和 Redux 开发环境的脚手架工具，它包含了最新版的 React、Redux 和 Webpack，并使用了 babel 来做代码转换，所有的代码都是采用 es6 语法的，可以很好地进行模块化管理和打包工作。
这个工具是适用于初学者和有经验的开发者，可以帮助你快速构建出一个完整的项目，并且提供很多便利的工具和组件。
安装和使用
首先你需要安装 npm 包管理工具，并在命令行窗口中输入以下命令：
npm install --global redux-webpack-es6-boilerplate
等待安装完成后，在命令行窗口中输入以下命令：
redux-webpack-es6-boilerplate init
然后根据提示操作即可，这个简单的工具会帮你快速构建出一个基本的 React + Redux 项目，并提供了很多常用的组件和工具。
目录结构
当你安装好了 redux-webpack-es6-boilerplate 并启动了项目，你会看到一个如下的目录结构：
-- -------------------- ---- ------- -- ------ - -- ---- - - - -- -------- - - - -- ----------- - - - -- ---------- - - - -- ----------- - - - -- --------- - - - -- ------ - - - -- -------- - -- ------------- - -- ---------- - -- ------------ - -- ---------
其中，build 目录是 Webpack 打包后的输出目录，src 目录下是项目源代码，如果你要修改源代码，就在这个目录下进行操作即可。
Actions 目录存放的是 Redux 的 Action 相关代码，Components 目录存放的是 React 组件的代码，Constants 目录存放的是 Redux 的常量定义，Containers 目录存放的是 React 容器组件的代码，Reducers 目录存放的是 Redux 的 Reducer 相关代码，Store 目录存放的是 Redux 的 Store 相关代码，index.js 是整个应用的入口文件。
配置使用
在项目启动后，你可以在命令行窗口中输入以下命令来启动项目：
npm start
这个命令会自动打开一个浏览器窗口，并访问 http://localhost:8080 来运行项目。
如果你要打包发布项目，则在命令行窗口中输入以下命令即可：
npm run build
这个命令会自动打包项目，并把所有的代码和依赖打包到一个单独的文件中，便于发布使用。
示例代码
以下是一个简单的 React + Redux 示例：
-- -------------------- ---- ------- -- -------------------- ------ ----- --------- - -- -- -- ----- ----------- --- ------ ----- --------- - -- -- -- ----- ----------- ---
-- -------------------- ---- -------
-- -------------------------
------ ----- ---- --------
------ - ------- - ---- --------------
------ - ---------- --------- - ---- -------------
----- ------- - -- ------ ---------- --------- -- -- -
-----
--------- -----------
------- --------------------------------------
------- --------------------------------------
------
--
----- --------------- - ----- -- --
------ -----------
---
----- ------------------ - - ---------- --------- --
------ ------- ------------------------ -----------------------------// src/constants/index.js export const INCREMENT = 'INCREMENT'; export const DECREMENT = 'DECREMENT';
-- -------------------- ---- -------
-- ---------------------
------ - --------------- - ---- --------
------ - ---------- --------- - ---- ---------------
----- ------------ - -
------ -
--
----- ------------ - ------ - ------------- ------- -- -
------ ------------- -
---- ----------
------ - --------- ------ ----------- - - --
---- ----------
------ - --------- ------ ----------- - - --
--------
------ ------
-
--
------ ------- -----------------
------ ------------
----- -------------------- ---- -------
-- ---------------------------
------ - ---------------- ----------- - ---- --------
------ ----- ---- --------------
------ - ------------------- - ---- ---------------------------
------ ----------- ---- --------------
----- -------------- - -- --
------------
------------
--------------------
----------------------
-
--
------ ------- ----------------- -------------------- ---- -------
-- ------------
------ ----- ---- --------
------ -------- ---- ------------
------ - -------- - ---- --------------
------ -------------- ---- -------------------------
------ ------- ---- -----------------------
----- ----- - -----------------
----------------
--------- --------------
-------- --
------------
-------------------------------
--这个简单的代码演示了如何使用 Redux 来实现一个计数器，其中，increment、decrement 定义了两个 Action，Counter 是一个 React 组件，Constants 定义了 INCREMENT 和 DECREMENT 两个常量，Reducers 定义了 countReducer，Store 定义了 configureStore，而 index.js 是整个应用的入口文件。
总结
通过本文的介绍，你已经可以初步了解 redux-webpack-es6-boilerplate 这个 npm 包的使用方法和使用场景，以及如何用 React 和 Redux 实现一个简单的计数器。如果你想深入学习 React 和 Redux，可以通过这个工具快速搭建出一个模板项目，并开始尝试一些更深入的内容和技巧。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6006700de361a36e0bce8cc0