@nutui/babel-plugin-separate-import

按需构建nutui2.0的组件，减小打包体积

Usage no npm install needed!

<script type="module">
  import nutuiBabelPluginSeparateImport from 'https://cdn.skypack.dev/@nutui/babel-plugin-separate-import';
</script>

README

@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.use(Button);
Vue.use(Icon);

国际化

如果您需要使用我们的国际化功能，并使用我们的语言转换方法来对自己的网站进行语言转换的话，需要配置该插件的 sourceCode 参数为 true；此时组件的按需引用和默认情况下不同，组件将会指向未构建的源文件，同时组件也不再具有 install 方法，请使用 Vue.component 对组件进行注册；

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

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

// .babelrc

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

AST转换

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

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

import Button from '@nutui/nutui/dist/packages/button/button.js';
// sourceCode 为 true 时
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选项，则不会加载样式文件，需用户手动添加；