Optimize build

README.md

@@ -34,7 +34,7 @@ Vue.use(VueClock);
 ```vue
 <template>
   <div class="app">
-    <vue-clock />
+    <VueClock />
   </div>
 </template>
 
@@ -52,7 +52,6 @@ export default {
 ```javascript
 import Vue from 'vue';
 import VueClock from '@dangvanthanh/vue-clock';
-import 'vue-clock/dist/vue-clock.esm.css';
 
 Vue.component('VueClock', VueClock);
 // or

build/rollup.config.cjs.js

@@ -0,0 +1,37 @@
+import { pascalCase } from 'pascal-case'
+import replace from '@rollup/plugin-replace'
+import { nodeResolve } from '@rollup/plugin-node-resolve'
+import commonjs from '@rollup/plugin-commonjs'
+import vue from 'rollup-plugin-vue'
+import filesize from 'rollup-plugin-filesize'
+import pkg from '../package.json'
+
+const globals = {
+  // Provide global variable names to replace your external imports
+  // eg. jquery: '$'
+  vue: 'Vue',
+}
+
+const config = {
+  input: 'src/index.js',
+  output: {
+    compact: true,
+    name: pascalCase(pkg.name),
+    file: pkg.main,
+    format: 'cjs',
+    exports: 'named',
+    globals,
+  },
+  plugins: [
+    replace({
+      'process.env.NODE_ENV': JSON.stringify('production'),
+      'process.env.ES_BUILD': JSON.stringify('false'),
+    }),
+    nodeResolve(),
+    commonjs(),
+    vue({ css: true, template: { optimizeSSR: true } }),
+    filesize(),
+  ],
+}
+
+export default config

build/rollup.config.es.js

@@ -1,30 +1,28 @@
-import { writeFileSync } from 'fs';
-import vue from 'rollup-plugin-vue';
-import css from 'rollup-plugin-css-only';
-import filesize from 'rollup-plugin-filesize';
-import CleanCSS from 'clean-css';
-import base from './rollup.config.base';
-import pkg from '../package.json';
+import replace from '@rollup/plugin-replace'
+import { nodeResolve } from '@rollup/plugin-node-resolve'
+import commonjs from '@rollup/plugin-commonjs'
+import vue from 'rollup-plugin-vue'
+import filesize from 'rollup-plugin-filesize'
+import pkg from '../package.json'
 
-const config = Object.assign({}, base, {
+const config = {
+  input: 'src/index.js',
   output: {
-    name: 'vue-clock',
+    name: pkg.name,
     file: pkg.module,
-    format: 'es',
+    format: 'esm',
+    exports: 'named',
   },
-});
+  plugins: [
+    replace({
+      'process.env.NODE_ENV': JSON.stringify('production'),
+      'process.env.ES_BUILD': JSON.stringify('true'),
+    }),
+    nodeResolve(),
+    commonjs(),
+    vue({ css: true }),
+    filesize(),
+  ],
+}
 
-config.plugins.push(vue({ template: { optimizeSSR: true }, css: false }));
-config.plugins.push(
-  css({
-    output: function(styles) {
-      writeFileSync(
-        'dist/vue-clock.esm.css',
-        new CleanCSS().minify(styles).styles
-      );
-    },
-  })
-);
-config.plugins.push(filesize());
-
-export default config;
+export default config

build/rollup.config.unpkg.js

@@ -0,0 +1,37 @@
+import { pascalCase } from 'pascal-case'
+import replace from '@rollup/plugin-replace'
+import { nodeResolve } from '@rollup/plugin-node-resolve'
+import commonjs from '@rollup/plugin-commonjs'
+import vue from 'rollup-plugin-vue'
+import filesize from 'rollup-plugin-filesize'
+import pkg from '../package.json'
+
+const globals = {
+  // Provide global variable names to replace your external imports
+  // eg. jquery: '$'
+  vue: 'Vue',
+}
+
+const config = {
+  input: 'src/index.js',
+  output: {
+    compact: true,
+    name: pascalCase(pkg.name),
+    file: pkg.unpkg,
+    format: 'iife',
+    exports: 'named',
+    globals,
+  },
+  plugins: [
+    replace({
+      'process.env.NODE_ENV': JSON.stringify('production'),
+      'process.env.ES_BUILD': JSON.stringify('false'),
+    }),
+    nodeResolve(),
+    commonjs(),
+    vue({ css: true }),
+    filesize(),
+  ],
+}
+
+export default config