3秒钟快速搭建一个react多页应用

what

本文主要阐述了如何使用dawn快速搭建一个多页面应用。

why

单页有许多优缺点。而我司当前的情况比较适合于使用多页面应用，既提高了开发效率，保证了用户体验，又极大的兼容了原有的PHP体系。

how

1. 第一秒，准备原材料

   $ npm install dawn -g
   $ mkdir demo

2. 第二秒，初始化应用

   // react
   $ dn init -t react

3. 第三秒，多页配置
   在./src中，复制并修改index.js为所需的页面名称。当然也可以不复制不修改，此时就是一个单页面应用。dawn会自动读取./src中的js作为入口（不包括子目录中的js）

至此，多页面应用已经构建完成

extra

在此基础上，我又进行了一些额外配置

• 状态管理方案参考了这篇 利用Dawn工程化工具实践MobX数据流管理方案，或者可以说因为这篇文章对于Mobx的优秀实践，我发现了dawn这个工具

• 对webpack进行高度配置，在./下新建webpack.config.js。举个例子：

  module.exports = function(configs,webpack,ctx){
    //configs 为默认配置，可以在这里对其进行修改
    //webpack 当前 webpack 实例
    //ctx 当前构建「上下文实例」
    configs.plugins.push(new webpack.DefinePlugin({
      "process.env": { 
         NODE_ENV: JSON.stringify("production") 
       }
    }));
  };

• 将入口文件移入新建./src下的pages文件夹，同时在./.dawn/pipe.yml中修改dev和build下的webpack项

  entry: ./src/pages/*.js

• 修改./src/assets/*.html增加业务所需内容

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!