create-react-app开发常用配置教程

Hazel ·
更新时间:2024-11-14
· 846 次阅读

目录

引言

设置代理

模块热替换(HMR)

css局部化

支持装饰器写法

打包后路径问题导致页面空白

配置简化路径

按需引用antd-mobile(antd同)

打包构建分析

生产环境去掉map文件

配置less

配置不同环境变量

引言

注: 如未找到配置文件请使用npm run eject弹出配置文件

当前对应版本react 16.2

设置代理

在开发中往往是跨域请求的,配置一下请求代理可以解决这个问题

// package.json 文件 "proxy": "http://xxx.xxx", 模块热替换(HMR)

默认情况下在每次修改内容的时候都会刷新页面,有时候我们并不想要这样,比如有一个bug需要重复点击或者重复操作多次才能实现,但是由于我们每次修改都会刷新页面,可能会导致这个bug很难被测试或者实现,这个配置在我看来非常有用,当然这不是必须的,但是可以适当的提高开发效率。在React 的入口文件 src/index.js中,添加一些配置代码。

// src/index.js import React from 'react'; import ReactDOM from 'react-dom'; import App from './App'; import './index.css'; ReactDOM.render( <App />, document.getElementById('root') ); // +++++ 加入+++++ if (module.hot) { module.hot.accept(); } css局部化

正常导入css情况下会污染到全局

修改 webpack-config-dev.js 及 webpack-config-prod.js 配置

options: { modules: true, localIdentName: '__[local]--[hash:base64:5]' }

注意: 使用 css-module会导致 ant 样式失效...其次有其他css局部化解决方案 比如 styled-components可参考我另外一篇文章 骚里骚气的styled-components快速入门

支持装饰器写法

比如redux或者mobx可以使用@写法

安装 transform-decorators-legacy

npm install --save-dev babel-plugin-transform-decorators-legacy

插件中使用legacy是因为Babel 5支持处理装饰器,但是它也许会跟最终的标准有区别,所以才使用legacy这个词。

// package.json "babel": { "presets": [ "react-app" ], "plugins": [ // +++ 加入配置 +++ "transform-decorators-legacy", // ...ant配置 ] }

请注意, plugins 的属性非常重要: transform-decorators-legacy 应该放在最前面。 babel 设置有问题?请先查看这个 issue 。

打包后路径问题导致页面空白 // package.json 文件增加配置 ... "homepage": ".", ...

注: 如果直接打开index.html后文件正确加载但页面仍然空白,请检查你是否使用的是 BrowserRouter (同vue的history模式)需要后端配置支持,否则请使用HashRouter 即带 #

配置简化路径

当页面嵌套过深时我们会发现在路径通常都要这么写

import xx from './../../../xxx/qqq'通过配置webpack可以写成import xx from '@/xxx/qqq'

// 修改 webpack.config.dev 与 webpack.config.prod 两个文件 加入相同配置 ... // +++ 找个开心的地方加入配置 function resolve(dir) { return path.join(__dirname, '..', dir) } // 修改 alias: { 'react-native': 'react-native-web', // +++ 加入配置 '@': resolve('src') }

优点: 如果按照相对路径的方法引用,每次要计算.. 并且文件一旦迁移 那么又要重新计算,如此配置文件迁移也不需要计算

缺点: 在部分编辑器可能会失去文件引用高亮(比如webstrom), 并且不能通过快捷键快速查找其引用.

: 这属于webpack的配置,当然在vue-cli中也适用(更新:目前vue-cli已经默认支持这种配置)

按需引用antd-mobile(antd同)

安装 antd-mobile npm i antd-mobile -S

安装 babel-plugin-import npm i babel-plugin-import -D

// package.json 文件 "babel": { "presets": [ "react-app" ], // 加入配置 "plugins": [ // 如果使用了 定制颜色功能 将 "css" => true 同时需要配置 less ["import", { "libraryName": "antd-mobile", "style": "css" }] ] } 打包构建分析

build之后发现包体积比较大,用 webpack-bundle-analyzer 分析各个js文件的打包

// webpack.config.prod.js const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin; // ...code // 找到 plugins 记得别加错地方 很多 new xxx()的才是 plugins: [ new xxx(), new xxx(), // +++++ new BundleAnalyzerPlugin(), ] 生产环境去掉map文件

有时候你会发现build时间过长,参见npm run build takes 1-2 hours to build 我们可以去除掉map文件构建

// webpack.config.prod.js - devtool: shouldUseSourceMap ? 'source-map' : false // 改为 devtool: false, 配置less

安装

yarn add less-loader less --dev // webpack.config.dev.js module: { strictExportPresence: true, //... rules: [ // ... { test: /\.(css|less)$/, // 修改 use: [ require.resolve('style-loader'), { loader: require.resolve('css-loader'), options: { importLoaders: 1, }, }, { loader: require.resolve('postcss-loader'), options: {}, }, // 增加 { loader: require.resolve('less-loader') // compiles Less to CSS } ], }, ] // webpack.config.prod.js { test: /\.(css|less)$/, // 修改 loader: ExtractTextPlugin.extract( Object.assign( { fallback: { loader: require.resolve('style-loader'), options: { hmr: false, }, }, use: [ // ...code { loader: require.resolve('less-loader') // 增加 } ], }, extractTextPluginOptions ) ), } 配置不同环境变量

由于create-react-app 忽略了 env.NODE_ENV 环境变量的设置,参考文档 但是有时候在一些项目中,我们可能需要根据不同的环境变量使用不同的配置,那么我们可以这么做:

如果需要自定义环境变量 必须以REACT_APP_开头

// 修改package.json "scripts": { "start": "cross-env REACT_APP_SECRET_API=development node scripts/start.js", "build": "node scripts/build.js", "test": "node scripts/test.js --env=jsdom" // 这三个是我加的 可以根据你的业务需求来 "build:dev": "cross-env REACT_APP_SECRET_API=development node scripts/build.js", "build:test": "cross-env REACT_APP_SECRET_API=test node scripts/build.js", "build:pro": "cross-env REACT_APP_SECRET_API=production node scripts/build.js", },

然后我们在执行 npm run build:dev 的时候就可以拿到 REACT_APP_SECRET_API的值为development前面加 cross-env是为了兼容不同平台 需要自行安装 npm install cross-env --save-dev

以上就是create-react-app开发常用配置教程的详细内容,更多关于create-react-app开发配置的资料请关注软件开发网其它相关文章!



create app React 教程

需要 登录 后方可回复, 如果你还没有账号请 注册新账号