React 运行npm run eject的问题

最新推荐文章于 2024-05-16 23:30:33 发布
最新推荐文章于 2024-05-16 23:30:33 发布
阅读量3.9k 收藏 2
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44375429/article/details/96137733
版权
本文讨论了在使用create-react-app创建React应用后，执行npm run eject操作导致所有依赖被放入dependencies的情况。作者疑惑是否应该将开发依赖移到devDependencies，并询问了这样做是否会产生影响。一位读者解释了打包原理，指出不会影响项目，同时指出devDependencies主要是为了区分生产与开发依赖。此外，文章还介绍了Markdown编辑器的多种新功能。
摘要由CSDN通过智能技术生成

@TOC最近刚开始解除react
用的是官方推荐的create-react-app脚手架工具
如果想要自己修改webpack之类的配置需要执行npm run eject弹出配置文件
但这个操作是不可逆的
遇到一个问题就是我执行npm run eject之后
发现所有依赖的包都加在了dependencies里，
类似babel，eslint之类的配置都放在了里面 如下
package.json里面的dependencies对应的是生产环境，
这里面大部分包其实只是在开发环境下依赖的，应该放在devDependencies下的
我尝试在这种状态下build 发现也并没有全都把那些包加进去，
但就是很好奇，这样会有什么影响吗？
或者我主动把那些包放在devDependencies里面可行吗？？
求指点

maoruibin
首先，你要明白打包的原理。打包是把你项目引用到的模块合成起来，放到一起。很明显，哪些打包过程依赖的工具包，你在项目中并没有引用，所以并不会被打包到最后的文件中。 为什么要分devDependencies 和dependencies 主要是为了方便用户理解这些包的用途。你想要验证下，也可以把项目需要的react包放在devDependencies中，一样可以正常打包到项目里面去。

欢迎使用Markdown编辑器

你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇文章，了解一下Markdown的基本语法知识。

新的改变

我们对Markdown编辑器进行了一些功能拓展与语法支持，除了标准的Markdown编辑器功能，我们增加了如下几点新功能，帮助你用它写博客：

  1. 全新的界面设计 ，将会带来全新的写作体验；
  2. 在创作中心设置你喜爱的代码高亮样式，Markdown 将代码片显示选择的高亮样式 进行展示；
  3. 增加了 图片拖拽 功能，你可以将本地的图片直接拖拽到编辑区域直接展示；
  4. 全新的 KaTeX数学公式 语法；
  5. 增加了支持甘特图的mermaid语法1 功能；
  6. 增加了 多屏幕编辑 Markdown文章功能；
  7. 增加了 焦点写作模式、预览模式、简洁写作模式、左右区域同步滚轮设置 等功能，功能按钮位于编辑区域与预览区域中间；
  8. 增加了 检查列表 功能。

功能快捷键

撤销：Ctrl/Command + Z
重做：Ctrl/Command + Y
加粗：Ctrl/Command + B
斜体：Ctrl/Command + I
标题：Ctrl/Command + Shift + H
无序列表：Ctrl/Command + Shift + U
有序列表：Ctrl/Command + Shift + O
检查列表：Ctrl/Command + Shift + C
插入代码：Ctrl/Command + Shift + K
插入链接：Ctrl/Command + Shift + L
插入图片：Ctrl/Command + Shift + G

合理的创建标题，有助于目录的生成

直接输入1次#，并按下space后，将生成1级标题。
输入2次#，并按下space后，将生成2级标题。
以此类推，我们支持6级标题。有助于使用TOC语法后生成一个完美的目录。

如何改变文本的样式

强调文本 强调文本

加粗文本 加粗文本

标记文本

删除文本

引用文本

H2O is是液体。

210 运算结果是 1024.

插入链接与图片

链接: link.

图片: Alt

带尺寸的图片: Alt

居中的图片: Alt

居中并且带尺寸的图片: Alt

当然，我们为了让用户更加便捷，我们增加了图片拖拽功能。

如何插入一段漂亮的代码片

去博客设置页面，选择一款你喜欢的代码片高亮样式，下面展示同样高亮的 代码片.

// An highlighted block
var foo = 'bar';

生成一个适合你的列表

  • 项目
    • 项目
      • 项目
  1. 项目1
  2. 项目2
  3. 项目3
  • 计划任务
  • 完成任务

创建一个表格

一个简单的表格是这么创建的：

项目 Value
电脑 $1600
手机 $12
导管 $1

设定内容居中、居左、居右

使用:---------:居中
使用:----------居左
使用----------:居右

第一列 第二列 第三列
第一列文本居中 第二列文本居右 第三列文本居左

SmartyPants

SmartyPants将ASCII标点字符转换为“智能”印刷标点HTML实体。例如：

TYPE ASCII HTML
Single backticks 'Isn't this fun?' ‘Isn’t this fun?’
Quotes "Isn't this fun?" “Isn’t this fun?”
Dashes -- is en-dash, --- is em-dash – is en-dash, — is em-dash

创建一个自定义列表

Markdown
Text-to- HTML conversion tool
Authors
John
Luke

如何创建一个注脚

一个具有注脚的文本。2

注释也是必不可少的

Markdown将文本转换为 HTML。

KaTeX数学公式

您可以使用渲染LaTeX数学表达式 KaTeX:

Gamma公式展示 Γ ( n )

最低0.47元/天 解锁文章
weixin_44375429
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
npm run eject 配置
10-30
此处的配置页分为eject过的项目和未eject的项目两种，后者antd逛网有详细描述可参考，此处只讲本项目中的配置方式，要用less，当然少不了安装less和less-loader了，运行安装
react五星重点npm run eject
热门推荐
hongyanwang
06-13 1万+
#欢迎 在用creata-react-app脚手架构建react项目的时候， 当我们使用软件打开之后，会发现共有几个文件 其中： 1.node_modules是各个插件存放位置 2.public用于放置静态资源，里面的资源不会参与构建 3.src是源码文件，一般做开发就在这个文件夹，会参与打包构建 重点来了： 在package.json中： 只有三个依赖，分别是react，react-dom,...
react create-react-app v5 从零搭建（使用 npm run eject）_react app
最新发布
2401_83946826的博客
05-16 956
exclude: /(node_module)/, //这是一个正则表达式，用于指定哪些文件应该被排除在转换之外。// mediaQuery: false, //这个选项表示是否应该在媒体查询中转换px单位。2、在工作中，运维人员经常需要跟运营人员打交道，请问运营人员是做什么工作的?2、在工作中，运维人员经常需要跟运营人员打交道，请问运营人员是做什么工作的?6、Squid、Varinsh和Nginx有什么区别，工作中你怎么选择?6、Squid、Varinsh和Nginx有什么区别，工作中你怎么选择?
npm run eject报错（使用create-react-app创建项目）
dayexiaofan的博客
01-16 1721
今天使用create-react-app 创建了一个名为project的工程。想使用 npm run eject 命令来暴露出脚手架封装的一些配置 结果却报以下错误 经网上资料参考得知git惹的祸 主要问题是脚手架添加.gitgnore文件，但是却没有本地仓库 解决方案： #create-react-app project #cd project #git init #git add . #g...
react create-react-app v5 从零搭建（使用 npm run eject）
从事前端，不断积累经验，学习新的技术。头像不是本人是莉莉崽（美貌、可爱集于一身的小姐姐，小仙女），一个宝藏博主，值得喜欢！
09-28 3980
好久没用 create-react-app做项目了，这次为了个h5项目，就几个页面，决定自己搭建一个（ps:mmp 好久没用，搭建的时候遇到一堆问题）。我之前都是使用 umi。后台管理系统的项目 使用 antd-pro框架。实际上antd-pro 是基于umi搭建集成的框架。里面封装好了各种东西，开箱即用。
react:npm run eject报错
浩星
09-14 211
前言： 我们用creat-react-app创建项目的时候是没有显示config这个文件夹的，为了让他显示有两种办法。其中一种是npm run eject，但是我这边执行的时候报错下面： 报错原因： 本地有未提交文件 解决办法： 先都提交到git上在执行，或者先提交到本地，也可以 ...
react_eject_antd_demo:create-react-app中按需引入Ant-Design；运行了 `npm run eject`
05-16
已实现功能：按需加载（通过bundle.js实现）待实现功能：axiosredux说明：使用create-react-app搭建已执行 npm run eject实现create-react-app中按需引入Ant-Design，eject后按需引入antd的2种方式，出处： 。...
react-starter:React启动文件
05-09
npm run eject 注意：这是单向操作。 eject ，您将无法返回！ 如果您对构建工具和配置选择不满意，则可以随时eject 。 此命令将从您的项目中删除单个生成依赖项。 相反，它将所有配置文件和传递性依赖项
Create-React-App + TypeScript + Ant-Design（不带 Eject）
06-08
目录 更新到新版本 发送反馈 文件夹结构 可用脚本 npm start npm test npm run build npm run eject 支持的语言功能和 Polyfills 语法 在编辑器中突出显示 在编辑器中显示 Lint 输出 在编辑器中调试 更改页面
react-faq:常见问题页面
04-16
npm run eject 注意：这是单向操作。 eject ，您将无法返回！ 如果您对构建工具和配置选择不满意，则可以随时eject 。 此命令将从您的项目中删除单个生成依赖项。 相反，它将所有配置文件和传递依赖项（we
加密React
02-11
要在localhost上运行： cd aimm ...npm run eject 注意：这是单向操作。 eject ，您将无法返回！ 如果您对构建工具和配置选择不满意，则可以随时eject 。 此命令将从项目中删除单个构建依赖项。 而是将
解决React中运行npm run eject报错的问题
MissRen920的博客
03-16 1110
解决React中运行npm run eject报错的问题 最近开始学习React，使用是creat-react-app来初始化一个react项目，然后发现想要自己手动配置webpack却不知道在哪里，通过bd发现在package.json中有这样一堆代码： "scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test", "ej
初学react - 运行 npm run eject（暴露配置项）报错解决
sunshime的博客
07-08 2332
第一种情况：“ react-scripts eject ”不是内部或外部命令，不可运行的程序… 报错原因：react-scripts包丢失 解决方法：只需要再运行一次 npm install 或者运行 npm install react-scripts 即可 第二种情况：This git repository has untracked files or uncommitted…“ react...
npm run eject后的create-react-app项目自定义eslint配置方式
winne雪
05-10 1011
前言： 当我们需要对create-react-app项目的配置进行高度修改的时候，我们需要npm run eject，把配置文件都暴露出来。 这时候如果我们想要在项目中配置自定义eslint，可以参照以下步骤进行。 一、首先检查是否安装了 eslint和babel-eslint 查看package.json文件，一般npm run eject之后都会看到已经安装了。 如果尚未安装，则需要安装。 全局安装： npm install eslint babel-eslint -g 当前项目安装（推荐）： npm
npm run eject命令
你是我修复不了的bug，但我会用一生去维护
11-18 3400
npm run eject命令 如果熟悉webpack的小伙伴，知道package.json中的配置会很多，而react脚手架中的package.json中，依赖为什么这么少。这是因为像webpack，babel等等都是被creat react app封装到了react-scripts这个项目当中，包括基本启动命令 都是通过调用react-scripts这个依赖下面的命令进行启动的。npm run eject，会将原本creat react app对webpack，babel等相关配置的封装弹射出来，如果我
bug记录 使用 npm run eject导致项目无法启动
darksnack的博客
03-26 475
解决a标签的href为空或者指向本页面时，需要注意的问题
react 之 create-react-app 启动命令 npm run eject
zlq_CSDN的博客
04-10 950
前言：使用 create-react-app 初始化 react 项目时： 初始化后项目文件只有： node_modules 是各个依赖存放的位置 public 用来存放静态资源，其不参与构建 src 项目源码文件，一般开发就在该目录下扩展，并参与构建 package.json 文件 默认只有三个依赖：react、react-dom、react-scripts，其他如 webpack 、b...
前端小白004：关于react使用npm run eject/yarn eject 暴露webpack.config.js的问题及解决方案
ReXplan的博客
09-16 781
关于react使用npm run eject/yarn eject 暴露webpack.config.js的问题及解决方案 如果直接运行1有可能会报错，原因是项目有.gitignore文件，而我们本地没有文件仓库，这时候看看仓库有没有.git文件夹，如果有直接运行3、1，如果没有要运行2、3、1 1、暴露webpack.config.js，代码如下： npm run eject 或者 yarn eject 根据提示输入y即可 2、初始化本地仓库，代码如下： git init 3、添加文件到本地仓库，代码
运行npm run eject报错解决方法
qq_40011214的博客
08-04 572
在使用 npxcreate-react-app test 创建项目后 cd test 1、git init 2、git add . // 注意有 . 不要落下 3、git commit -m 'first git' 然后在执行 npm run eject 即可 注意
使用create-react-app搭建react服务后，并且在react服务使用npm run eject 之后怎样修改3000端口
04-28
注意，如果你使用了其他的启动方式，如`npm run build`之后使用`serve`启动服务，也需要在命令行中指定端口号，如下所示： ``` serve -s build -l 3001 ``` 这样就能够在指定的端口号上启动服务了。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值