nginx linux windows 忽略大小写_React 基础 在 Windows 下使用 React , 你需要注意这些问题...

3032c11fc9e6016d1b288c3f6a6cac33.png

关注前端达人,与你共同进步

d8396fb51b890283d27b710a86394d5e.png

大家好,本篇内容,我要和大家聊聊使用 Windows 开发 React ,你需要注意的一些问题。首先说明下,我不是使用 windows 进行开发,因为其配置开发环境来说不是特别方便,我更喜欢苹果mac或者乌班图这样的系统,但是使用windows 进行开发的人还是占多说的,关于这些问题还是很有必要来和大家聊聊,尤其是在我们的开发过程中,我们的项目小组开发人员,有的喜欢用 Windows ,有的喜欢用苹果mac,这就会产生一些问题。

终端(控制台)

使用 Windows 系统的同学们,你们也许经常会在系统的运行菜单里输入CMD 命令调出控制台终端,但是其存在一个问题,不支持 Unix 相关的命令,有时候就安装不了相关的依赖包。为了解决这个问题,就需要安装 Unix 终端。我强烈推荐大家使用 Git Bash 这个终端,该终端的下载地址是:https://git-scm.com;第二个选择是安装 Cygwin,是基于Linux 的终端,其安装地址是:https://www.cygwin.com。

环境变量

使用 Windows 的另一个常见问题是设置环境变量。通常,我们在mac系统下编写 npm 命令脚本时,我们设置环境变量,例如 NODE_ENV = production 或 BABEL_ENV = development,但是要在Windows中设置这些变量,前面需要加上 SET,这意味着你需要执行 SET NODE_ENV = production 或 SET BABEL_ENV = development。

这样做的问题是,如果你与使用Linux 或 Mac的人一起开发工作时,那么他们将在SET命令上遇到问题,可能你需要忽略此文件并仅针对您的本地环境对其进行修改。每次这样做可能很乏味。解决此问题的方法是使用一个名为cross-env的软件包。你可以通过执行如下命令

 npm install cross-env

进行安装,修改你的配置文件如下所示,修改后,你的项目在Windows,Mac和Linux 都是可以正常运行的:

ea054222ac72ed3f2574475041b889a3.png

文件名、目录名区分大小写

实际上,这在Linux上也会发生,但是有时很难想到是这个问题,例如,如果你在 components/home/Home.jsx 这个路径下创建了一个组件,然后你使用如下方式进行引入组件(请注意第一个home的第一个字母我使用了大写):

import Home from './components/Home/Home';

通常,在Mac下开发的同学,不会遇到此类问题,但在Linux或Windows上可能会产生错误,因为系统文件路径区分大小写。

路径问题

在 Windows 下使用反斜杠(\)定义路径,而在Mac或Linux中,使用正斜杠(/)定义路径,比如我们在 Node.js 环境配置路径,如下段代码所示:

在 MAC 或 Linux 下的配置:

ceb44c8fcad72f067a1f240a36ddc605.png

在 Windows 下的配置:

e13675fc266aac1f1461e8e12e6f3231.png

为了解决使用不同系统进行开发的问题,避免我们每次进行修改,我们需要导入 path 模块,就能修复此问题:

0e3bba88dfccfa10348b60e1b3e2473b.png

小节

今天的分享就到这里,感谢大家阅读,如果你喜欢此文章,欢迎给个赞哦,谢谢了,下一篇文章,我将带着大家一起创建我们的第一个 React 项目,敬请期待...

《 React 手册》系列文章

在 React 项目中使用 ES6,你需要了解这些

React 16 中的这几个新特性值得你关注

专注分享当下最实用的前端技术。关注前端达人,与达人一起学习进步!

长按关注"前端达人"

c21711394dfa2bda090537c3cdcc167c.gif bbacc704167afcdee05d019df3fd3e7a.png
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值