React菜鸟进阶史之构建项目
原创
一，创建应用
create-react-app 是React 官方推荐的，默认支持的，无配置的项目构建工具之一。
那什么叫无配置的呢？其实用过其他脚手架项目构建工具的人都知道，使用其他脚手架工具构建前端项目时有诸多需要选择的选项，项目目录里有额外的其他的资源目录，比如umijs。可是在create-react-app 中没有多余的选项，通过一行命令就能创建前端项目。
1.1 安装及卸载 create-react-app
通过以下命令来安装 create-react-app：
npm install -g create-react-app通过以下命令来卸载create-react-app：
npm uninstall -g create-react-app
# 或
yarn global remove create-react-app1.2 构建前端项目
构建前端项目有以下2种方式:
create-react-app my-app
# 或
npx create-react-app my-app如果要使用typescript模板有以下2种方式:
yarn create react-app my-app-ts --template typescript
# 或
npx create-react-app my-app-ts --template typescript二，必要的配置
项目创建好了以后我们还需要安装其他的一些必要的依赖，并进行设置。我选择的必要的依赖有 axios 网络请求库，less和less-loader库 等等。
2.1 非webpack 配置方式 配置 less
安装 less和less-loader 依赖:
cnpm install less-loader@5.0.0 less@3.11.1 --save-dev因为 less 和less-loader 过高的版本容易 报 TypeError: this.getOptions is not a function 错误，为了避免此问题安装时需要指定版本。
安装 react-app-rewired 和 customize-cra依赖:
cnpm install react-app-rewired customize-cra --save-dev修改 package.json 中的scripts项：
"scripts": {
"start": "react-app-rewired start",
"build": "react-app-rewired build",
"test": "react-app-rewired test --env=jsdom",
"eject": "react-scripts eject"
},增加 config-overrides 配置:
在项目根目录下新建config-overrides.js文件并在文件中写以下代码:
const { override, addLessLoader } = require('customize-cra');
module.exports = override(
addLessLoader({
strictMath: true,
noIeCompat: true,
loader: "css-loader",
options: {
modules: {
localIdentName: "[name]__[local]___[hash:base64:5]",
},
sourceMap: true
}
}),
)2.2 非webpack 配置方式 配置 其他必要的配置
在开发react前端项目的时在某个组件代码中引入另一个组件代码时一般的情况下用 "." 来替代上一级目录，如果选哟引入的组件的所在位置变的稍微深就更麻烦比如: import "../../../TestComponent"; 因此我们需要加入路径别名的方式优化文件引入方式。
为了避免跨域问题的处理，我们需要增加跨域处理方面的配置项。
具体方式是在config-overrides.js 文件里添加配置内容：
const { override, addLessLoader, addDecoratorsLegacy, addWebpackAlias } = require('customize-cra');
const packageName = require('./package.json').name;
const path = require("path");
const removeManifest = () => config => {
config.plugins = config.plugins.filter(
p => p.constructor.name !== "ManifestPlugin"
);
return config;
};
function pathResolve(pathUrl) {
return path.join(__dirname, pathUrl)
}
module.exports = {
webpack: override(
addDecoratorsLegacy(),
removeManifest(),
addWebpackAlias({
"@": pathResolve('./src')
}),
addLessLoader({
strictMath: true,
noIeCompat: true,
loader: "css-loader",
options: {
modules: {
localIdentName: "[name]__[local]___[hash:base64:5]",
},
sourceMap: true
}
}),
(config) => {
config.output.library = `${packageName}-[name]`;
//config.output.path = pathResolve("dist");
config.output.libraryTarget = `umd`;
config.output.jsonpFunction = `webpackJsonp_${packageName}`;
return config;
},
),
jest: config => {
return config;
},
devServer: configFunction => (proxy, allowedHost) => {
const config = configFunction(proxy, allowedHost);
config.headers = {
'Access-Control-Allow-Origin': '*',
};
return config;
},
paths: (paths, env) => {
return paths;
}
}安装axios网络库:
cnpm install axios--save-dev三，参考资料
【create-react-app 优雅定制指南】https://zhuanlan.zhihu.com/p/96103181
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。