zoukankan      html  css  js  c++  java
  • 使用create-react-app遇到问题解决方案汇总

    使用create-react-app时遇到Module not found问题

    本来项目跑的好好地,然后install了一个axios,然后项目就挂了。 各种Module not found,路径不对。 期初以为是可能丢包了,又重新install还是不行,根据错误提示一个个删一个个重新install。 最后干脆重新建了个项目,但仍然不行。 这时候意识到了问题应该是出在create-react-app上:

    根据这个猜想,清空了packge卸载了全部model,重新install才解决问题。原因我现在也还不知道什么情况会触发这个bug,欢迎指教。

    上代码:

    1.  
      npm install rimraf -g //安装删除指令
    2.  
      rimraf node_modules //卸载node库
    3.  
      npm install //重装

    npm WARN deprecated fsevents windows

     

    更新下 使用yarn貌似会帮助跳过这个问题:

    info fsevents@2.1.2: The platform "win32" is incompatible with this module.
    info "fsevents@2.1.2" is an optional dependency and failed compatibility check. Excluding it from installation.
    info fsevents@1.2.9: The platform "win32" is incompatible with this module.
    info "fsevents@1.2.9" is an optional dependency and failed compatibility check. Excluding it from installation.

    ===

    有需要下载了一个模板项目,安装ui部分失败,提示:

    npm WARN deprecated fsevents@1.2.9: One of your dependencies needs to upgrade to fsevents v2: 1) Proper nodejs v10+ support 2) No more fetch
    ing binaries from AWS, smaller package size
    npm ERR! Unexpected end of JSON input while parsing near '...LNCxGNsOAHRWRMGoXrtcI'

    npm ERR! A complete log of this run can be found in:
    npm ERR! C:UsersuserAppDataRoaming pm-cache\_logs2019-12-06T07_31_31_687Z-debug.log

    单独提出来安装:

    $ npm install fsevents
    npm ERR! code EBADPLATFORM
    npm ERR! notsup Unsupported platform for fsevents@2.1.2: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
    npm ERR! notsup Valid OS: darwin
    npm ERR! notsup Valid Arch: any
    npm ERR! notsup Actual OS: win32
    npm ERR! notsup Actual Arch: x64

    npm ERR! A complete log of this run can be found in:
    npm ERR! C:Users eoliu6AppDataRoaming pm-cache\_logs2019-12-06T07_33_23_843Z-debug.log

    原因明了了,这个包是在mac系统中的,windows没有。查了下资料,大概是windows也不需要,不用安装。

    解决方法是,把fsevents依赖放到可选依赖中:

    vi package.json

      "optionalDependencies": {
        "fsevents": "*"
      }

    重新执行安装(有个坑,需要删除package_lock.json,否则标记会失效,所有依赖都将被安装):

    1
    npm install --no-optional

    参考资料:

    https://stackoverflow.com/questions/41570364/npm-install-not-working-in-windows#

    But it says it is optional so I ran $npm install --no-optional and that error went away but I still can't install.

    https://github.com/npm/npm/issues/17633

    I'm seeing this today with npm 5.3.0. npm install --no-optional works IIF a package-lock.json does not exist. If the package-lock.json file exists, then the flag is ignored and all dependencies get installed.

    3.撤换taobao源后,使用create-reat-app命令生成的app,默认package.json文件中不带运行脚本命令如下:

    (node: ver2.13.1  npm ver:6.12.1)

    {
    "name": "test",
    "version": "0.1.0",
    "private": true,
    "dependencies": {
    "react": "^16.12.0",
    "react-dom": "^16.12.0",
    "react-scripts": "3.3.0"
    }
    }

    需要手动添加运行脚本代码如下:
    {
    "name": "test",
    "version": "0.1.0",
    "private": true,
    "dependencies": {
    "react": "^16.12.0",
    "react-dom": "^16.12.0",
    "react-scripts": "3.3.0"
    },
    "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
    },
    "eslintConfig": {
    "extends": "react-app"
    },
    "browserslist": {
    "production": [
    ">0.2%",
    "not dead",
    "not op_mini all"
    ],
    "development": [
    "last 1 chrome version",
    "last 1 firefox version",
    "last 1 safari version"
    ]
    }
    }

    还有public,src等目录需要自己添加,当然业务代码需要自己编写哦
    然后才能通过npm run start 命令才能运行项目。

    使用系统默认源的配置信息如下:
    npm config list

    npm config list
    ; cli configs
    metrics-registry = "https://registry.npmjs.org/"
    scope = ""
    user-agent = "npm/6.12.1 node/v12.13.1 win32 x64"

    ; userconfig C:UsersAdministrator.npmrc
    cache = "c:\tmp\node_cache"
    prefix = "c:\tmp\node_global"

    如果使用taobo源,使用npm config list 查看配置信息如下:

    ; cli configs
    metrics-registry = "https://registry.npm.taobao.org/"
    scope = ""
    user-agent = "npm/6.12.1 node/v12.13.1 win32 x64"

    ; userconfig C:UsersAdministrator.npmrc
    cache = "c:\tmp\node_cache"
    disturl = "https://npm.taobao.org/dist"
    prefix = "c:\tmp\node_global"
    registry = "https://registry.npm.taobao.org/"

    经过测试对比发现,现在通过create-react-app命令生成的APP,没有原来带小卫星转的演示代码,现在只有

    "react": "^16.12.0",
    "react-dom": "^16.12.0",
    "react-scripts": "3.3.0"

    的库及其依赖库,可能是新版本取消原来的模板了,知道的网友请指教,谢谢。

    如果生成的app是web应用程序,需要指定服务启动端口,可以在在package.json文件中配置"scripts“项中的start修改为如下

    "scripts": {
    "start": "SET PORT & react-scripts start",  
       。。。。。。 

     即可改变默认服务器启动端口。

  • 相关阅读:
    Python 学习日记 第七天
    Python 学习日记 第六天
    Python 学习日记 第五天
    Python 学习日记 第四天
    Redis 中的数据类型及基本操作
    Asp.net mvc 中View 的呈现(二)
    Asp.net mvc 中View的呈现(一)
    Asp.net mvc 中Action 方法的执行(三)
    Asp.net mvc 中Action 方法的执行(二)
    Asp.net mvc 中Action 方法的执行(一)
  • 原文地址:https://www.cnblogs.com/it-tsz/p/12018974.html
Copyright © 2011-2022 走看看