react中执行yarn eject配置antd-mobile的按需加载

在使用react做项目时如果用antd-mobile,如果使用按需加载,则需要修改它的配置文件
如果我们不操作yarn eject,则直接操作下面的步骤即可:

在 create-react-app 搭建脚手架时
cnpm install -g create-react-app
create-react-app reactDemo
cd reactDemo
cnpm start

引入 antd-mobile
因为配置文件隐藏了,从而我们需要引入 react-app-rewired 并修改 package.json 里的启动配置

cnpm install react-app-rewired --save-dev
cnpm install babel-plugin-import --save-dev
或者
yarn add react-app-rewired --dev
yarn add babel-plugin-import --dev
/* package.json 的配置需要做如下修改*/
"scripts": {
-   "start": "react-scripts start",
+   "start": "react-app-rewired start",
-   "build": "react-scripts build",
+   "build": "react-app-rewired build",
-   "test": "react-scripts test --env=jsdom",
+   "test": "react-app-rewired test --env=jsdom",
}

然后在项目根目录创建一个 config-overrides.js 用于修改默认配置(必须是根目录下)。

const {injectBabelPlugin} = require(‘react-app-rewired‘);
module.exports = function override(config, env) {
  config = injectBabelPlugin([‘import‘, {libraryName: ‘antd-mobile‘, style: ‘css‘}], config);
  return config;
};

此页面的引入方式更改为(index.js里面引入的总样式需要删掉)
- import Button from ‘antd-mobile/lib/button‘;
+ import { Button } from ‘antd-mobile‘;
如果执行yarn eject,需要配置的操作如下

1.用create-react-app创建完成项目后,执行yarn eject命令后会生成一个config文件,在config文件夹会
显示配置文档
2.添加插件
   yarn add babel-plugin-import --save-dev
   yarn add antd --save-dev
3.在congif文件夹下webpack.config.dev.js
  options: {
   +        plugins: [
   +             [‘import‘, [{ libraryName: "antd", style: ‘css‘ }]],
   +          ],
              // This is a feature of `babel-loader` for webpack (not Babel itself).
              // It enables caching results in ./node_modules/.cache/babel-loader/
              // directory for faster rebuilds.
              cacheDirectory: true,
            },
4.在config文件下webpack.config.prod.js添加
     options: {
     +        plugins: [
     +             [‘import‘, [{ libraryName: "antd", style: ‘css‘ }]],
     +         ],
              compact: true,
            },
5.在页面引入antd
    import { Button } from ‘antd-mobile‘;       

原文地址:http://blog.51cto.com/12885303/2156443

时间: 2024-08-25 14:10:10

react中执行yarn eject配置antd-mobile的按需加载的相关文章

react执行yarn eject后配置antd的按需加载

第一步: 用create-react-app创建完成项目后,执行yarn eject .在config文件夹会显示配置文档 第二步: 添加插件yarn add babel-plugin-import --save-dev  yarn add antd --save-dev 第三步:在congif文件夹下webpack.config.dev.js第147行添加代码 options: { + plugins: [ + ['import', [{ libraryName: "antd", s

react中使用antd按需加载(第一部)

什么是react按需加载?简单来说就是当我们引用antd的时候需要引入全局css样式,这会对性能造成一定的影响,那么使用按需加载以后就不需要引入css全局样式了,直接引入功能模块即可,既然需要设置按需加载就要对webpack文件进行修改,需要我们执行npm run eject命令来展开项目的隐藏文件,如果只是简单的修改,我们可以使用react-app-rewired定义全局变量,react-app-rewired的作用就是在不eject的情况下,覆盖create-react-app的配置.具体如

在dva框架和create-react-app创建出来的框架中修饰器语法与按需加载引入antd分别配置

按需加载需要的包  babel-plugin-import    装饰器语法需要的包  @babel/plugin-proposal-decorators dva框架 将.webpackrc  改成.webpackrc.js然后具体配置 const config = {}; config.proxy = { "/api": { "target": "http://localhost:7001", "changeOrigin":

React引入AntD按需加载报错

背景:React使用create-react-app脚手架创建,然后yarn run eject暴露了配置之后修改less配置, 需求:实现antd组件按需加载与修改主题. 一开始是按照webpack.config.dev.js文件中的配置进行less的配置. 可以看到脚手架创建的config文件为加载loader写了一个公共方法,不是以前的webpack配置,所以仿照他的方式进行配置less文件. 直接复制css的配置,修改成less的配置,然后yarn start重启项目. 此时可以加载le

使用babel-plugin-import实现antd组件库中的组件按需加载

Ant Design是蚂蚁金服基于react实现的一个UI 设计库,基于 npm + webpack + babel 的工作流,支持 ES2015.babel-plugin-import 可以从组件库中仅仅引入需要的模块,而不是把整个库都引入,从而提高性能. 如果使用 import { Button } from 'antd'; 的写法会引入 antd 下所有的模块. 为了提高打包编译的速度和浏览器下载资源的速度,可以通过以下的写法来只加载需要的组件: import Button from 'a

react+mobx+antd按需加载 出现Support for the experimental syntax 'decorators-legacy' isn't currently enabled

baidu上面的说法大多是在 项目的package.json 中添加decorators-legacy 因为引入了antd的按需加载 所以只需要在config-overrides.js中添加addDecoratorsLegacy() const { override, fixBabelImports,addDecoratorsLegacy } = require('customize-cra'); module.exports = override( fixBabelImports('impor

jQuery Mobile 手动显示ajax加载器,提示加载中...

在使用jQuery Mobile开发时,有时候我们需要在请求ajax期间,显示加载提示框(例如:一个旋转图片+一个提示:加载中...).这个时候,我们可以手动显示jQuery Mobile的加载器,大致流程如下: 1. 启动加载器,显示“加载中...”: 2. 进行ajax请求,请求完成后更新页面数据,刷新jQuery Mobile控件样式: 3. 关闭加载器. 下面就来讲解jQuery Mobile 1.2.0 和 1.1.0 中手动显示加载器的方法(很简单,几行代码就OK了!). 首先是jQ

react 中使用import()实现按需加载报错 解决方法 --‘import’ and ‘export’ may only appear at the top level

因为项目需要搞一下按需加载,使用import实现代码打包分片按需加载,但是在实际使用中报语法错误.报错信息如下 SyntaxError: 'import' and 'export' may only appear at the top level 啊咧?报错了. 查找发现很多人碰到过,解决方法不同,但是我这个报错适用下边这个方法. npm install --save-dev babel-plugin-syntax-dynamic-import 然后调整babel-loader配置如下: use

react16.8 antd按需加载配置(已经弹出和未弹出分别的配置)

误区,antd按需加载同样是需要先安装antd,只是通过插件的配置实现不用再进行样式的引入,可以直接引用antd组件进行开发 怎样判断按需加载配置成功?通过组件引用的判断,在不引入antd样式的前提下,直接引入,使用组件,看组件样式是否有效,如果生效则按需加载配置成功 完成的配置流程 安装antd npm i antd --save 安装babel-plugin-import插件 npm -s install babel-plugin-import 配置webpack,因为现在的时候,我的web