fix: change .env.js to _env.js, fix serverless not load

BREAKING CHANGE: change `.env.js` to `_env.js`, fix serverless not load
SolidZORO · Jun 16, 2020 · 7c35661 · 7c35661
1 parent 7cc0950
commit 7c35661
Show file tree

Hide file tree

Showing 13 changed files with 53 additions and 39 deletions.
diff --git a/packages/leaa-dashboard/.eslintignore b/packages/leaa-dashboard/.eslintignore
@@ -18,3 +18,5 @@
 
 /tools/module-alias
 /packages/leaa-dashboard/tools/webpack2
+
+_env*
diff --git a/packages/leaa-dashboard/.gitignore b/packages/leaa-dashboard/.gitignore
@@ -26,9 +26,11 @@ logs
 *.log
 
 # Env
+_env.*
 .env*
 !.env.example
 !.env.js.example
+!_env.js.example
 robots.txt
 
 # Test

diff --git a/packages/leaa-dashboard/.env.js.example → packages/leaa-dashboard/_env.js.example b/packages/leaa-dashboard/.env.js.example → packages/leaa-dashboard/_env.js.example
@@ -1,4 +1,4 @@
-const __ENV__ = {
+const __ENV_DATA__ = {
   __ENV__: 'prod',
 
   // PROJECT
@@ -24,4 +24,4 @@ const __ENV__ = {
   SERVER_HOST: 'localhost',
 };
 
-typeof window !== 'undefined' ? (window.__ENV__ = __ENV__) : (module.exports = __ENV__);
+typeof window !== 'undefined' ? (window.__ENV_DATA__ = __ENV_DATA__) : (module.exports = __ENV_DATA__);
diff --git a/packages/leaa-dashboard/deploy.sh b/packages/leaa-dashboard/deploy.sh
@@ -9,7 +9,7 @@ __DEPLOY__="./_deploy"
 usage() {
   # shellcheck disable=SC2028
   echo "\n\n
-  🔰  Usage: $0 -p (test | local_build | vercel) [-i] [-S]
+  🔰  Usage: $0 -p (local_test | only_build | vercel) [-i] [-S]
       \n
       -p platform
       -i ignore yarn build
@@ -28,7 +28,7 @@ set_var() {
 
   if [ -z "${!arg_name}" ]; then
     if [ "$arg_name" = "PLATFORM" ]; then
-      if echo "$*" | grep -Eq '^test|local_build|vercel$'; then
+      if echo "$*" | grep -Eq '^local_test|only_build|vercel$'; then
         eval "$arg_name=\"$*\""
       else
         usage
@@ -53,14 +53,14 @@ platform_vercel() {
   vercel --prod -c
 }
 
-platform_local_build() {
+platform_only_build() {
   cd ${__DEPLOY__} || exit
 
   # shellcheck disable=SC2028
-  echo "\n✨  Done Platform Local Build\n"
+  echo "\n✨  Done Platform Build\n"
 }
 
-platform_test() {
+platform_local_test() {
   cd ${__DEPLOY__} || exit
 
   serve ./ -s -p 5555
@@ -110,14 +110,15 @@ case "$response" in
   fi
   cp -fr ./_dist/* ${__DEPLOY__}
   cp -fr ./public/* ${__DEPLOY__}
+  cp -fr ./.env.js ${__DEPLOY__}
 
   # -----------
   # @DEPLOY-DIR
   # -----------
   if [ -n "$PLATFORM" ]; then
     case $PLATFORM in
-    test) platform_test ;;
-    local_build) platform_local_build ;;
+    local_test) platform_local_test ;;
+    only_build) platform_only_build ;;
     vercel) platform_vercel ;;
     *) usage ;; esac
   fi

diff --git a/packages/leaa-dashboard/package.json b/packages/leaa-dashboard/package.json
@@ -19,6 +19,7 @@
     "lint": "yarn run lint-js && yarn run lint-css",
     "fix": "yarn run fix-js && yarn run fix-css",
     "tsc-check": "tsc -v && tsc --noEmit",
+    "path-test": "NODE_ENV=development cross-env node ./tools/webpack/__path-test.js",
     "---------------------------------------------------------------------- DEV ----": "----",
     "dev-server": "NODE_ENV=development cross-env webpack-dev-server --config ./tools/webpack/webpack.config.js --progress --hot --inline --server --host 0.0.0.0",
     "dev": "NODE_ENV=development yarn dev-server",

diff --git a/packages/leaa-dashboard/src/components/BuildInfo/BuildInfo.tsx b/packages/leaa-dashboard/src/components/BuildInfo/BuildInfo.tsx
@@ -43,7 +43,9 @@ export const BuildInfo = (props: IProps) => {
 
         <div className={style['build-item']}>
           <span>VERSION:</span>
-          <strong>{buildConfig.VERSION}</strong>
+          <strong>
+            {buildConfig.VERSION} ({buildConfig.GIT_VERSION})
+          </strong>
         </div>
 
         <div className={style['build-item']}>

diff --git a/packages/leaa-dashboard/src/configs/env.config.ts b/packages/leaa-dashboard/src/configs/env.config.ts
@@ -2,4 +2,4 @@ import { IDotEnv } from '@leaa/dashboard/src/interfaces';
 
 // @ts-ignore
 // eslint-disable-next-line no-underscore-dangle
-export const envConfig: IDotEnv = window.__ENV__;
+export const envConfig: IDotEnv = window.__ENV_DATA__;
diff --git a/packages/leaa-dashboard/src/interfaces/config.interface.ts b/packages/leaa-dashboard/src/interfaces/config.interface.ts
@@ -22,4 +22,6 @@ export interface IBuild {
   MODE: string;
   VERSION: string;
   BUILDTIME: string;
+  GIT_VERSION: string;
+  VERSION_SLUG: string;
 }
diff --git a/packages/leaa-dashboard/src/views/index.ejs b/packages/leaa-dashboard/src/views/index.ejs
@@ -14,7 +14,7 @@
   -->
   <link rel="manifest" href="<%= htmlWebpackPlugin.options.manifest %>" />
   <title><%= htmlWebpackPlugin.options.title %></title>
-  <script src="<%= htmlWebpackPlugin.options.__ENV_FILE__ %>"></script>
+  <script src="<%= htmlWebpackPlugin.options.__ENV_FILE__ %>?<%= htmlWebpackPlugin.options.version_hash %>"></script>
 </head>
 <body>
 <div id="app"></div>

diff --git a/packages/leaa-dashboard/tools/deploy-config/vercel/vercel.json b/packages/leaa-dashboard/tools/deploy-config/vercel/vercel.json
@@ -6,6 +6,7 @@
   "routes": [
     { "src": "^/statics/(.*)", "dest": "/statics/$1" },
     { "src": "^/assets/(.*)", "dest": "/assets/$1" },
+    { "src": "^/_env.js", "dest": "/_env.js" },
     { "src": "^/(.*)", "dest": "/index.html" }
   ]
 }
diff --git a/packages/leaa-dashboard/tools/webpack/_const.js b/packages/leaa-dashboard/tools/webpack/_const.js
@@ -3,20 +3,19 @@ const path = require('path');
 const ip = require('ip');
 const fs = require('fs');
 
-const ROOT_DIR = path.join(__dirname, '../../');
 const __DEV__ = process.env.NODE_ENV !== 'production';
+const ROOT_DIR = path.resolve(__dirname, '../../');
 
-const ENV_FILE_NAME = !__DEV__ ? '.env.js' : `.env.${process.env.NODE_ENV}.js`;
+const ENV_FILE_NAME = !__DEV__ ? '_env.js' : `_env.${process.env.NODE_ENV}.js`;
 
 function getEnvFilePath() {
-  const envFilePath = `${ROOT_DIR}${ENV_FILE_NAME}`;
+  const envFilePath = path.join(ROOT_DIR, ENV_FILE_NAME);
 
+  console.log('ENV_FILE_PATHENV_FILE_PATHENV_FILE_PATHENV_FILE_PATHENV_FILE_PATHENV_FILE_PATH', envFilePath);
   if (process.env.NODE_ENV && !fs.existsSync(envFilePath)) {
-    console.log('\n');
-    console.log(''.padStart(48, '='));
-    console.error(`\n🔰  Please create \`${ENV_FILE_NAME}\` file first\n`);
-    console.log(''.padStart(48, '='));
-    console.log('\n\n');
+    console.log('\n\n', '\n'.padStart(48, '='));
+    console.error(`\n🔰  Please create \`${ENV_FILE_NAME}\` file first\n\n`);
+    console.log('\n'.padStart(48, '='), '\n\n');
 
     process.exit(-1);
   }
@@ -26,6 +25,8 @@ function getEnvFilePath() {
 
 const ENV_FILE_PATH = getEnvFilePath();
 
+console.log('ENV_FILE_PATHENV_FILE_PATHENV_FILE_PATHENV_FILE_PATHENV_FILE_PATHENV_FILE_PATH', ENV_FILE_PATH);
+
 function getEnvData() {
   // eslint-disable-next-line global-require,import/no-dynamic-require
   const env = require(ENV_FILE_PATH);
@@ -36,6 +37,11 @@ function getEnvData() {
   return env || {};
 }
 
+//
+//
+//
+//
+
 const WPCONST = getEnvData();
 
 WPCONST.__DEV__ = __DEV__;
@@ -44,11 +50,6 @@ WPCONST.__PROD__ = !__DEV__;
 WPCONST.ENV_FILE_NAME = ENV_FILE_NAME;
 WPCONST.ENV_FILE_PATH = ENV_FILE_PATH;
 
-// ⚠️ Webpack Server NOT Support dot file, so hacking it. (DEV ONLY)
-WPCONST.ENV_FILE_NAME_HACKING_FOR_WEBPACK_SERVER = __DEV__
-  ? ENV_FILE_NAME.replace('.env', '__ENV_FILE_NAME_HACKING_FOR_WEBPACK_SERVER__')
-  : ENV_FILE_NAME;
-
 WPCONST.IS_SERVER = process.argv.includes('--server');
 WPCONST.IS_VERBOSE = process.argv.includes('--verbose');
 WPCONST.IS_SMP = process.argv.includes('--smp');
@@ -73,10 +74,11 @@ WPCONST.DEVTOOL = WPCONST.__DEV__ && WPCONST.IS_DEBUG ? 'eval-source-map' : fals
 //
 // DIR PATH
 WPCONST.ROOT_DIR = ROOT_DIR;
-WPCONST.SRC_DIR = path.resolve(`${WPCONST.ROOT_DIR}/src`);
-WPCONST.PUBLIC_DIR = path.resolve(`${WPCONST.ROOT_DIR}/public`);
-WPCONST.NODEMODULES_DIR = path.resolve(`${WPCONST.ROOT_DIR}/node_modules`);
-WPCONST.VIEWS_DIR = path.resolve(`${WPCONST.SRC_DIR}/views`);
+WPCONST.SRC_DIR = path.join(WPCONST.ROOT_DIR, 'src');
+
+WPCONST.PUBLIC_DIR = path.join(WPCONST.ROOT_DIR, 'public');
+WPCONST.NODEMODULES_DIR = path.join(WPCONST.ROOT_DIR, 'node_modules');
+WPCONST.VIEWS_DIR = path.join(WPCONST.SRC_DIR, 'views');
 
 //
 // BUILD PATH
@@ -86,10 +88,10 @@ WPCONST.BUILD_DIR_NAME = WPCONST.__DEV__ ? '.cache' : '_dist';
 WPCONST.OUTPUT_PUBLIC_PATH = '/statics/';
 
 // e.g. /_dist
-WPCONST.BUILD_DIR = path.resolve(`${WPCONST.ROOT_DIR}/${WPCONST.BUILD_DIR_NAME}`);
+WPCONST.BUILD_DIR = path.join(WPCONST.ROOT_DIR, WPCONST.BUILD_DIR_NAME);
 
 // e.g. /_dist/statics/
-WPCONST.OUTPUT_PATH = path.resolve(`${WPCONST.ROOT_DIR}/${WPCONST.BUILD_DIR_NAME}${WPCONST.OUTPUT_PUBLIC_PATH}`);
+WPCONST.OUTPUT_PATH = path.join(WPCONST.ROOT_DIR, WPCONST.BUILD_DIR_NAME, WPCONST.OUTPUT_PUBLIC_PATH);
 
 //
 // CHUNK PATH
@@ -118,6 +120,6 @@ WPCONST.REGX_FONT = /\.(woff2|woff|ttf|eot)$/;
 
 //
 // ETC
-WPCONST.PACKAGE_FILE = path.resolve(`${WPCONST.ROOT_DIR}/package.json`);
+WPCONST.PACKAGE_FILE = path.join(WPCONST.ROOT_DIR, 'package.json');
 
 module.exports = { WPCONST, getEnvData };
diff --git a/packages/leaa-dashboard/tools/webpack/_fn.js b/packages/leaa-dashboard/tools/webpack/_fn.js
@@ -33,4 +33,4 @@ function showEnvInfo() {
   console.log('\n\n\n');
 }
 
-module.exports = { showEnvInfo, getVersion };
+module.exports = { showEnvInfo, getVersion, getGitVersion };
diff --git a/packages/leaa-dashboard/tools/webpack/_plugins.js b/packages/leaa-dashboard/tools/webpack/_plugins.js
@@ -1,5 +1,4 @@
 /* eslint-disable no-underscore-dangle, max-len */
-const _ = require('lodash');
 const moment = require('moment');
 const webpack = require('webpack');
 const CopyPlugin = require('copy-webpack-plugin');
@@ -14,7 +13,7 @@ const InlineChunkHtmlPlugin = require('react-dev-utils/InlineChunkHtmlPlugin');
 const WatchMissingNodeModulesPlugin = require('react-dev-utils/WatchMissingNodeModulesPlugin');
 // const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin');
 
-const { showEnvInfo } = require('./_fn');
+const { showEnvInfo, getGitVersion } = require('./_fn');
 const { WPCONST } = require('./_const');
 const { analyzer } = require('./_analyzer');
 const { provide } = require('./_provide');
@@ -27,12 +26,14 @@ class ShowEnvInfoWebpackPlugin {
 
 // HtmlWebpackPlugin
 const htmlWebpackPluginOption = {
-  __ENV_FILE__: WPCONST.ENV_FILE_NAME_HACKING_FOR_WEBPACK_SERVER,
+  __ENV_FILE__: WPCONST.ENV_FILE_NAME,
   __BUILD_DATA__: Buffer.from(
     JSON.stringify({
       VERSION: `v${process.env.npm_package_version}`,
+      VERSION_SLUG: `v${process.env.npm_package_version}-${getGitVersion}`,
       MODE: WPCONST.MODE,
       BUILDTIME: moment().format('YYYYMMDD-HHmmss'),
+      GIT_VERSION: getGitVersion,
     }),
   ).toString('base64'),
   title: `${WPCONST.SITE_NAME || '-'}`,
@@ -42,6 +43,7 @@ const htmlWebpackPluginOption = {
   favicon: `${WPCONST.SRC_DIR}/assets/favicons/favicon.ico`,
   inject: true,
   hash: true,
+  version_hash: `v${process.env.npm_package_version}-${getGitVersion}`,
   minify: WPCONST.__PROD__
     ? {
         removeComments: true,
@@ -95,16 +97,15 @@ const plugins = [
     patterns: [
       {
         from: `${WPCONST.PUBLIC_DIR}/assets/**/*`,
-        to: `${WPCONST.BUILD_DIR}`,
+        to: WPCONST.BUILD_DIR,
         transformPath(targetPath) {
           return `${targetPath}`.replace('public/', '');
         },
         cacheTransform: true,
       },
       {
-        // ⚠️ Webpack Server NOT Support dot file, so hacking it. (DEV ONLY)
         from: WPCONST.ENV_FILE_PATH,
-        to: `${WPCONST.BUILD_DIR}/${WPCONST.ENV_FILE_NAME_HACKING_FOR_WEBPACK_SERVER}`,
+        to: WPCONST.BUILD_DIR,
         transformPath(targetPath) {
           return `${targetPath}`.replace('public/', '');
         },