ReactJS环境搭建

1.umi约定的目录结构

├── dist/                          // 默认的 build 输出目录
├── mock/                          // mock 文件所在目录，基于 express
├── config/
    ├── config.js                  // umi 配置，同 .umirc.js，二选一
└── src/                           // 源码目录，可选
    ├── layouts/index.js           // 全局布局
    ├── pages/                     // 页面目录，里面的文件即路由
        ├── .umi/                  // dev 临时目录，需添加到 .gitignore
        ├── .umi-production/       // build 临时目录，会自动删除
        ├── document.ejs           // HTML 模板
        ├── 404.js                 // 404 页面
        ├── page1.js               // 页面 1，任意命名，导出 react 组件
        ├── page1.test.js          // 用例文件，umi test 会匹配所有 .test.js 和 .e2e.js 结尾的文件
        └── page2.js               // 页面 2，任意命名
    ├── global.css                 // 约定的全局样式文件，自动引入，也可以用 global.less
    ├── global.js                  // 可以在这里加入 polyfill
├── .umirc.js                      // umi 配置，同 config/config.js，二选一
├── .env                           // 环境变量
└── package.json

2.HelloWord

1. 创建一个静态web工程

2. 控制台执行tyarn init -y
   工程中添加package.json
   

3. 控制台执行tyarn add umi --dev
   添加umi的依赖，node_modules目录出现一大堆文件
   –dev的意思：将这个插件引入到package.json文件中
   

4. 项目右键创建config/config.js文件
   添加export default {};
   

5. 项目右键创建src/pages/HelloWord.js
   添加：

export default () => {
    return <div>hello world</div>;
}

6. 启动项目
   控制台输入 umi dev
   地址栏输入 lolalhost:8000/HelloWord
   原理：在umi中，可以使用约定式的路由，在pages下的JS文件都会按照文件名称映射到一个路由。

7. 添加umi-plugin-react --dev插件
   控制台输入：

tyarn add umi-plugin-react --dev

–dev：将插件的版本信息写入package.json中

8. config.js文件中引入该插件

//导出一个对象
export default {
    plugins: [
        ['umi-plugin-react',{
            //暂时不启用任何功能
        }]
    ]
};

9. 转码
目的： 目前所写的js必须依赖umi才能启动，然而项目最终所需要的是html、css、js所以需要将这些js转码
操作：控制台执行 umi build
生成：disk/umi.js文件
10. 关于Path must be a string异常
产生的原因：项目默认添加的umi版本为3以上，新版本与umi-plugin-react插件冲突
解决方法：

1. 移除原有的umi-plugin-react插件
2. 添加@umijs/preset-react插件
3. 修改config.js文件中的配置格式
   将原来的plugins:[[xxx],{yy:{},…}]格式修改为
   yy:{},…