react搭建项目流程

1 项目搭建

npm install -g create-react-app

create-react-app react-mobile

cd react-mobile

npm install

react搭建项目流程

从上面的项目目录可以看到，没有webpack配置文件，这是因为这个文件被隐藏了起来，如果想控制webpack配置文件，可以执行npm eject命令，目录下面就会出现config文件。

注意：npm eject之后，删除node_modules文件重新npm install 不然会报错

react搭建项目流程

2 项目中引入第三方UI库

看官方文档显示，按需进入需要babel-plugin-import 插件，帮我们加载css和js文件。

使用 babel-plugin-import（推荐）。

// .babelrc or babel-loader option
{
  "plugins": [
    ["import", { libraryName: "antd-mobile", style: "css" }] // `style: true` 会加载 less 文件
  ]
}

然后只需从 antd-mobile 引入模块即可，无需单独引入样式。

// babel-plugin-import 会帮助你加载 JS 和 CSS
import { DatePicker } from 'antd-mobile';

注意：新的版本中.babelrc设置不生效，需要在webpack中设置，这也是为什么需要让隐藏的config文件显示的原因

在webpack.config.js中加入

            plugins: [
                          [
                    require.resolve('babel-plugin-named-asset-import'),
                    {
                      loaderMap: {
                        svg: {
                          ReactComponent: '@svgr/webpack?-svgo,+ref![path]',
                        },
                      },
                    },
                  ],
                  // babel-plugin-import   按需加载antd-mobile中组件 新的版本在.babelrc中配置不生效
                  [
                    "import", 
                    { 
                      "libraryName": "antd-mobile",
                      "style": "css" 
                    }
                  ] // `style: true` 会加载 less 文件
                ],

找到plugins option 加入相应内容就可以了。

react搭建项目流程

1 项目搭建

2 项目中引入第三方UI库

相关推荐