fix: fix rollup module (element-plus#434)

* fix(build): fix some export & import path

* fix(build): build utils

* fix: fix error import

* fix(build): fix import error

* fix(build): remove useless dependent

* fix(build): fix build command error

build/rollup.config.bundle.js

@@ -0,0 +1,32 @@
+import vue from 'rollup-plugin-vue'
+import typescript from 'rollup-plugin-typescript2'
+import css from 'rollup-plugin-css-only'
+import { nodeResolve } from '@rollup/plugin-node-resolve'
+import commonjs from '@rollup/plugin-commonjs'
+import { terser } from 'rollup-plugin-terser'
+import path from 'path'
+
+export default [
+  {
+    input: path.resolve(__dirname, '../packages/element-plus/index.ts'),
+    output: {
+      format: 'es',
+      file: 'lib/index.esm.js',
+    },
+    plugins: [
+      terser(),
+      nodeResolve(),
+      commonjs(),
+      typescript({
+        abortOnError: false,
+      }),
+      css(),
+      vue({
+        target: 'browser',
+        css: false,
+        exposeFilename: false,
+      }),
+    ],
+    external: ['vue'],
+  },
+]

build/rollup.config.js

@@ -5,28 +5,52 @@ import { nodeResolve } from '@rollup/plugin-node-resolve'
 import commonjs from '@rollup/plugin-commonjs'
 import { terser } from 'rollup-plugin-terser'
 import path from 'path'
+import { getPackagesSync } from '@lerna/project'
 
-export default [
-  {
-    input: path.resolve(__dirname, '../packages/element-plus/index.ts'),
-    output: {
-      format: 'es',
-      file: 'lib/index.esm.js',
+const inputs = getPackagesSync()
+  .map(pkg => pkg.name)
+  .filter(name =>
+    name.includes('@element-plus') &&
+    !name.includes('transition') &&
+    !name.includes('utils'),
+  )
+
+export default inputs.map(name => ({
+  input: path.resolve(__dirname, `../packages/${name.split('@element-plus/')[1]}/index.ts`),
+  output: {
+    format: 'es',
+    file: `lib/${name.split('@element-plus/')[1]}/index.js`,
+    paths(id) {
+      if (/^@element-plus/.test(id)) {
+        return id.replace('@element-plus', '..')
+      }
     },
-    plugins: [
-      terser(),
-      nodeResolve(),
-      commonjs(),
-      typescript({
-        abortOnError: false,
-      }),
-      css(),
-      vue({
-        target: 'browser',
-        css: false,
-        exposeFilename: false,
-      }),
-    ],
-    external: ['vue'],
   },
-]
+  plugins: [
+    terser({
+      module: true,
+      compress: {
+        ecma: 2015,
+        pure_getters: true,
+      },
+    }),
+    nodeResolve(),
+    commonjs(),
+    typescript({
+      tsconfigOverride: {
+        compilerOptions: {
+          declaration: false,
+        },
+      },
+      abortOnError: false,
+    }),
+    css(),
+    vue({
+      target: 'browser',
+      css: false,
+    }),
+  ],
+  external(id) {
+    return /^vue/.test(id) || /^@element-plus/.test(id)
+  },
+}))

package.json

@@ -7,9 +7,11 @@
     "test": "jest",
     "gen": "bash ./scripts/gc.sh",
     "bootstrap": "yarn && npx lerna bootstrap",
-    "build": "yarn bootstrap && yarn build:lib && yarn build:esm && yarn build:theme",
+    "build": "yarn bootstrap && yarn build:lib && yarn build:esm && yarn build:esm-bundle && yarn build:utils && yarn build:theme",
     "build:lib": "rimraf lib && webpack --config ./build/webpack.config.js",
-    "build:esm": "rollup --config ./build/rollup.config.js",
+    "build:esm-bundle": "rollup --config ./build/rollup.config.bundle.js",
+    "build:esm": "node --max-old-space-size=8192 node_modules/rollup/dist/bin/rollup -c ./build/rollup.config.js",
+    "build:utils": "cd ./packages/utils && npx tsc && cd ../",
     "build:theme": "rimraf packages/theme-chalk/lib && gulp build --gulpfile packages/theme-chalk/gulpfile.js && cp-cli packages/theme-chalk/lib lib/theme-chalk && rimraf packages/theme-chalk/lib",
     "lint": "eslint ./packages --ext .vue,.js,.ts",
     "lint-fix": "eslint --fix ./packages --ext .vue,.js,.ts",

packages/autocomplete/src/index.vue

@@ -91,7 +91,7 @@ import { ClickOutside } from '@element-plus/directives'
 import { generateId, isArray } from '@element-plus/utils/util'
 import { UPDATE_MODEL_EVENT } from '@element-plus/utils/constants'
 import throwError from '@element-plus/utils/error'
-import ElInput from '@element-plus/input/src/index.vue'
+import { Input as ElInput } from '@element-plus/input'
 import { ElScrollbar } from '@element-plus/scrollbar'
 import { Popper as ElPopper } from '@element-plus/popper'
 

packages/button/index.ts

@@ -7,4 +7,4 @@ export default (app: App): void => {
   app.component(ButtonGroup.name, ButtonGroup)
 }
 
-export { Button }
+export { Button, ButtonGroup }

packages/calendar/src/date-table.vue

@@ -48,7 +48,7 @@ import {
 } from 'vue'
 import dayjs, { Dayjs } from 'dayjs'
 import localeData from 'dayjs/plugin/localeData'
-import { rangeArr } from '@element-plus/time-picker/src/common/date-utils'
+import { rangeArr } from '@element-plus/time-picker'
 dayjs.extend(localeData)
 
 export const getPrevMonthLastDays = (date: Dayjs, amount) => {

packages/calendar/src/index.vue

@@ -55,8 +55,7 @@
 
 <script lang="ts">
 import { t } from '@element-plus/locale'
-import ElButton from '@element-plus/button/src/button.vue'
-import ElButtonGroup from '@element-plus/button/src/button-group.vue'
+import { Button as ElButton,  ButtonGroup as ElButtonGroup } from '@element-plus/button'
 import DateTable from './date-table.vue'
 import {
   ref,

packages/checkbox/index.ts

@@ -3,7 +3,7 @@ import Checkbox from './src/checkbox.vue'
 import CheckboxButton from './src/checkbox-button.vue'
 import CheckboxGroup from './src/checkbox-group.vue'
 
-export { Checkbox }
+export { Checkbox, CheckboxButton, CheckboxGroup }
 
 export default (app: App): void => {
   app.component(Checkbox.name, Checkbox)

packages/color-picker/src/index.vue

@@ -93,9 +93,9 @@ import SvPanel from './components/sv-panel.vue'
 import HueSlider from './components/hue-slider.vue'
 import AlphaSlider from './components/alpha-slider.vue'
 import Predefine from './components/predefine.vue'
-import ElPopper from '@element-plus/popper/src/index.vue'
-import ElButton from '@element-plus/button/src/button.vue'
-import ElInput from '@element-plus/input/src/index.vue'
+import { Popper as ElPopper } from '@element-plus/popper'
+import { Button as ElButton } from '@element-plus/button'
+import { Input as ElInput } from '@element-plus/input'
 
 import { t } from '@element-plus/locale'
 import { UPDATE_MODEL_EVENT }  from '@element-plus/utils/constants'

packages/date-picker/src/date-picker-com/basic-month-table.vue

@@ -15,7 +15,7 @@
 <script lang="ts">
 import { hasClass } from '@element-plus/utils/dom'
 import { coerceTruthyValueToArray } from '@element-plus/utils/util'
-import { rangeArr } from '@element-plus/time-picker/src/common/date-utils'
+import { rangeArr } from '@element-plus/time-picker'
 import { t } from '@element-plus/locale'
 import dayjs, { Dayjs } from 'dayjs'
 

packages/date-picker/src/date-picker-com/basic-year-table.vue

@@ -45,7 +45,7 @@
 
 <script lang="ts">
 import { hasClass } from '@element-plus/utils/dom'
-import { rangeArr } from '@element-plus/time-picker/src/common/date-utils'
+import { rangeArr } from '@element-plus/time-picker'
 import { coerceTruthyValueToArray } from '@element-plus/utils/util'
 import {
   defineComponent,

packages/date-picker/src/date-picker-com/panel-date-pick.vue

@@ -159,17 +159,17 @@
 import {
   extractDateFormat,
   extractTimeFormat,
-} from '@element-plus/time-picker/src/common/date-utils'
+} from '@element-plus/time-picker'
 import { t } from '@element-plus/locale'
-import ElInput from '@element-plus/input/src/index.vue'
+import { Input as ElInput } from '@element-plus/input'
 import { ClickOutside } from '@element-plus/directives'
 import { EVENT_CODE } from '@element-plus/utils/aria'
 import { Button as ElButton } from '@element-plus/button'
 import dayjs, { Dayjs } from 'dayjs'
 import DateTable from './basic-date-table.vue'
 import MonthTable from './basic-month-table.vue'
 import YearTable from './basic-year-table.vue'
-import TimePickPanel from '@element-plus/time-picker/src/time-picker-com/panel-time-pick.vue'
+import { TimePickPanel } from '@element-plus/time-picker'
 import {
   defineComponent,
   computed,

packages/date-picker/src/date-picker-com/panel-date-range.vue

@@ -216,12 +216,12 @@ import { t } from '@element-plus/locale'
 import {
   extractDateFormat,
   extractTimeFormat,
-} from '@element-plus/time-picker/src/common/date-utils'
+  TimePickPanel,
+} from '@element-plus/time-picker'
 import { ClickOutside } from '@element-plus/directives'
-import TimePickPanel from '@element-plus/time-picker/src/time-picker-com/panel-time-pick.vue'
 import dayjs, { Dayjs } from 'dayjs'
 import DateTable from './basic-date-table.vue'
-import ElInput from '@element-plus/input/src/index.vue'
+import { Input as ElInput } from '@element-plus/input'
 import { Button as ElButton } from '@element-plus/button'
 
 export default defineComponent({

packages/dialog/index.ts

@@ -3,3 +3,5 @@ import Dialog from './src/index'
 export default (app: App): void => {
   app.component(Dialog.name, Dialog)
 }
+
+export { Dialog }

packages/dropdown/src/dropdown.vue

@@ -13,9 +13,8 @@ import {
   watchEffect,
 } from 'vue'
 import { on, addClass, removeClass } from '@element-plus/utils/dom'
-import ElButton from '@element-plus/button/src/button.vue'
-import ElButtonGroup from '@element-plus/button/src/button-group.vue'
-import ELPopper from '@element-plus/popper/src/index.vue'
+import { Button as ElButton,  ButtonGroup as ElButtonGroup } from '@element-plus/button'
+import { Popper as ELPopper } from '@element-plus/popper'
 import { useDropdown } from './useDropdown'
 
 export default defineComponent({

packages/input-number/src/index.vue

@@ -60,7 +60,7 @@ import {
   onUpdated,
 } from 'vue'
 import { RepeatClick } from '@element-plus/directives'
-import ElInput from '@element-plus/input/src/index.vue'
+import { Input as ElInput } from '@element-plus/input'
 import type { PropType } from 'vue'
 import { parseInt } from 'lodash'
 const ELEMENT: {

packages/input/index.ts

@@ -3,3 +3,5 @@ import Input from './src/index.vue'
 export default (app: App): void => {
   app.component(Input.name, Input)
 }
+export { Input }
+

packages/pagination/src/jumper.vue

@@ -22,7 +22,7 @@ import {
   ref,
 } from 'vue'
 import { t } from '@element-plus/locale'
-import ElInput from '@element-plus/input/src/index.vue'
+import { Input as ElInput } from '@element-plus/input'
 import { usePagination } from './usePagination'
 
 export default defineComponent({

packages/pagination/src/sizes.vue

@@ -19,8 +19,7 @@
 
 <script lang="ts">
 import { defineComponent, watch, computed, ref } from 'vue'
-import ElSelect from '@element-plus/select/src/select.vue'
-import ElOption from '@element-plus/select/src/option.vue'
+import { select as ElSelect, option as ElOption } from '@element-plus/select'
 import { t } from '@element-plus/locale'
 import isEqual from 'lodash/isEqual'
 import { usePagination } from './usePagination'

packages/select/index.ts

@@ -1,12 +1,12 @@
 import { App } from 'vue'
-import Select from './src/select.vue'
-import OptionGroup from './src/option-group.vue'
-import Option from './src/option.vue'
+import select from './src/select.vue'
+import optionGroup from './src/option-group.vue'
+import option from './src/option.vue'
 
 export default (app: App): void => {
-  app.component(Select.name, Select)
-  app.component(OptionGroup.name, OptionGroup)
-  app.component(Option.name, Option)
+  app.component(select.name, select)
+  app.component(optionGroup.name, optionGroup)
+  app.component(option.name, option)
 }
 
-export const ElSelect = Select
+export { select, optionGroup, option }

packages/select/src/select.vue

@@ -170,10 +170,10 @@
 </template>
 
 <script lang="ts">
-import ElInput from '@element-plus/input/src/index.vue'
+import { Input as ElInput } from '@element-plus/input'
 import ElOption from './option.vue'
 import ElSelectMenu from './select-dropdown.vue'
-import ElTag from '@element-plus/tag/src/index.vue'
+import { Tag as ElTag } from '@element-plus/tag'
 import { Popper as ElPopper } from '@element-plus/popper'
 import { ElScrollbar } from '@element-plus/scrollbar'
 import ClickOutside from '@element-plus/directives/click-outside'

packages/tag/index.ts

@@ -3,3 +3,4 @@ import Tag from './src/index.vue'
 export default (app: App): void => {
   app.component(Tag.name, Tag)
 }
+export { Tag }

packages/time-picker/index.ts

@@ -1,5 +1,9 @@
 import { App } from 'vue'
 import TimePicker from './src/time-picker'
+import TimePickPanel from './src/time-picker-com/panel-time-pick.vue'
+export * from './src/common/date-utils'
 export default (app: App): void => {
   app.component(TimePicker.name, TimePicker)
 }
+
+export { TimePicker, TimePickPanel }

packages/time-picker/src/common/picker.vue

@@ -127,7 +127,7 @@ import {
 } from 'vue'
 import dayjs from 'dayjs'
 import { ClickOutside } from '@element-plus/directives'
-import ElInput from '@element-plus/input/src/index.vue'
+import { Input as ElInput } from '@element-plus/input'
 import { Popper as ElPopper } from '@element-plus/popper'
 import { EVENT_CODE } from '@element-plus/utils/aria'
 // Date object and string

packages/time-select/src/time-select.vue

@@ -32,7 +32,7 @@
 
 <script lang="ts">
 import { defineComponent, ref, computed, watch } from 'vue'
-import { ElSelect } from '@element-plus/select'
+import { select as ElSelect } from '@element-plus/select'
 interface Time {
   hours: number
   minutes: number

packages/transfer/src/index.vue

@@ -56,7 +56,7 @@
 <script lang="ts">
 import { computed, defineComponent, h, reactive, ref, toRefs, watch, VNode, PropType  } from 'vue'
 import { t } from '@element-plus/locale'
-import ElButton from '@element-plus/button/src/button.vue'
+import { Button as ElButton } from '@element-plus/button'
 import TransferPanel from './transfer-panel.vue'
 import { useComputedData } from './useComputedData'
 import { useCheckedChange } from './useCheckedChange'

packages/transfer/src/transfer-panel.vue

@@ -61,9 +61,8 @@
 <script lang="ts">
 import { computed, defineComponent, reactive, toRefs } from 'vue'
 import { t } from '@element-plus/locale'
-import ElCheckboxGroup from '@element-plus/checkbox/src/checkbox-group.vue'
-import ElCheckbox from '@element-plus/checkbox/src/checkbox.vue'
-import ElInput from '@element-plus/input/src/index.vue'
+import { CheckboxGroup as ElCheckboxGroup, Checkbox as ElCheckbox } from '@element-plus/checkbox'
+import { Input as ElInput } from '@element-plus/input'
 import { useCheck } from './useCheck'
 
 export const CHECKED_CHANGE_EVENT = 'checked-change'