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;
}

原文地址:https://www.cnblogs.com/superlizhao/p/11026930.html

时间: 2024-11-07 12:48:47

create-react-app创建项目修改配置项的两种方法的相关文章

web项目docker化的两种方法

标题所讲的两种方法其实就是创建docker镜像的两种方法 第一种:启动镜像后进入容器中操作,将需要的软件或者项目移动到容器中,安装或者部署,然后退出即可 第二种:编写dockerfile,将需要的镜像一层层叠加上去,比如我们要部署项目,可以先下载一个ubuntu基础镜像,然后叠加jdk,然后tomcat,然后项目 这两种方法我都试过,区别在于,第二种比较体现docker的镜像叠加特性,第一种到最终只有一层镜像. 先讲第二种吧,我之前的文章有提到过dockerfile的编写,这边直接给出简单的do

学习笔记:ubuntu永久修改DNS的两种方法

因直接修改/etc/resolv.conf重启会失效,所以有以下两种方法设置 方法一:修改文件/etc/network/interfaces dns-nameservers 192.168.1.1 方法二:修改文件/etc/resolvconf/resolv.conf.d/base(这个文件默认为空),多个dns可加一行 nameserver 192.168.1.1 nameserver 192.168.1.2 :wq   #保存退出 resolvconf -u   #执行 完成 通过/etc/

xcode11新项目删除main.storyboard 两种方法

方法一 心急的童鞋按照老操作完成后再按照如下操作即可 /** 弃用storboard 1.info.plist去除 <key>UIApplicationSceneManifest</key> <dict> <key>UIApplicationSupportsMultipleScenes</key> <false/> <key>UISceneConfigurations</key> <dict> &l

laravel创建新model数据的两种方法

laravel中的CRUD操作中,通过对代表数据表中row的model对象操作,来更新数据库表. 对于创建新的row的操作,有两种功能上相同的方法: 1.create: $user = User::create(array('email => '[email protected]','password'=>'mypassword')); 2.new and save $user = new User; $user->email = '[email protected]'; $user-&

React漫漫学习路之 利用Create React App命令创建一个React应用

所谓万事开头难,本文旨在为初探React的同学,建立第一个最基本的react应用. Create React App是Facebook官方的一个快速构建新的 React 单页面应用的脚手架工具,它可以帮你配置开发环境,以便你可以使用最新的 JavaScript 特性,还能提供很棒的开发体验,并为生产环境优化你的应用.(如果你使用过vue-cli构建vue应用,那么此处可类比) 话不多说,直接开始. 安装 全局安装create-react-app npm install -g create-rea

React 脚手架创建项目

使用react脚手架创建项目 一.首先需要安装node.js 具体如何安装参考网址:https://www.jianshu.com/p/0ddecdbb4048 下载安装包 双击打开安装文件 setup 点击next,下一步 勾选 选中勾选框,点击next,下一步 安装路径 选择安装路径,默认路径即可,点击next,下一步 安装配置 默认即可,点击next,下一步 安装开始 点击install,开始等待安装 安装中 点击finish,安装完成 finish 打开命令提示符窗口,输入 node -

使用express创建node服务器的两种方法及区别

使用express创建node服务器有两种方法,如下所示: 方法一: var express = require('express'); var app = express(); app.listen('3000', function () { console.log("The server is running at *: 3000"); }); 这是我们常用的一种创建node服务器的方式. 写vue项目时使用的vue-cli脚手架使用的就是这种创建方式.  方法二: var exp

解决vue项目eslint校验 Do not use &#39;new&#39; for side effects 的两种方法

import Vue from 'vue' import App from './App.vue' import router from './router' new Vue({ el: '#app', render: h => h(App), router }) 当使用eslint校验运行上面这段代码时(该代码在src/main.js文件中),会报错 ?  http://eslint.org/docs/rules/no-new  Do not use 'new' for side effect

Windows 10 应用创建模糊背景窗口的三种方法

原文 Windows 10 应用创建模糊背景窗口的三种方法 现代的操作系统中创建一张图片的高斯模糊效果非常容易,不过如果要在窗口中获得模糊支持就需要操作系统的原生支持了.iOS/Mac 和 Windows 系统都对此有支持. 本文将介绍三种创建模糊背景窗口的方法.有人可能喜欢称之为毛玻璃窗口.亚克力窗口. This post is written in multiple languages. Please select yours: 最早我是在 StackOverflow 上回答一位网友的提问时