diff --git a/.eslintrc.js b/.eslintrc.js
index 418157287..122ce6090 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -8,7 +8,8 @@ module.exports = {
   },
   globals: {
     ga: true,
-    chrome: true
+    chrome: true,
+    __DEV__: true
   },
   extends: [
     'plugin:json/recommended',
diff --git a/package.json b/package.json
index 1142273f0..5556e32f7 100644
--- a/package.json
+++ b/package.json
@@ -2,8 +2,10 @@
   "name": "element3",
   "version": "0.0.12",
   "description": "A Component Library for Vue3",
-  "main": "dist/element3-ui.esm.js",
-  "module": "dist/element3-ui.esm.js",
+  "main": "dist/element3-ui.cjs.js",
+  "module": "dist/element3-ui.esm-bundler.js",
+  "unpkg": "dist/element3-ui.global.js",
+  "jsdelivr": "dist/element3-ui.global.js",
   "files": [
     "lib",
     "dist",
@@ -93,9 +95,11 @@
     "@babel/plugin-proposal-nullish-coalescing-operator": "^7.10.4",
     "@babel/plugin-proposal-optional-chaining": "^7.11.0",
     "@babel/preset-env": "^7.10.4",
+    "@rollup/plugin-buble": "^0.21.3",
     "@rollup/plugin-commonjs": "^15.0.0",
     "@rollup/plugin-json": "^4.1.0",
     "@rollup/plugin-node-resolve": "^9.0.0",
+    "@rollup/plugin-replace": "^2.3.3",
     "@testing-library/jest-dom": "^5.11.2",
     "@types/jest": "^26.0.7",
     "@vue/babel-plugin-jsx": "^1.0.0-rc.2",
@@ -161,9 +165,9 @@
     "progress-bar-webpack-plugin": "^1.11.0",
     "rimraf": "^2.5.4",
     "rollup": "^2.26.9",
-    "rollup-plugin-babel": "^4.4.0",
     "rollup-plugin-peer-deps-external": "^2.2.3",
     "rollup-plugin-scss": "^2.6.0",
+    "rollup-plugin-terser": "^7.0.2",
     "rollup-plugin-vue": "^6.0.0-beta.10",
     "sass-loader": "^7.1.0",
     "select-version-cli": "^0.0.2",
diff --git a/rollup.config.js b/rollup.config.js
index 2e3c89fad..5ee8f36da 100644
--- a/rollup.config.js
+++ b/rollup.config.js
@@ -1,36 +1,175 @@
-import packageJson from './package.json'
+import pkg from './package.json'
 import vuePlugin from 'rollup-plugin-vue'
 import scss from 'rollup-plugin-scss'
 import peerDepsExternal from 'rollup-plugin-peer-deps-external'
 import resolve from '@rollup/plugin-node-resolve'
 import commonjs from '@rollup/plugin-commonjs'
 import json from '@rollup/plugin-json'
-import babel from 'rollup-plugin-babel'
-
-export default {
-  input: 'src/entry.js',
-  output: [
-    // todo 暂时不支持 cjs
-    // {
-    //   file: packageJson.main,
-    //   format: "cjs",
-    //   sourcemap: true,
-    // },
-    {
-      file: packageJson.module,
-      format: 'esm',
-      sourcemap: true
+import buble from '@rollup/plugin-buble'
+import replace from '@rollup/plugin-replace'
+import { terser } from 'rollup-plugin-terser'
+
+const name = 'Element3'
+
+const createBanner = () => {
+  return `/*!
+  * ${pkg.name} v${pkg.version}
+  * (c) ${new Date().getFullYear()} kkb
+  * @license MIT
+  */`
+}
+
+const createBaseConfig = () => {
+  return {
+    input: 'src/entry.js',
+    external: ['vue'],
+    plugins: [
+      peerDepsExternal(),
+      resolve(),
+      commonjs(),
+      json(),
+      vuePlugin({
+        css: true
+      }),
+      scss(),
+      buble()
+    ],
+    output: {
+      sourcemap: false,
+      banner: createBanner(),
+      externalLiveBindings: false,
+      globals: {
+        vue: 'Vue'
+      }
     }
+  }
+}
+
+function mergeConfig(baseConfig, configB) {
+  const config = Object.assign({}, baseConfig)
+  // plugin
+  if (configB.plugins) {
+    baseConfig.plugins.push(...configB.plugins)
+  }
+
+  // output
+  config.output = Object.assign({}, baseConfig.output, configB.output)
+
+  return config
+}
+
+function createFileName(formatName) {
+  return `dist/element3-ui.${formatName}.js`
+}
+
+// es-bundle
+const esBundleConfig = {
+  plugins: [
+    replace({
+      __DEV__: `(process.env.NODE_ENV !== 'production')`
+    })
+  ],
+  output: {
+    file: createFileName('esm-bundler'),
+    format: 'es'
+  }
+}
+
+// es-browser
+const esBrowserConfig = {
+  plugins: [
+    replace({
+      __DEV__: true
+    })
+  ],
+  output: {
+    file: createFileName('esm-browser'),
+    format: 'es'
+  }
+}
+
+// es-browser.prod
+const esBrowserProdConfig = {
+  plugins: [
+    terser(),
+    replace({
+      __DEV__: false
+    })
+  ],
+  output: {
+    file: createFileName('esm-browser.prod'),
+    format: 'es'
+  }
+}
+
+// cjs
+const cjsConfig = {
+  plugins: [
+    replace({
+      __DEV__: true
+    })
   ],
+  output: {
+    file: createFileName('cjs'),
+    format: 'cjs'
+  }
+}
+// cjs.prod
+const cjsProdConfig = {
   plugins: [
-    peerDepsExternal(),
-    resolve(),
-    commonjs(),
-    json(),
-    vuePlugin({
-      css: true
-    }),
-    scss(),
-    babel({ exclude: 'node_modules/**' })
-  ]
+    terser(),
+    replace({
+      __DEV__: false
+    })
+  ],
+  output: {
+    file: createFileName('cjs.prod'),
+    format: 'cjs'
+  }
 }
+
+// global
+const globalConfig = {
+  plugins: [
+    replace({
+      __DEV__: true
+    })
+  ],
+  output: {
+    file: createFileName('global'),
+    format: 'iife',
+    name
+  }
+}
+// global.prod
+const globalProdConfig = {
+  plugins: [
+    terser(),
+    replace({
+      __DEV__: false
+    })
+  ],
+  output: {
+    file: createFileName('global.prod'),
+    format: 'iife',
+    name
+  }
+}
+
+const formatConfigs = [
+  esBundleConfig,
+  esBrowserProdConfig,
+  esBrowserConfig,
+  cjsConfig,
+  cjsProdConfig,
+  globalConfig,
+  globalProdConfig
+]
+
+function createPackageConfigs() {
+  return formatConfigs.map((formatConfig) => {
+    return mergeConfig(createBaseConfig(), formatConfig)
+  })
+}
+
+export default createPackageConfigs()