使用rollup打包Vue2组件

使用rollup打包组件说明：

需要使用rollup的插件机制来对各种文件进行打包。

打包Vue组件库需要的插件和配置大致如下

import { babel } from "@rollup/plugin-babel";
import resolve from "@rollup/plugin-node-resolve";
import vue from "rollup-plugin-vue";
import cjs from "@rollup/plugin-commonjs";
import replace from "@rollup/plugin-replace";
import json from "@rollup/plugin-json";
import requireContext from "rollup-plugin-require-context";
import { string } from "rollup-plugin-string";
import autoprefixer from "autoprefixer";
import typescript from "rollup-plugin-typescript2";
const config = require("../package.json");
export default {
  input: "src/index.js",
  plugins: [
    json(),
    resolve({
      mainFields: ["module", "jsnext", "main", "browser"],
      jsnext: true,
      preferBuiltins: true,
      browser: true,
    }),
    string({
      include: "**/*.svg",
    }),
    vue({
      css: false,
      style: {
        postcssPlugins: [autoprefixer],
      },
    }),
    babel({
      exclude: "node_modules/**",
      babelHelpers: "runtime",
      presets: [
        [
          "@babel/env",
          {
            modules: false,
          },
        ],
      ],
      plugins: [
        [
          "@babel/plugin-transform-runtime",
          {
            useESModules: true, // 使用 esm 形式的 helper
          },
        ],
      ],
    }),
    cjs({
      browser: true,
      exclude: "src/**",
    }),
    requireContext(),
    replace({
      // VERSION: JSON.stringify(config.version),
      preventAssignment: true,
    }),
    typescript({
      tsconfig: "build/tsconfigComponent.json",
      useTsconfigDeclarationDir: true,
    }), // 解析TypeScript
  ],
  external: ["vue"],
};

后续待更新