zoom-babel-plugin-separate-import v0.0.2

zoom-babel-plugin-separate-import

按需引入zoom-intro组件，减小打包体积；

安装

npm i -D zoom/babel-plugin-separate-import

使用

配置.babelrc文件：

{
  "plugins": [
    ["zoom-babel-plugin-separate-import", {
      "libraryName": "zoom-intro",
      "libraryDirectory": "dist/packages",
      "style": "scss"
    }]
  ]
}

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

import Vue from 'vue';
import { Button, Icon } from 'zoom-intro';

Vue.use(Button);
Vue.use(Icon);

国际化

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

import Vue from 'vue';
import { Button, Icon, locale, i18n } from 'zoom-intro';

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

// .babelrc

{
  "plugins": [
    ["zoom/babel-plugin-separate-import", {
      "libraryName": "zoom-intro",
      "libraryDirectory": "dist/packages",
      "sourceCode": true,
      "style": "css"
    }]
  ]
}

AST转换

import { Button } from 'zoom-intro';

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

import Button from 'zoom-intro/dist/packages/button/button.js';
// sourceCode 为 true 时
import Button from 'zoom-intro/dist/packages/button/button.vue';

import 'zoom-intro/dist/packages/button/button.css';

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

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

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