create-react-app创建项目修改配置项的两种方法
方法一:eject
打开 package.json ,可以看到eject。运行 npm run eject 可以让由create-react-app创建的项目的配置项暴露出来。
{
...
"scripts": {
...
"eject": "react-scripts eject"
},
...
}
运行npm run eject ,此时,项目中多了一个config文件,并且各个配置文件已经暴露出来了。(运行npm run eject之前,保证本地没有待提交到git的文件)
但是这种方法不可逆。
方法二:react-app-rewired
安装react-app-rewired
npm install react-app-rewired --save
修改package.json,原本的react-script 改为react-app-rewired
"scripts": {
"start": "react-app-rewired start",
"build": "react-app-rewired build",
"test": "react-app-rewired test",
"eject": "react-app-rewired eject"
},
在根目录下新建config-overrides.js,在config-overrides.js里更改配置项,项目启动的时候会先在config-overrides.js里读数据,对webpack里的默认文件进行整合,最后才会启动。
const { injectBabelPlugin } = require('react-app-rewired');
module.exports = function override(config, env) {
config = injectBabelPlugin([
'import', { libraryName: 'antd', libraryDirectory: 'es', style: 'css' }
], config)
config = injectBabelPlugin([
"@babel/plugin-proposal-decorators", { "legacy": true }
], config)
return config;
}
create-react-app创建项目修改配置项的两种方法的更多相关文章
- web项目docker化的两种方法
标题所讲的两种方法其实就是创建docker镜像的两种方法 第一种:启动镜像后进入容器中操作,将需要的软件或者项目移动到容器中,安装或者部署,然后退出即可 第二种:编写dockerfile,将需要的镜像 ...
- Python修改文件的两种方法
目录: 一.以占用内存的方式修改文件 二.以占用硬盘的方式修改文件 引言 文件修改的方法从操作方式上大致可以分为两类,一种是以占用电脑内存的方式,将文件读取到内存中修改再存回硬盘:第二种方法是分别打开 ...
- xcode11新项目删除main.storyboard 两种方法
方法一 心急的童鞋按照老操作完成后再按照如下操作即可 /** 弃用storboard 1.info.plist去除 <key>UIApplicationSceneManifest</ ...
- laravel创建新model数据的两种方法
laravel中的CRUD操作中,通过对代表数据表中row的model对象操作,来更新数据库表. 对于创建新的row的操作,有两种功能上相同的方法: 1.create: $user = User::c ...
- STM32CubeMX工程修改MCU的两种方法
有些时候我们在已经使用过一段时间的stm32cube创建的工程,需要更换一个同系列的芯片,比如Flash空间更大或者更小,第一种方法我在网上搜索过,就是使用cube选择一个新使用型号的MCU,然后使用 ...
- MyBatis笔记----MyBatis数据库表格数据修改更新的两种方法:XML与注解
继上 http://www.cnblogs.com/tk55/p/6659285.html http://www.cnblogs.com/tk55/p/6660477.html 注解 将id:8 na ...
- APP自动化测试获取包名的两种方法
获取包名的两种方法: 一.通过aapt获取 1.进入aapt.exe所在路径 2.在地址栏输入cmd回车,打开dos命令窗口. 3.在命令窗口输入 aapt dump badging 拖入apk 回车 ...
- 深入 Create React App 核心概念
本文差点难产而死.因为总结的过程中,多次怀疑本文是对官方文档的直接翻译和简单诺列:同时官方文档很全面,全范围的介绍无疑加深了写作的心智负担.但在最终的梳理中,发现走出了一条与众不同的路,于是坚持分享出 ...
- 如何扩展 Create React App 的 Webpack 配置
如何扩展 Create React App 的 Webpack 配置 原文地址https://zhaozhiming.github.io/blog/2018/01/08/create-react-a ...
随机推荐
- HearthBuddy遇奥秘解决方法
https://tieba.baidu.com/g/5808796816 链接: https://pan.baidu.com/s/1NPQTOfxbN_4alP7J-XWuVw 密码: xfj1
- ios wkwebview allowFileAccessFromFileURLs
最近在做 cordova 打包 ios 的项目(webpack 打包 vue项目后,再用 cordova 打包).在加载 file:/// 协议时因为 webview安全机制有一些报错.SK各种找解决 ...
- List去重为什么要写equals(),hashCode()方法
一,各个集合的特点: Collection(集合):容器,用于存放对象(引用类型.基本类型需要自动装箱) List(列表):元素有序,元素可以重复 (有索引). 通过元素的equals()方法判断是否 ...
- js手写数组Api--模拟实现常见数组Api
数组的API经常用,但是api的内部实现还没研究过,于是就研究学习了下. 原文地址: https://www.cnblogs.com/yalong/p/11606865.html 数组的API的具体使 ...
- 小D课堂-SpringBoot 2.x微信支付在线教育网站项目实战_2-7.接口配置文件自动映射到属性和实体类配置
笔记 7.接口配置文件自动映射到属性和实体类配置 简介:使用@value注解配置文件自动映射到属性和实体类 1.添加 @Component或者Configuration 注解: ...
- kettle mogodb output详解
以下主要来自官网文档,原文:https://wiki.pentaho.com/display/EAI/MongoDB+Output Configure Connection Tab 1 Host na ...
- 2.React 生命周期函数
什么是生命周期函数:在某一时刻组件会自动调用执行的函数. import React,{ Component,Fragment } from 'react' class Note extends Com ...
- 【AMAD】django-social-auth -- 让django使用社交网络oauth鉴权变得极为轻松!
简介 个人评分 简介 django-social-auth1集成的Oauth API包括: Google OpenID Google Oauth Google Oauth2 Yahoo OpenID ...
- spring-boot 环境搭建(一)
环境 jdk 8 tomcat 8.5 sts 4.4.2 maven 3.6.1 新建 maven 项目 首先创建一个普通的 maven 项目. pom.xml <project xmlns= ...
- 基于Centos 搭建Jenkins环境
⒈简介 Jenkins 是一个开源软件项目,是基于Java开发的一种持续集成工具,用于监控持续重复的工作,旨在提供一个开放易用的软件平台,使软件的持续集成变成可能. ⒉Java安装 首先我们需要准备 ...