EAAS/NFV-babel-import-plugin-PROSAGA-码农传奇

babel-plugin-import

安装

npm i @jomsou/babel-plugin-import -D

使用

插件选项

Param	Type	Default	Description
libName	`String`	null	作用的组件库包名
libPath	`String`	lib	作用的目录，eg：’antd/lib/button’ -> libPath: “lib”
disable	`Boolean`	false	true为不起作用，false为起作用。

.babelrc配置


module.exports = {
  "plugins": [
    ["@jomsou/import", {
      "libName": "antd",
      "libPath": "lib",
      "disable": process.env.NODE_ENV === 'development'
    }]
  ]
}

babel.config.js配置

const babelImportPlugin = require('@jomsou/babel-plugin-import')
module.exports = {
  "plugins": [
    [babelImportPlugin, {
      libName: "antd",
      libPath: "lib",
      disable: process.env.NODE_ENV === 'development'
    }]
  ]
}

webpack配置

const babelImportPlugin = require('@jomsou/babel-plugin-import')
rules: [
    {
      test: /\.js$/, use: {
      loader: 'babel-loader',
      options: {
        presets: [
            'env',
            'react'
        ],
        plugins: [
          [babelImportPlugin, {
            libName: 'antd',
            libPath: 'lib',
            disable: process.env.NODE_ENV === 'development'
          }]
        ]
      }
    }, exclude: /node_modules/}
  ]
}

antd

前：

008

后：

009

element-ui

前：

@master @master/img/babel-plugin-import后.png" alt="">

后：

@master @master/img/babel-plugin-import前.png" alt="">

更新日志：

2021.03.25 修复已知问题
2020.11.10 完成v1.1.0并加入github actions
2018.10.08 v1.0.0版本

TODO

实现样式按需引入