build: use rollup to build seperated bundle

.eslintignore

@@ -1,3 +1,4 @@
 node_modules
+lib
 test/unit/coverage
 packages/icons

package.json

@@ -25,83 +25,93 @@
     "registry": "***REMOVED***"
   },
   "devDependencies": {
-    "@babel/cli": "^7.6.4",
-    "@babel/core": "^7.4.5",
-    "@babel/preset-env": "^7.4.5",
+    "@babel/cli": "^7.7.7",
+    "@babel/core": "^7.7.7",
+    "@babel/preset-env": "^7.7.7",
     "@kazupon/vue-i18n-loader": "^0.4.1",
-    "@vue/babel-preset-app": "^3.8.0",
+    "@rollup/plugin-node-resolve": "^6.0.0",
+    "@rollup/plugin-strip": "^1.3.1",
+    "@vue/babel-helper-vue-jsx-merge-props": "^1.0.0",
+    "@vue/babel-preset-app": "^3.12.1",
+    "@vue/babel-preset-jsx": "^1.1.2",
     "@vue/eslint-config-standard": "^4.0.0",
-    "@vue/test-utils": "^1.0.0-beta.29",
-    "angular-html-parser": "^1.2.0",
+    "@vue/test-utils": "^1.0.0-beta.30",
+    "angular-html-parser": "^1.3.0",
+    "autoprefixer": "^9.7.3",
     "babel-eslint": "^10.0.3",
     "babel-helper-vue-jsx-merge-props": "^2.0.3",
     "babel-loader": "^8.0.6",
-    "babel-plugin-istanbul": "^5.1.4",
+    "babel-plugin-istanbul": "^5.2.0",
     "babel-plugin-syntax-jsx": "^6.18.0",
     "babel-plugin-transform-vue-jsx": "^3.7.0",
     "babel-preset-env": "^1.7.0",
     "chai": "^4.2.0",
-    "copy-webpack-plugin": "^5.0.3",
-    "cross-env": "^5.2.0",
+    "copy-webpack-plugin": "^5.1.1",
+    "cross-env": "^5.2.1",
     "css-loader": "^2.1.1",
+    "cssnano": "^4.1.10",
     "emoji-regex": "^8.0.0",
-    "emoji-unicode": "^1.0.10",
+    "emoji-unicode": "^1.1.0",
     "eslint": "^6.8.0",
     "eslint-plugin-vue": "^5.0.0",
     "extract-text-webpack-plugin": "^4.0.0-beta.0",
     "file-loader": "^3.0.1",
-    "glob": "^7.1.5",
+    "glob": "^7.1.6",
     "gulp": "^4.0.2",
     "gulp-autoprefixer": "^6.1.0",
     "gulp-cssmin": "^0.2.0",
     "gulp-sass": "^4.0.2",
-    "highlight.js": "^9.15.10",
+    "highlight.js": "^9.17.1",
     "html-webpack-plugin": "^3.2.0",
     "http-server": "^0.11.1",
-    "jsdom": "^15.1.1",
-    "karma": "^4.1.0",
+    "jsdom": "^15.2.1",
+    "karma": "^4.4.1",
     "karma-chrome-launcher": "^2.2.0",
     "karma-coverage": "^1.1.2",
-    "karma-jsdom-launcher": "^7.1.0",
+    "karma-jsdom-launcher": "^7.1.1",
     "karma-mocha": "^1.3.0",
     "karma-sourcemap-loader": "^0.3.7",
     "karma-spec-reporter": "0.0.32",
     "karma-webpack": "^3.0.5",
     "loader-utils": "^1.2.3",
-    "lodash": "^4.17.15",
     "marked": "^0.7.0",
     "memory-fs": "^0.4.1",
-    "mocha": "^6.1.4",
-    "prettier-eslint": "^9.0.0",
+    "mocha": "^6.2.2",
+    "postcss": "^7.0.25",
+    "postcss-cli": "^6.1.3",
+    "postcss-loader": "^3.0.0",
+    "prettier-eslint": "^9.0.1",
     "progress-bar-webpack-plugin": "^1.12.1",
-    "regenerator-runtime": "^0.13.2",
+    "regenerator-runtime": "^0.13.3",
+    "rollup": "^1.27.14",
+    "rollup-plugin-terser": "^5.1.3",
+    "rollup-plugin-vue": "^5.1.4",
     "schema-utils": "^1.0.0",
-    "sinon": "^7.3.2",
+    "sinon": "^7.5.0",
     "style-loader": "^0.23.1",
     "stylelint": "^10.1.0",
     "stylelint-config-recommended-scss": "^3.3.0",
-    "stylelint-scss": "^3.8.0",
+    "stylelint-scss": "^3.13.0",
+    "terser": "^4.4.3",
     "tinycolor2": "^1.4.1",
     "url-loader": "^1.1.2",
-    "vue": "^2.6.10",
-    "vue-i18n": "^8.14.1",
-    "vue-loader": "^15.7.0",
-    "vue-router": "^3.0.6",
-    "vue-template-compiler": "^2.6.10",
-    "webpack": "^4.30.0",
+    "vue": "^2.6.11",
+    "vue-i18n": "^8.15.3",
+    "vue-loader": "^15.8.3",
+    "vue-router": "^3.1.3",
+    "vue-template-compiler": "^2.6.11",
+    "webpack": "^4.41.5",
     "webpack-bundle-analyzer": "^3.6.0",
-    "webpack-cli": "^3.3.2",
-    "webpack-dev-server": "^3.4.1"
+    "webpack-cli": "^3.3.10",
+    "webpack-dev-server": "^3.10.1"
   },
   "dependencies": {
-    "@vue/babel-helper-vue-jsx-merge-props": "^1.0.0",
-    "@vue/babel-preset-jsx": "^1.0.0",
     "async-validator": "^1.11.5",
     "date-fns": "^2.6.0",
-    "ionicons": "^4.5.8",
-    "masonry-layout": "^4.2.2",
-    "node-sass": "^4.12.0",
+    "lodash": "^4.17.15",
+    "lodash-es": "^4.17.15",
+    "node-sass": "^4.13.0",
     "resize-observer-polyfill": "^1.5.1",
-    "sass-loader": "^7.1.0"
+    "sass-loader": "^7.3.1"
   }
 }

packages/base/CancelMark/src/main.vue

@@ -37,7 +37,7 @@
 </template>
 
 <script>
-import CancelIcon from './CancelIcon'
+import CancelIcon from './CancelIcon.vue'
 export default {
   name: 'NBaseCancelMark',
   components: { CancelIcon },

packages/base/SelectMenu/index.js

@@ -1,8 +1,8 @@
 /* istanbul ignore file */
 import BaseSelectMenu from './src/SelectMenu.vue'
-import BaseSelectOption from './src/SelectOption'
-import BaseSelectOptionCollector from './src/SelectOptionCollector'
-import BaseSelectRenderOptions from './src/SelectRenderOptions'
+import BaseSelectOption from './src/SelectOption.vue'
+import BaseSelectOptionCollector from './src/SelectOptionCollector.vue'
+import BaseSelectRenderOptions from './src/SelectRenderOptions.vue'
 
 BaseSelectMenu.install = function (Vue) {
   Vue.component(BaseSelectMenu.name, BaseSelectMenu)

packages/base/SelectMenu/src/SelectMenu.vue

@@ -64,9 +64,9 @@
 <script>
 import NScrollbar from '../../../common/Scrollbar'
 import linkedOptions from '../../../utils/data/linkedOptions'
-import NSelectOption from './SelectOption'
-import NSelectMenuLightBar from './SelectMenuLightBar'
-import NRenderOptions from './SelectRenderOptions'
+import NSelectOption from './SelectOption.vue'
+import NSelectMenuLightBar from './SelectMenuLightBar.vue'
+import NRenderOptions from './SelectRenderOptions.vue'
 import {
   createValueAttribute
 } from './utils'

packages/base/SelectMenu/src/SelectRenderOptions.vue

@@ -1,5 +1,5 @@
 <script>
-import SelectOption from './SelectOption'
+import SelectOption from './SelectOption.vue'
 
 export default {
   name: 'NSelectRenderOptions',

packages/base/SelectMenu/src/utils.js

@@ -1,4 +1,4 @@
-function createValueAttribute (value) {
+export const createValueAttribute = function createValueAttribute (value) {
   if (typeof value === 'string') {
     return 's-' + value
   } else if (typeof value === 'number') {
@@ -8,5 +8,3 @@ function createValueAttribute (value) {
     return 'invalid'
   }
 }
-
-exports.createValueAttribute = createValueAttribute

packages/common/Select/index.js

@@ -1,6 +1,6 @@
 /* istanbul ignore file */
 import Select from './src/SelectAdapter.vue'
-import SelectOption from './src/SelectOption'
+import SelectOption from './src/SelectOption.vue'
 
 Select.install = function (Vue) {
   Vue.component(Select.name, Select)

packages/common/Select/src/SelectAdapter.vue

@@ -2,7 +2,7 @@
 /**
  * Warning: There are some potential problems if there are too many items!
  */
-import NSelect from './Select'
+import NSelect from './Select.vue'
 
 export default {
   name: 'NSelect',

packages/common/Select/src/SelectOption.vue

@@ -1,5 +1,5 @@
 <script>
-import NBaseSelectOption from '../../../base/SelectMenu/src/SelectOption'
+import NBaseSelectOption from '../../../base/SelectMenu/src/SelectOption.vue'
 
 export default NBaseSelectOption
 </script>

packages/common/Tag/src/main.vue

@@ -29,7 +29,7 @@
 import withapp from '../../../mixins/withapp'
 import themeable from '../../../mixins/themeable'
 import asthemecontext from '../../../mixins/asthemecontext'
-import mdClose from '../../../icons/md-close'
+import mdClose from '../../../icons/md-close.vue'
 
 export default {
   name: 'NTag',

packages/utils/data/linkedOptions.js

@@ -4,7 +4,7 @@
  * Todo: Refactor to avoid link list, since it will make component intrinsic
  * logic more complex
  */
-import cloneDeep from 'lodash/cloneDeep'
+import cloneDeep from 'lodash-es/cloneDeep'
 
 function markAvailableOptionValues (options) {
   const length = options.length

rollup.config.js

@@ -0,0 +1,32 @@
+const vue = require('rollup-plugin-vue')
+const resolve = require('@rollup/plugin-node-resolve')
+const strip = require('@rollup/plugin-strip')
+const path = require('path')
+const { terser } = require('rollup-plugin-terser')
+
+module.exports = {
+  input: 'packages/common/Select/index.js',
+  output: {
+    format: 'esm',
+    file: 'lib/select/index.js'
+  },
+  plugins: [
+    vue(),
+    strip(),
+    resolve({
+      jail: path.resolve(__dirname, 'packages')
+    }),
+    terser({
+      mangle: false,
+      output: {
+        beautify: true,
+        indent_level: 2
+      }
+    })
+  ],
+  external: [
+    'vue-runtime-helpers',
+    'lodash-es/cloneDeep',
+    'resize-observer-polyfill'
+  ]
+}