Vue 2.x TypeScript 按需引入element-ui

最新推荐文章于 2023-10-31 00:21:54 发布

元无心

最新推荐文章于 2023-10-31 00:21:54 发布

阅读量2.5k

点赞数 1

分类专栏：前端杂谈配置踩坑文章标签： vue typescript

本文链接：https://blog.csdn.net/HermitSun/article/details/104637527

版权

本文介绍了在Vue 2.x项目中，使用TypeScript如何实现按需引入Element UI组件库，以解决一次性全部引入带来的项目体积增大问题。文章提到了官方提供的babel-plugin-component方案不适用于TypeScript，并推荐了ts-import-plugin作为解决方案，同时指出了该插件在使用过程中遇到的两个问题及其解决办法。通过在vue.config.js中配置，最终实现了与Vue CLI的兼容。

摘要由CSDN通过智能技术生成

在业务中，只要使用组件库，就不可避免的要涉及到按需引入的问题，尤其是element这种重量级的组件库，如果一次性全部引入，对整个项目的大小影响很大。但是，element官方只提供了基于babel的按需引入方案（babel-plugin-component），并没有给出ts应该如何做到按需引入。

经过试验，如果不做处理，哪怕是import { Button, Select } from 'element-ui';，在ts中还是会全部引入。

本来是之前是没什么好办法的，只能额外引入babel，先将ts编译成ES6的JS，再通过babel进行一次处理，但是上次用vant-ui的时候，看到他们官方推荐的一个插件很有意思， ts-import-plugin。按照作者的说法，这个插件是babel-plugin-component的ts实现，看了看文档似乎也是支持element-ui的：

// webpack.config.js
const tsImportPluginFactory = require('ts-import-plugin')

module.exports = {
   
  // ...
  module: {
   
    rules: [
      {
   
        test: /\.(jsx|tsx|js|ts)$/,
        loader: 'ts-loader',
        options: {
   
          transpileOnly: true,
          getCustomTransformers: () => ({
   
            before: [ tsImportPluginFactory( /** options */) ]
          }),
          compilerOptio