create-react-app创建react项目踩坑总结_蓝戒的博客


create-react-app创建react项目踩坑总结

create-react-app 创建项目,运行eject生成配置文件,

运行eject,暴露webpack配置,报错及产生的相关问题分享

1. npm run eject

运行eject命令报错处理方案:
主要问题是脚手架添加.gitgnore文件,但是却没有本地仓库

create-react-app project
cd project
git init
git add .
git commit -m "saving before ejecting" npm run eject

**注: 此操作不可逆

2. 如运行npm run eject报错:

Build fails after eject: Cannot find module '@babel/plugin-transform-react-jsx'

解决方法
1.删除 node_modules 文件夹
2.运行 yarn
3.重新 npm start

3. 解决 create-react-app 创建项目后 less 不生效的问题

直接引入less样式不生效,原因是create-react-app 没有内置 less-loader

解决方法
安装 less 和 less-loader ,并修改 webpack 配置

1> 安装

yarn add less
yarn add less-loader

2> 修改 webpack 配置
修改 webpack.config.js 配置文件, 增加less文件配置:

... 
{
    test: /\.less$/,
    use: [ require.resolve('style-loader'),
      {
        loader: require.resolve('css-loader'),
        options: {
          importLoaders: 1,
        },
      },
      {
        loader: require.resolve('less-loader') // compiles Less to CSS }
    ],
  }, 
... 

 
重启项目后,less样式生效

4. antd 按需引入 less 源文件,以及遇到的 bezierEasing.less 文件报错问题

解决方法
修改package.json,将style的值改为true

...
  "babel": {
    "presets": [
      "react-app"
     ]
     ],
    "plugins": [
      ["import", { "libraryName": "antd", "libraryDirectory": "es", "style": true }]
    ]
  }
...


5. 重启之后,编译错误,提示 bezierEasing.less 文件的 .bezierEasingMixin() 方法报错:

原因是因为 less v3 之后废弃了 Enable Inline JavaScript Option :lesscss.org/usage/#less…

主要有2种解决方式

  • 将 less 版本降到 3.0 以下
  • less loader 增加配置,开启 JavaScript :

// webpack.config.js
...
  {
-    loader: require.resolve('less-loader') // compiles Less to CSS
+    loader: require.resolve('less-loader'), // compiles Less to CSS
+    options: {
+        javascriptEnabled: true
+    }
    
  }

重新 npm start,项目可以正常启动。

isework-admin

isework-admin 提供基于react+antd的一套管理后台解决方案,git项目地址:

https://github.com/cywcd/isework-admin

本文固定链接: http://www.webzsky.com/?p=1384 | 蓝戒的博客

cywcd
该日志由 cywcd 于2019年08月06日发表在 javascript 分类下, 你可以发表评论,并在保留原文地址及作者的情况下引用到你的网站或博客。
原创文章转载请注明: create-react-app创建react项目踩坑总结 | 蓝戒的博客
关键字: , ,

create-react-app创建react项目踩坑总结:等您坐沙发呢!

发表评论


快捷键:Ctrl+Enter
来自的朋友,欢迎您 点击这里 订阅我的博客 o(∩_∩)o~~~
×