IT博客汇 | 站长平台项目总结 · 看不见我的美

站长平台项目总结 · 看不见我的美 · 是你瞎了眼

馬腊咯稽发表于 2019-07-07 00:00:00

Git 大小写敏感问题

部署到测试环境时一直打包失败；本地已经没有要提交代码了，但是终端提示文件引用路径错误，找不到对应文件。原来是 Git 忽略了对文件路径与文件名称大小写的检查；太扯了，第一次遇到。

解决方法：

⌘ + shift + · 显示隐藏文件，找到项目根目录下的 .git 文件夹，里边有一个 config 文件，打开 config，将 ignorecase 的值修改为 false；
或者在终端输入 git config core.ignorecase false，回车。

配置 proxy 后报 “Invalid Host Header” 错误

对接过程中，为了和主站的登录状态保持同步，本地通过 nginx 代理，将项目运行地址指向了 “u.huaban.com”，但项目跑起来以后报 “Invalid Host Header” 错误。CRA 文档提到 “进行远程开发时，将进行更严格的主机检查” ，文档也给了详细的解决办法。

在项目根目录新建 .env.development 文件，文件内容为：

1

HOST = u.huaban.com;

打包时禁止生成 *.map

SourceMap 可以方便我们在控制台对应用进行调试，但准备打包上线的项目，已经经过充分的测试，最重要的是 *.map 真的很大。

CRA 在打包时，默认会生成 .map，禁用方式很简单，编辑 package.json：

1
2
3
4
5


"scripts": {
 ...
 "build": "GENERATE_SOURCEMAP=false react-app-rewired build",
 ...
}

AntDesign 按需引入并修改主题色

官方文档上有详细的说明，这里做一个备忘：

安装以下依赖：

1
2
3
4
5
6
7


"devDependencies": {
 "babel-plugin-import": "^1.12.0",
 "customize-cra": "^0.2.14",
 "less": "^3.9.0",
 "less-loader": "^5.0.0",
 "react-app-rewired": "^2.1.3"
}

在项目根目录新建 config-overrides.js 文件，编辑文件内容：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12


const { override, fixBabelImports, addLessLoader } = require('customize-cra');
module.exports = override(
 fixBabelImports('import', {
 libraryName: 'antd',
 libraryDirectory: 'es',
 style: true
 }),
 addLessLoader({
 javascriptEnabled: true,
 modifyVars: { '@primary-color': '#ec414d' }
 })
);

编辑 package.json：

1
2
3
4
5
6


"scripts": {
 "start": "react-app-rewired start",
 "build": "react-app-rewired build",
 "test": "react-app-rewired test",
 "eject": "react-scripts eject"
}

查看项目打包后各个文件的具体构成

之前写 Vue 的时候，Vue-Cli 官方文档有提到过这个点；这次顺带发现了 BizCharts 没有按需引入的问题。

npm install source-map-explorer -D 安装依赖；
修改 package.json：

1
2
3
4
5
6
7


"scripts": {
 ...
 "analyze": "source-map-explorer 'build/static/js/*.js'",
 ...
 "build": "GENERATE_SOURCEMAP=true react-app-rewired build",
 ...
}

打包后，执行 npm run analyze。

React 路由懒加载

无论是 Vue 还是 React，路由懒加载主要是利用 Webpack 对不同的文件引用方式有不同的打包策略；Webpack 文档对这一块有详细的说明，我使用了 react-loadable 插件：

1
2
3
4
5
6
7
8


import React from 'react';
import Loadable from 'react-loadable';
import Loading from '../../components/Loading';
const LC = Loadable({
 loader: () => import('./index'), // 告诉 Webpack 这个文件异步加载
 loading: Loading
});
export default () => <LC />;