feat: add rollup esm build

Author: woothu

package.json

@@ -4,7 +4,6 @@
   "version": "3.0.0-bridge-alpha.1",
   "license": "MIT",
   "main": "dist/coreui-vue.common.js",
-  "module": "dist/coreui-vue.esm.js",
   "files": [
     "src",
     "dist/*.js"
@@ -49,6 +48,7 @@
     "serve": "vue-cli-service serve",
     "build": "npm-run-all --parallel build:custom build:default",
     "build:default": "vue-cli-service build --target lib --name coreui-vue ./src/index.js",
+    "build:es": "rollup -c --environment TARGET:esm",
     "build:custom": "npm-run-all createCustom buildCustom deleteCustom",
     "createCustom": "node build/createCustomStylesLibrary.js",
     "buildCustom": "vue-cli-service build --target lib --name custom ./tmp/index.js",
@@ -90,8 +90,22 @@
     "eslint-plugin-vue": "^5.0.0-beta.5",
     "growl": "^1.10.5",
     "https-proxy-agent": "^2.2.1",
+    "lodash": "^4.17.11",
     "node-sass": "^4.11.0",
+    "node-sass-magic-importer": "^5.3.2",
+    "rollup": "^1.14.3",
+    "rollup-plugin-babel": "^4.3.2",
+    "rollup-plugin-commonjs": "^9.3.2",
+    "rollup-plugin-filesize": "^5.0.1",
+    "rollup-plugin-json": "^3.1.0",
+    "rollup-plugin-license": "^0.7.0",
+    "rollup-plugin-node-resolve": "^3.4.0",
+    "rollup-plugin-postcss": "^2.0.3",
+    "rollup-plugin-replace": "^2.1.0",
+    "rollup-plugin-uglify": "^6.0.0",
+    "rollup-plugin-vue": "^4.3.2",
     "sass-loader": "^7.1.0",
+    "uglify-es": "^3.3.9",
     "vue-jest": "^3.0.1",
     "vue-router": "^3.0.2",
     "vue-template-compiler": "^2.6.6"

rollup.config.js

@@ -0,0 +1,142 @@
+import { camelCase } from "lodash";
+import path from "path";
+import babel from "rollup-plugin-babel";
+import commonjs from "rollup-plugin-commonjs";
+import filesize from "rollup-plugin-filesize";
+import json from "rollup-plugin-json";
+import license from "rollup-plugin-license";
+import postcss from 'rollup-plugin-postcss'
+import resolve from "rollup-plugin-node-resolve";
+import replace from "rollup-plugin-replace";
+import magicImporter from 'node-sass-magic-importer';
+
+import { uglify } from "rollup-plugin-uglify";
+import vue from "rollup-plugin-vue";
+import { minify } from "uglify-es";
+
+import pack from "./package.json";
+
+const projectName = "coreui-vue";
+
+// compute globals from dependencies
+const globals = pack.dependencies && Object.assign({}, ...Object.keys(pack.dependencies).map((key) => ({
+  [key]: camelCase(key)
+})));
+
+const builds = {
+  // (CommonJS). Used by bundlers e.g. Webpack & Browserify
+  cjs: {
+    entry: "src/index.js",
+    dest: `dist/${projectName}.common.js`,
+    format: "cjs"
+  },
+  // (ES Modules). Used by bundlers that support ES Modules,
+  // e.g. Rollup & Webpack 2
+  esm: {
+    entry: "src/index.js",
+    dest: `dist/${projectName}.esm.js`,
+    format: "esm"
+  },
+  // build (Browser)
+  "umd-dev": {
+    entry: "src/index.umd.js",
+    dest: `dist/${projectName}.js`,
+    format: "umd",
+    env: "development"
+  },
+  // production build (Browser)
+  "umd-prod": {
+    entry: "src/index.umd.js",
+    dest: `dist/${projectName}.min.js`,
+    format: "umd",
+    env: "production"
+  }
+};
+
+function genConfig(name) {
+  const opts = builds[name];
+  const config = {
+    input: opts.entry,
+    // external: (id) => pack.dependencies && pack.dependencies[id], // exclude dependencies from build
+    // external: ['@coreui/icons', '@coreui/icons/vue'],
+    // preserveModules: true,
+    treeshake: {
+      // moduleSideEffects: false,
+      pureExternalModules: true,
+      propertyReadSideEffects: false
+    },
+    plugins: [
+      resolve({
+        // module: true,
+        // browser: true,
+        // jsnext: true,
+        // preferBuiltins: false,
+        extensions: [".js", ".json", ".vue"]
+      }),
+      commonjs(),
+      postcss(),
+      vue({
+        compileTemplate: true,
+        css: false,
+        style: {
+          preprocessOptions: {
+            scss: {
+              importer: magicImporter(),
+            },
+          },
+        }
+      }),
+      json(),
+      babel({
+        exclude: "node_modules/**",
+        runtimeHelpers: true,
+        presets: [
+          ["@vue/app", { modules: false }]
+        ]
+      }),
+      filesize()
+    ].concat(opts.plugins || []),
+    output: {
+      exports: "named",
+      file: opts.dest,
+      // dir: 'dist/es',
+      format: opts.format,
+      // define globals in window from external dependencies
+      globals,
+      name: opts.moduleName || projectName
+    }
+  };
+
+  if (opts.env) {
+    config.plugins.push(
+      replace({
+        "process.env.NODE_ENV": JSON.stringify(opts.env)
+      })
+    );
+
+    // minify on production targets
+    // if (opts.env === "production") {
+    //   config.plugins.push(uglify({}, minify));
+    // }
+  }
+
+  // output a license to builds
+  config.plugins.push(
+    license({
+      sourceMap: true,
+      banner: {
+        file: path.resolve("LICENSE.md")
+      }
+    })
+  );
+
+  Object.defineProperty(config, "_name", {
+    enumerable: false,
+    value: name
+  });
+
+  return config;
+}
+
+const target = process.env.TARGET || "umd-prod";
+module.exports = genConfig(target);

src/components/Dropdown/CDropdown.vue

@@ -2,7 +2,7 @@
 import CLink from '../Link/CLink'
 import Popper from 'popper.js'
 import { mixin as clickaway } from 'vue-clickaway2'
-import { deepObjectsMerge } from '@coreui/coreui/dist/js/coreui-utilities'
+import deepObjectsMerge from '@coreui/coreui/js/src/utilities/deep-objects-merge'
 
 export default {
   name: 'CDropdown',