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 | 蓝戒的博客