Skip to content

jdf2e/separate-import

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

20 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

@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选项,则不会加载样式文件,需用户手动添加;

Releases

No releases published

Packages

No packages published