在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": true,
    "pathRewrite": {
      "^/api": ""
    }
  }
}

config.extraBabelPlugins = [
  //antd按需加载引入
  ["import", {
    "libraryName": "antd",
    "libraryDirectory": "es",
    "style": "css"
  }],
  //装饰器语法配置
  [
    "@babel/plugin-proposal-decorators",
    {
      "legacy": true
    }
  ]
]

export default config;

  在 creat-react-app创建的脚手架配置

建个.babelrc

 1 {
 2     "presets": [
 3         "react-app"
 4     ],
 5     "plugins": [
 6         [
 7             "import",
 8             {
 9                 "libraryName": "antd",
10                 "libraryDirectory": "es",
11                 "style": "css" // `style: true` 会加载 less 文件
12             }
13         ],
14         [
15             "@babel/plugin-proposal-decorators",
16             {
17                 "legacy": true
18             }
19         ]
20     ]
21 }

装饰器 语法使用之前  拿antd的包为例子

// const WrappedNormalLoginForm = Form.create({ name: ‘normal_login‘ })(Login);

// export default WrappedNormalLoginForm;        抛出的是这个改变后的变量  而不是Login这个组件了

使用后

@Form.create({ name: ‘normal_login‘ })     注意这里不要加分号  放在class上面

export default Login

原文地址:https://www.cnblogs.com/cq1715584439/p/11373000.html

时间: 2024-10-09 10:25:46

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

利用 React/Redux/React-Router 4/webpack 开发大型 web 项目时如何按需加载

如何设计一个大型 web 项目? React + webpack 如何按需加载? React + React-Router 4 + webpack 如何按需加载? React + Redux + React-Router 4 + webpack 如何按需加载? 实录提要: bundle-loader 和 Webpack 内置的 import() 有什么区别? 按需加载能否支持通过请求后台数据,动态配置页面的的应用场景? 参与过几个 React 项目,被依赖包搞的晕晕的,不知道该怎么选择? 什么包

React漫漫学习路之 利用Create React App命令创建一个React应用

所谓万事开头难,本文旨在为初探React的同学,建立第一个最基本的react应用. Create React App是Facebook官方的一个快速构建新的 React 单页面应用的脚手架工具,它可以帮你配置开发环境,以便你可以使用最新的 JavaScript 特性,还能提供很棒的开发体验,并为生产环境优化你的应用.(如果你使用过vue-cli构建vue应用,那么此处可类比) 话不多说,直接开始. 安装 全局安装create-react-app npm install -g create-rea

React Router 按需加载+服务器渲染的闪屏问题

伴随着React协议的『妥协』(v16采用MIT),React为项目的主体,这个在短期内是不会改变的了,在平时使用过程中发现了如下这个问题: 在服务器渲染的时候,刷新页面会出现闪屏的现象(白屏一闪而过) 作为努力最求极致的我,是不能容忍的,而这一现象是半道出现的,也就是在添加按需加载之后.要说清楚这个问题,得从React的服务器渲染开始说起,(急于寻求问题解决方案的,可以直接去文章后半部分) 服务器渲染(SSR)基础原理 React的虚拟DOM是其可被用于服务端渲染的关键.其原理简单的来说就是首

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 并修改 pack

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

React 按需加载 - 代码分隔

代码分隔 我们现在大多数React项目都是以Webpack 或者 Browserify等将一堆的jsx文件组织一起,并且由一个类似index.js的入口文件串联起来的单页面web页面. 例如: // math.js export function add(a, b) { return a + b; } App: // app.js import { add } from './math.js'; console.log(add(16, 26)); // 42 打完包后: function add

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

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

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 中使用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