build(core): core/bundling-opt (#1118)

.github/workflows/publish-npm.yml

@@ -5,7 +5,7 @@ on:
     types: [created]
 
 jobs:
-  build:
+  test:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v2
@@ -20,8 +20,8 @@ jobs:
       - name: Test
         run: yarn test
 
-  publish-npm:
-    needs: build
+  publish:
+    needs: test
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v2
@@ -32,36 +32,24 @@ jobs:
       - name: Get version
         run: echo "TAG_VERSION=${GITHUB_REF#refs/*/}" >> $GITHUB_ENV
       - name: build
-        run: yarn build
+        run: yarn fast-build
         env:
           TAG_VERSION: ${{env.TAG_VERSION}}
-      - run: echo "//registry.npmjs.com/:_authToken=${{ secrets.NPM_PUBLISH_TOKEN }}" > ./.npmrc
-      - name: Publish
-        run: sh ./scripts/publish.sh
+      - name: generate npm token
+        run: echo "//registry.npmjs.com/:_authToken=${{ secrets.NPM_PUBLISH_TOKEN }}" > ./.npmrc
+      - name: Publish npm
+        run: sh ./scripts/publish-npm.sh
         env:
           NODE_AUTH_TOKEN: ${{secrets.NPM_PUBLISH_TOKEN}}
           TAG_VERSION: ${{env.TAG_VERSION}}
           REGISTRY: https://registry.npmjs.com/
-
-  publish-gpr:
-    needs: build
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v2
-      - uses: actions/setup-node@v2
-        with:
-          node-version: '12'
-          registry-url: https://npm.pkg.github.com/
-      - name: Get version
-        run: echo "TAG_VERSION=${GITHUB_REF#refs/*/}" >> $GITHUB_ENV
-      - name: build
-        run: yarn build
-        env:
-          TAG_VERSION: ${{env.TAG_VERSION}}
-      - run: echo "//npm.pkg.github.com/:_authToken=${{ secrets.GITHUB_TOKEN }}" > ./.npmrc
-      - name: Publish
-        run: sh ./scripts/publish.sh
+          PKG_NAME: element-plus
+      - name: Generate grp token
+        run: echo "//npm.pkg.github.com/:_authToken=${{ secrets.GITHUB_TOKEN }}" > ./.npmrc
+      - name: Publish grp
+        run: sh ./scripts/publish-grp.sh
         env:
           NODE_AUTH_TOKEN: ${{secrets.GITHUB_TOKEN}}
           TAG_VERSION: ${{env.TAG_VERSION}}
           REGISTRY: https://npm.pkg.github.com/
+          PKG_NAME: "@element-plus/element-plus"

.gitignore

@@ -14,3 +14,4 @@ website-dist
 lib
 website/play/index.vue
 packages/element-plus/version.ts
+es

build/build.comps.js

@@ -0,0 +1,16 @@
+/* eslint-disable */
+
+// name came from the terminal as `./packages/*` notation, so when resolve the name, we'd like
+// to add a `..` to do so. because the current file is under `build/`, `packages/` is at the
+// same level as `build/`,
+const run = require('./build');
+const compPath = process.argv[2]
+if (!compPath) {
+  console.error('Usage: node build.js [component]')
+  process.exit(1)
+}
+
+const outPutPrefix = ['hooks', 'directives'].some((p) => compPath.includes(p)) ? '' : 'el-';
+const compName = compPath.split('/').pop()
+
+run(`${outPutPrefix}${compName}/index.js`, compPath)

build/build.entry.js

@@ -0,0 +1,5 @@
+/* eslint-disable */
+
+const run = require('./build');
+
+run('index.js', './packages/element-plus', true)

build/build.js

@@ -0,0 +1,81 @@
+/* eslint-disable */
+const pkg = require('../package.json')
+const path = require('path')
+const css = require('rollup-plugin-css-only')
+const { nodeResolve } = require('@rollup/plugin-node-resolve')
+const vue = require('rollup-plugin-vue')
+const rollup = require('rollup')
+const typescript = require('rollup-plugin-typescript2')
+const { noElPrefixFile } = require('./common');
+
+const deps = Object.keys(pkg.dependencies)
+
+const root = path.resolve(__dirname, '..');
+
+const defaultOpts = {
+  plugins: [
+    nodeResolve(),
+    css(),
+    vue({
+      target: 'browser',
+      css: false,
+    }),
+    typescript({
+      tsconfigOverride: {
+        compilerOptions: {
+          declaration: false,
+        },
+        'exclude': [
+          'node_modules',
+          '__tests__',
+        ],
+      },
+      abortOnError: false,
+    }),
+  ],
+  external(id) {
+    return /^vue/.test(id)
+      || /^@element-plus/.test(id)
+      || deps.some(k => new RegExp('^' + k).test(id))
+  },
+}
+
+const isPkg = (id) => {
+  return id.startsWith('@element-plus')
+}
+
+const isExcluded = (id) => {
+  return noElPrefixFile.test(id)
+}
+
+const replacePrefix = (prefix, target) => {
+  return prefix + target.slice(14) // @element-plus/.length = 14
+}
+
+const run = async (name, input, isRoot = false) => {
+  const inputPath = `${path.resolve(root, input)}/index.ts`
+  defaultOpts.input = inputPath
+
+  const getPaths = (id) => {
+    if (isPkg(id)) {
+      if (isExcluded(id)) return replacePrefix(isRoot ? './' : '../', id)
+      return replacePrefix(isRoot ? './el-' : '../el-', id)
+    }
+  }
+  const esm = {
+    format: 'es',
+    file: `es/${name}`,
+    paths: getPaths,
+  };
+  const cjs = {
+    format: 'cjs',
+    file: `lib/${name}`,
+    paths: getPaths,
+    exports: 'named',
+  };
+  const bundle = await rollup.rollup(defaultOpts);
+  await Promise.all([bundle.write(esm), bundle.write(cjs)])
+  console.log(name, 'build finished');
+}
+
+module.exports = run;

build/getCpus.js

@@ -0,0 +1,4 @@
+/* eslint-disable */
+const os = require('os')
+
+console.log(os.cpus().length)

build/getPkgs.js

@@ -0,0 +1,4 @@
+/* eslint-disable */
+const { getPackagesSync } = require('@lerna/project');
+
+module.exports = getPackagesSync();

package.json

@@ -9,7 +9,7 @@
     "bootstrap": "yarn --frozen-lockfile && npx lerna bootstrap && yarn gen:version",
     "gen:version": "node build/gen-version.js",
     "build": "yarn bootstrap && yarn clean:lib && yarn build:esm-bundle && yarn build:lib && yarn build:lib-full && yarn build:esm && yarn build:utils && yarn build:locale && yarn build:locale-umd && yarn build:theme",
-    "clean:lib": "rimraf lib",
+    "clean:lib": "rimraf lib && rimraf es",
     "build:lib": "cross-env LIBMODE=core webpack --config ./build/webpack.config.js",
     "build:lib-full": "cross-env LIBMODE=full webpack --config ./build/webpack.config.js",
     "build:esm-bundle": "rollup --config ./build/rollup.config.bundle.js && yarn build:type",
@@ -24,7 +24,8 @@
     "website-build": "rimraf website-dist && cross-env NODE_ENV=production webpack --config ./website/webpack.config.js",
     "website-dev": "webpack-dev-server --config ./website/webpack.config.js",
     "website-dev:play": "cross-env PLAY_ENV=true yarn website-dev",
-    "upgrade:vue": "bash ./scripts/update-versions.sh"
+    "upgrade:vue": "bash ./scripts/update-versions.sh",
+    "fast-build": "sh ./scripts/build.sh"
   },
   "peerDependencies": {
     "vue": "^3.0.3"
@@ -137,7 +138,7 @@
   },
   "files": [
     "lib",
-    "packages"
+    "es"
   ],
   "main": "lib/index.js",
   "module": "lib/index.esm.js",

scripts/build.sh

@@ -0,0 +1,38 @@
+#! /usr/bin/bash
+
+
+# echo `node ./build/build.js ./packages/button`
+# find all folders under root/packages excludes
+# *utils, __mocks__ directives hooks locale theme*
+# which means the result will not contain folder name includes utils
+
+yarn bootstrap
+
+yarn clean:lib
+yarn build:esm-bundle
+tar --exclude=index.esm.js -zcvf  ./es.gz ./lib
+mkdir -p es
+tar -zxvf ./es.gz --strip-component 2 -C ./es
+yarn build:lib
+yarn build:lib-full
+
+# -P6 stands for 6 maximum parallel, with
+# node .build/build.js command
+find ./packages -type d -depth 1 \
+! -name '*util*' ! -name '__mocks__' \
+! -name 'locale' ! -name 'theme*' -print0 \
+| xargs -I {} -P6 -0 node ./build/build.comps.js {}
+
+node ./build/build.entry.js
+
+yarn build:utils
+
+yarn build:locale
+
+yarn build:locale-umd
+
+yarn build:theme
+
+# Post build clean up
+
+rm ./es.gz

scripts/publish.sh

@@ -2,8 +2,12 @@
 
 # Do not run this file without setting the environment variables, you will end up fatal error
 # If you wish to run this locally, please change the env variable before running this.
-echo "//${REGISTRY}/:_authToken=${TOKEN}" > .npmrc
+# echo "//${REGISTRY}/:_authToken=${TOKEN}" > .npmrc
+
+cat package.json \
+| grep -v '"private":' \
+| grep -v '"version":' \
+| sed "s/\(\"name\": \"element-plus\"\)/\"name\": \"${PKG_NAME}\",\n  \"version\": \"${TAG_VERSION}\"/g" > package.json.bak
 
-cat package.json | grep -v '"private":' | grep -v '"version":' | sed "s/\(\"name\": \"element-plus\"\)/\1,\n  \"version\": \"${TAG_VERSION}\"/g" > package.json.bak
 cat package.json.bak > package.json
-npm publish
+npm publish --registry ${REGISTRY}