前言
随着前端应用的复杂性不断提高，越来越多的前端团队开始采用 Redux 进行状态管理。而基于 Webpack 的应用模块化开发已经成为业界标准，为此提供了一个快速开发 Redux 应用的脚手架是非常必要的。本文将介绍如何使用 npm 包 redux-webpack-boilerplate 快速搭建基于Redux的前端应用。
安装
首先，在命令行中使用 npm 安装 redux-webpack-boilerplate：
npm install --global redux-webpack-boilerplate
或者直接在项目中使用：
npm install --save-dev redux-webpack-boilerplate
另外，为了能够正常使用 redux-webpack-boilerplate，需要全局安装 webpack 和 webpack-dev-server：
npm install --global webpack webpack-dev-server
配置文件
安装完成后，会生成默认的配置文件（webpack.config.js、webpack.config.dev.js、.babelrc 和 .eslintrc），可以据此进行定制化修改。
开始使用
接下来，通过一个简单的示例来说明如何使用 redux-webpack-boilerplate。
首先，在项目根目录下创建一个 index.html 文件，用于加载打包后的 JavaScript 文件。
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
------------ ------- -------------------
-------
------
---- ---------------
------- ------------------------------
-------
------- 然后，在 src 目录下创建一个 index.js 文件作为应用入口，并编写一个简单的 Redux 应用：
-- -------------------- ---- -------
------ ----- ---- --------
------ -------- ---- ------------
------ - ----------- - ---- --------
------ - -------- - ---- --------------
------ --- ---- -----------------------
------ ------- ---- -------------
----- ----- - ---------------------
----------------
--------- --------------
------
------------
------------------------------
-- 在 src/components 目录下创建一个 App.jsx 文件作为 React 组件：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- --------------
----- --- - -- -------- --------- -- -- -
-----
------------ --------------
------- ------------------------------
------
--
----- --------------- - ----- -- --
-------- -----
---
----- ------------------ - -------- -- --
---------- -- -- ---------- ----- ----------- --
---
------ ------- ------------------------ ------------------------- 在 src/reducers 目录下创建一个 index.js 文件作为合并后的 reducer：
-- -------------------- ---- -------
----- ------- - ------ - -- ------- -- -
------ ------------- -
---- ------------
------ ----- - --
--------
------ ------
-
--
------ ------- -------- 最后，在命令行中输入以下命令来启动 webpack dev server：
webpack-dev-server --config webpack.config.dev.js --content-base src/
然后打开浏览器，输入 http://localhost:8080，即可看到页面效果。点击“+”按钮，可以看到计数器增加。
结语
通过本文的学习，我们学习到了如何使用 npm 包 redux-webpack-boilerplate 快速搭建基于 Redux 的前端应用，并定制化修改配置文件以支持应用特定的需求。现在，您可以尝试着使用 redux-webpack-boilerplate 搭建您的实际项目了。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/69416