前言
Egg.js是一个基于Node.js的框架，它采用约定优于配置的方式，让团队可以快速开发Node.js应用。Egg-born-starter-front-backend则是Egg.js的一个启动器。它提供了多种前后端分离的开发方案，并且也非常适合团队快速开发Node.js应用。本文就来介绍一下这个npm包的使用方法。
1. 安装
首先，要使用这个npm包，需要安装Egg.js。如果还没有安装，可以使用下面的命令进行安装：
$ npm i egg --save
然后，就可以安装egg-born-starter-front-backend：
$ npm i egg-born-starter-front-backend --save
2. 配置
接下来就要配置webpack了，这里配置的是针对适用于React的Egg.js应用。首先，需要安装webpack和webpack-cli：
$ npm i webpack webpack-cli --save-dev
然后，在config/config.default.js中添加如下代码：
exports.webpack = {
enable: true,
package: 'egg-webpack',
};
exports.webpackreact = {
enable: true,
package: 'egg-webpack-react',
};在config/config.prod.js中添加如下代码：
-- -------------------- ---- -------
--------------- - -
---- -
------ ------------------------
----------- -----------
--
-- --- ----- ---- -- ------ -- ------ --- ---- -- --- -----------
-- -------- -
-- ------- -----
-- -------- - ---------- --
-- --
-------- -
----------- ------- --------
--
--在config/config.dev.js中添加如下代码：
-- -------------------- ---- -------
--------------- - -
-- -------- -------
------ -
-- ------- ------- -- -------
-------- ------
-------- -
-
----------------------------------------
-
-- ---- ------- -------- ---- ------
-- ------ ----- ----- -------
------------ -----
--
--
--
-------- -------------------------------------
--
--接下来，需要在Egg.js应用的根目录创建app/web/page目录。在这个目录下，创建一个main.jsx文件。在main.jsx中添加如下代码：
-- -------------------- ---- ------- ------ ----- ---- -------- ------ -------- ---- ------------ ------ --- ---- -------- ------ -------------------- ---------------- ---- --- ------------------------------- --
这个文件就是React应用的入口文件。
然后，在.config目录下创建egg.js文件，在egg.js中添加如下代码：
-- -------------------- ---- -------
------------ - ----- ------
--------------- - -
------ -
------ -
-------- --------
--
----------- -----------
-------- --------------
--
-- ---- -----
--这个文件是配置Egg.js应用的文件。
至此，Egg.js的配置已经完成。
3. 使用
使用egg-born-starter-front-backend需要更改controller层中的代码，主要表现在controller层的代码需要调用app.meta.records，还需要在config.default.js增加如下配置：
-- -------------------- ---- ------- -------------- - - ------------- -------- -- ------------------- - - ----------- --------- ------- ---------------- -- -------------- - - ------- ----- -------- ------------- -- --------------------- - - ------- ----- -------- --------------------- --
使用前，在app/web目录新建model.xml，具体内容可以看egg-born-starter-front-backend内model.xml的例子。
首先使用 npm run build-web 打包前端代码。
然后使用 npm run build-dev 打包开发环境。
使用 npm start 启动应用。
4. 示例代码
在前面的配置中，我们已经在app/web/page下创建了一个main.jsx文件，但是我们没有写App这个组件。这里就分享一个例子，App组件主要渲染了一个Hello World。
-- -------------------- ---- -------
------ ----- ---- --------
----- --- ------- --------------- -
-------- -
------ ---------- -------------
-
-
------ ------- ----5. 总结
通过本文，我们了解了npm包egg-born-starter-front-backend如何应用于Egg.js，并分享了一个简单的例子。这个npm包可以让我们快速构建一个前后端分离的开发环境，提供多种前后端分离的开发方案。当我们需要快速开发Node.js应用的时候，这个npm包一定是我们的好帮手。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005607381e8991b448de9cd