在 TSDX 中使用 lodash

本文介绍了如何在TSDX项目中利用lodash进行按需引入,以减小打包后的文件体积。通过安装lodash和lodash-es依赖,以及lodash的类型定义,开发者可以在TypeScript环境中方便地使用lodash。在代码中,可以采用两种方式引入lodash模块,TSDX会自动编译优化,支持Tree Shaking。

关于TSDX的介绍,参考 https://blog.youkuaiyun.com/kd_2015/article/details/110409238

在TSDX中使用lodash是很爽的,因为它会帮你按需引入,这让你的包打包后体积不会太臃肿。

我们首先需要安装lodash依赖和lodash-es依赖(其中lodash-es是基于ES modules的,为了实现按需引入):

npm install lodash lodash-es # or yarn add lodash lodash-es

安装lodash的类型定义,方便在TypeScript中使用(由于是类型定义,只需开发时使用,只需安装在开发依赖中,所以加了-D):

npm install -D @types/lodash # or yarn add @types/lodash --dev

之后在你的项目中,你有2种方式来引入lodash中的模块:

import kebabCase 
import typescript from 'rollup-plugin-typescript2'; import { terser } from 'rollup-plugin-terser'; import json from '@rollup/plugin-json'; import commonjs from 'rollup-plugin-commonjs'; import resolve from '@rollup/plugin-node-resolve'; import postcss from 'rollup-plugin-postcss'; import postcssUrl from 'postcss-url'; import url from '@rollup/plugin-url'; import image from 'rollup-plugin-image'; import vuePlugin from 'rollup-plugin-vue'; const terserPlugin = terser({ toplevel: true, output: { comments: false, }, }); const defaultConfig = { input: './src/index.tsx', output: [ { format: 'es', file: 'es/index.esm.js', exports: 'named', }, ], external: [ '@aurora/vue3', '@aurora/vue3-icon', '@aurora/renderless', '@aurora/utils', '@alilc/lowcode-engine', '@aurora/core', '@ffe/uem', 'axios', 'lodash', 'moment', 'vue', ], plugins: [ json(), resolve(), vuePlugin({ css: false, }), commonjs(), typescript({ exclude: ['**/node_modules/**'], }), postcss({ extract: true, modules: false, // 排除 node_modules 中的 CSS 文件 exclude: 'node_modules/**', // 压缩 CSS minimize: true, plugins: [ postcssUrl({ url: 'inline', maxSize: 1024, }), ], }), url({ fileName: '[name]-[hash][extname]', }), image(), ].concat(process.env.LOWCODE_ENV === 'prod' ? [terserPlugin] : []), }; export default function createRollupConfig(config) { const mergedConfig = {}; Object.assign(mergedConfig, defaultConfig, config); return mergedConfig; } 以上是我的rollup.config,仍然报错,如何解决? ./src/index.tsx → es/index.esm.js... [!] (plugin rpt2) Error: Unexpected token (Note that you need plugins to import files that are not JavaScript) node_modules/.pnpm/@aurora+theme@5.4.7/node_modules/@aurora/theme/base/index.css (1:6)
09-09
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Hull Qin

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值