zoukankan      html  css  js  c++  java
  • react相关问题

    1.npx create-react-app错误

    发现一个错误:
    出现module.js:545错误。寻找了很久一直以为npm问题。重装了几次还是不行。
    然后切换了下载淘宝NPM镜像,设置方法为:npm config set registry https://registry.npm.taobao.org,设置完成后,重新执行create-react-app first-app。居然成功了。

    我们建议在 React 中使用 CommonJS 模块系统,比如 browserify 或 webpack,本教程使用 webpack。

    国内使用 npm 速度很慢,你可以使用淘宝定制的 cnpm (gzip 压缩支持) 命令行工具代替默认的 npm:

    $ npm install -g cnpm --registry=https://registry.npm.taobao.org
    $ npm config set registry https://registry.npm.taobao.org

    这样就可以使用 cnpm 命令来安装模块了:

    $ cnpm install [name]

     2.关于`babel-loader`和`babel-core`版本兼容性问题

    安装babel-loader和babel-core出现问题
    1.1 安装babel的转换工具包:

    npm i babel-core babel-loader babel-plugin-transform-runtime -D

    1.2 安装完成后package.json中显示:

    “dependencies”: {
    “babel-core”: “^6.26.3”,
    “babel-loader”: “^8.0.5”,

    },

    1.3 注意:package.json中的信息显示,在npmjs.com仓库中babel-core最新版本是6.26.3,同时babel-loader最新版本是8.0.5,但是这里报了一个警告:

    npm WARN babel-loader@8.0.5 requires a peer of @babel/core@^7.0.0 but none is installed.

    关于上述问题的解答:
    2.1 babel-loader@8.x是webpack用于Babel 7.x的一个整合loader模块,Babel 7.x已经把所有的相关的包从babel-迁移到了@babel的npm环境仓库。

    所以上述警告是合适的,你可以通过使用@babel/core代替babel-core来安装:

    npm i @babel/core -D

    2.2 如果你希望安装Babel 6.x,你可以使用下面的命令:

    npm i babel-core babel-loader@7 babel-plugin-transform-runtime -D

    2.3 如果你想使用Babel 7,理论上你可以使用下面的命令安装:

    npm i @babel/core babel-loader babel-plugin-transform-runtime -D

    2.4 参考资料来自
    https://stackoverflow.com/questions/52118494/incompatible-babel-loader-and-babel-core-versions

    3.全局安装react脚手架

      如已经安装了淘宝镜像,就在命令窗口输入:cnpm install -g create-react-app;

      没有安装淘宝镜像,可以输入这样的指令:npm i -g create-react-app(注:i是install的简写)

      出现上面的情形,就证明react的全局安装已经结束,之后就可以关闭了命令窗口。

    4.创建项目

      进入我们要创建react项目的文件中,在地址栏里输入 cmd  进入cmd窗口,然后输入指令:create-react-app  项目名称

      例子:创建一个todolist的项目

       创建成功之后,在命令窗口输入cd todolist(进入当前的文件夹),之后再命令窗口输入npm start(启动当前的项目)

     

     启动成功之后,在浏览器上会自动打开,打开之后的页面是下面的样子。(注:我的端口号是3001,是因为我之前已经有了一个,一般我们默认的端口号是3000)

  • 相关阅读:
    ES查询直方图聚合区间结果min越界问题
    yarn命令操作
    Hve on Spark left join的hashTable问题
    基于HUE可视化的大数据权限管理
    Android 制作圆角阴影的卡片
    Android 解决问题“Failed to resolve: com.android.support:design:26.1.0”
    Android 修改虚拟键栏背景颜色
    ArrayList的传值问题
    swift 网络请求中含有特殊字符的解决方案
    Android适配器
  • 原文地址:https://www.cnblogs.com/yuluoxingkong/p/12844176.html
Copyright © 2011-2022 走看看