babel-plugin-import引入多个ui组件库

weixin-gu

已于 2024-01-12 15:35:06 修改

阅读量487

点赞数 9

文章标签： ui vue.js 前端

于 2024-01-12 15:34:20 首次发布

本文链接：https://blog.csdn.net/weixin_38257095/article/details/135553979

版权

vue2项目引入多个ui组件库

1、安装babel相关组件

    "babel-core": "^6.22.1",
    "babel-helper-vue-jsx-merge-props": "^2.0.3",
    "babel-loader": "^7.1.1",
    "babel-plugin-component": "^1.1.1",
    "babel-plugin-import": "^1.13.0",
    "babel-plugin-istanbul": "^6.0.0",
    "babel-plugin-syntax-jsx": "^6.18.0",
    "babel-plugin-transform-runtime": "^6.23.0",
    "babel-plugin-transform-vue-jsx": "^3.5.0",
    "babel-preset-env": "^1.3.2",
    "babel-preset-stage-2": "^6.22.0",
    "babel-register": "^6.22.0",

2、添加.babelrc文件相关配置

以组件库mand-mobile和vant为例

{
  "presets": [
    [
      "env",
      {
        "modules": false,
        "targets": {
          "browsers": [
            "> 1%",
            "last 2 versions",
            "IOS >= 7",
            "not ie <= 8"
          ]
        }
      }
    ],
    "stage-2"
  ],
  "plugins": [
    "transform-vue-jsx",
    "transform-runtime",
    [
      "import",
      [
        {
          "libraryName": "mand-mobile",
          "libraryDirectory": "components"
        },
        {
          "libraryName": "vant",
          "libraryDirectory": "es",
          "style": true
        }
      ]
    ]
  ],
  "env": {
    "test": {
      "presets": [
        "env",
        "stage-2"
      ],
      "plugins": [
        "transform-vue-jsx",
        "istanbul"
      ]
    }
  }
}

3、babel7及以上

babel7及以上.babelrc文件相关配置

安装相关插件 ...

{
  "presets": [
    [
      "env",
      {
        "modules": false,
        "targets": {
          "browsers": [
            "> 1%",
            "last 2 versions",
            "IOS >= 7",
            "not ie <= 8"
          ]
        }
      }
    ],
    "stage-2"
  ],
  "plugins": [
    "transform-vue-jsx",
    "transform-runtime",
    [
      "import",
        {
          "libraryName": "mand-mobile",
          "libraryDirectory": "components"
        },
        "mand"
    ],
    [
      "import",
      {
        "libraryName": "vant",
        "libraryDirectory": "es",
        "style": true
      },
      "vant"
    ]
  ],
  "env": {
    "test": {
      "presets": [
        "env",
        "stage-2"
      ],
      "plugins": [
        "transform-vue-jsx",
        "istanbul"
      ]
    }
  }
}