@nutui/babel-plugin-separate-import

@nutui/babel-plugin-separate-import

---

按需引入Nutui2.0组件，减小打包体积；

安装

---

npm i -D @nutui/babel-plugin-separate-import

使用

---

配置.babelrc文件：

{
  "plugins": [
    ["@nutui/babel-plugin-separate-import", {
        "style": "css"
    }]
  ]
}

然后就可以像下面这样按需引入组件了：

import Vue from 'vue';
import { Button, Icon } from '@nutui/nutui';

Vue.component(Button.name, Button);
Vue.component(Icon.name, Icon);

AST转换

---

import { Button } from '@nutui/nutui';

当使用这种方式import组件时，将会被转换为：

import Button from '@nutui/nutui/dist/packages/button/button.vue';
import '@nutui/nutui/dist/packages/button/button.css';

• 如果style选项为css，则会加载相应组件的css；

• 如果style选项为scss，则会加载相应组件的scss；

• 如果没有style选项，则不会加载样式文件，需用户手动添加；