一次react从0开始建站体验及各种填坑--开始前的准备

最近需要做一个前端网站，多个页面，有搜索。决定使用react，虽然以前也用过react做过管理后台，但是从0开始建站还是第一次，中间遇到了许多问题和各种坑，最终可以算是还算圆满的解决了。以下记录主要操作过程，大量参考了网上查找到的各种资料。

1、安装npm、react（下次可以跳过此步骤）

安装npm

$ brew install node

配置cnpm

$ npm install -g cnpm --registry=https://registry.npm.taobao.org
$ npm config set registry https://registry.npm.taobao.org

安装create-react-app

$ cnpm install -g create-react-app

2、创建项目

$ create-react-app my-app

3、安装各种需要的软件并配置

进入项目目录

$ cd my-app/

根据需求，大致需要安装路由、less、ajax、代理等支持软件

• 路由

$ cnpm install react-router-dom --save
$ cnpm install history --save

如果使用createBrowserHistory的话，代码编译后上传到nginx环境，需要在配置中增加以下内容

location / {
    try_files  $uri /index.html;
}

• less

$ cnpm install less less-loader --save-dev
$ npm run eject

最后一步是将项目配置文件暴露出来，react要支持less必须要修改config/webpack.config.js

打开 config/webpack.config.js，有三个地方要修改

1、找到

const sassModuleRegex = /\.module\.(scss|sass)$/;

在后面添加

const lessRegex = /\.less$/;
const lessModuleRegex = /\.module\.less$/;

2、找到

if (preProcessor) {

整块改成

if (preProcessor) {
    if(preProcessor === 'less-loader') {
        loaders.push({
            loader: require.resolve(preProcessor),
            options: {
                sourceMap: isEnvProduction && shouldUseSourceMap,
                javascriptEnabled: true,
            },
        });
    }else{
        loaders.push({
            loader: require.resolve(preProcessor),
            options: {
                sourceMap: isEnvProduction && shouldUseSourceMap,
            },
        });
    }
}

3、找到 test: sassModuleRegex, 开头的对象，在后面增加

{
    test: lessRegex,
    exclude: lessModuleRegex,
    use: getStyleLoaders(
        {
            importLoaders: 2,
            sourceMap: isEnvProduction && shouldUseSourceMap,
        },
        'less-loader'
    ),
    sideEffects: true,
},
{
    test: lessModuleRegex,
    use: getStyleLoaders(
        {
            importLoaders: 2,
            sourceMap: isEnvProduction && shouldUseSourceMap,
            modules: true,
            getLocalIdent: getCSSModuleLocalIdent,
        },
        'less-loader'
    ),
},

• ajax

$ cnpm install whatwg-fetch --save

• 代理

$ cnpm install http-proxy-middleware --save

新建文件 src/setupProxy.js

const proxy = require('http-proxy-middleware');

module.exports = app => {
    app.use(
        proxy('/api', {
            target: 'http://localhost/api/index.php/',
            changeOrigin: true,
            pathRewrite: {
                '^/api': '',
            },
        })
    );
};

效果是前端 fetch('/api/web/list') 实际指向的是：http://localhost/api/index.ph...

4、运行项目，开始编程

$ npm start

基本的安装和配置差不多就是这些了，接下来就是我的强项了，开始码代码