修改变量

ygs-code · ygs-code · commit f9ff009c1b22 · 2022-08-09T00:36:03.000+08:00
diff --git a/.env b/.env
@@ -0,0 +1 @@
+htmlWebpackPluginOptions='{title:网页标题,webpackName:webpack-cli-util}'
diff --git a/.env.development b/.env.development
@@ -0,0 +1,5 @@
+#环境变量
+NODE_ENV="development"
+VITE_APP_BASEAPI="https://www.dev.com"
+VITE_PROJECT_TITLE="标题"
+NODE_ENV='development'
diff --git a/.env.production b/.env.production
@@ -0,0 +1,4 @@
+#环境变量
+NODE_ENV="production"
+VITE_APP_BASEAPI="https://www.production.com"
+VITE_PROJECT_TITLE="标题2"
diff --git a/.env.test b/.env.test
@@ -0,0 +1,5 @@
+#环境变量
+NODE_ENV="test"
+
+VITE_APP_BASEAPI="https://www.test.com"
+VITE_PROJECT_TITLE="标题1"
diff --git a/.eslintignore b/.eslintignore
@@ -18,6 +18,7 @@ webpack/**/*
 **/webpack
 **/webpack/**/*
 **/webpack/**/*
+ 
 
 
 
diff --git a/bin/index.js b/bin/index.js
@@ -0,0 +1,2 @@
+//
+
diff --git a/client/App/App.js b/client/App/App.js
@@ -12,10 +12,12 @@ import {Provider} from 'react-redux';
 import Routers from '@/router';
 import './App.less';
 import '@/assets/css/base.less';
-import 'bootstrap/dist/css/bootstrap.css';  
+import 'bootstrap/dist/css/bootstrap.css';
+
+
+
 const App = (props) => {
     const {history, location, store} = props;
-
     return (
         <Provider store={store}>
             <Routers history={history} location={location} />
diff --git a/client/App/CreateApp.js b/client/App/CreateApp.js
@@ -1,7 +1,6 @@
 import React, { Component } from 'react';
 import Loadable, { Capture } from  '@/component/Loadable';
 import PropTypes from 'prop-types';
-import { getEv } from '@/utils';
 import App from './App.js';
 import './App.less';
 
@@ -10,9 +9,7 @@ let {
     WEB_ENV, // 环境参数
     target, // 环境参数
     htmlWebpackPluginOptions = '',
-    COMPILER_ENV,
-} = getEv(); // 环境参数
-
+} = process.env; // 环境参数
 
 
 const CreateApp = (props = {}) => {
diff --git a/client/utils/getEv.js b/client/utils/getEv.js
@@ -14,15 +14,15 @@ const getEv = () => {
                     NODE_ENV, // 环境参数
                     WEB_ENV, // 环境参数
                     target, // 环境参数
-                    COMPILER_ENV,
+       
                     htmlWebpackPluginOptions,
                 } = process.env;
 
                 $GLOBAL_VARIABLE = {
                     NODE_ENV, // 环境参数
                     WEB_ENV, // 环境参数
                     target, // 环境参数
-                    COMPILER_ENV,
+               
                     htmlWebpackPluginOptions,
                 };
             }
diff --git a/package.json b/package.json
@@ -4,10 +4,11 @@
   "description": "",
   "main": "index.js",
   "scripts": {
-    "web:dev:server": "cross-env NODE_ENV=development      COMPILER_ENV=webpackDevServer  target=web  htmlWebpackPluginOptions='{title:网页标题,webpackName:webpack-cli-util}'  webpack-dev-server -r @babel/register  --progress --config ./webpack/config/client/index.js",
+    "web:dev": "cross-env target='web'  COMPILER_ENV='middleware'    npx babel-node  -r    dotenv/config   ./server/index.js  dotenv_config_path=.env.development",
     "web:prod:build": "cross-env NODE_ENV=production       COMPILER_ENV=webpack           target=web  htmlWebpackPluginOptions='{title:网页标题,webpackName:webpack-cli-util}'  webpack            -r @babel/register   --progress --config  ./webpack/config/client/index.js",
-    "ssr:dev:middleware": "cross-env NODE_ENV=development  COMPILER_ENV=middleware        target=ssr  htmlWebpackPluginOptions='{title:网页标题,webpackName:webpack-cli-util}'  node               -r @babel/register   ./server/index.js",
-    "ssr:dev:build": "cross-env NODE_ENV=development       COMPILER_ENV=webpack           target=ssr  htmlWebpackPluginOptions='{title:网页标题,webpackName:webpack-cli-util}'  webpack            -r @babel/register  --progress  --config  ./webpack/config/client/index.js",
+    
+    "ssr:dev": "cross-env target='ssr'  COMPILER_ENV='middleware'    npx babel-node  -r    dotenv/config   ./server/index.js  dotenv_config_path=.env.development",
+    "ssr:dev:build": "cross-env NODE_ENV=development  COMPILER_ENV=webpack   target=ssr  htmlWebpackPluginOptions='{title:网页标题,webpackName:webpack-cli-util}'  webpack            -r @babel/register  --progress  --config  ./webpack/config/client/index.js",
     "ssr:prod:build": "cross-env NODE_ENV=production       COMPILER_ENV=webpack           target=ssr  htmlWebpackPluginOptions='{title:网页标题,webpackName:webpack-cli-util}'  webpack            -r @babel/register   --progress --config   ./webpack/config/client/index.js",
     "start:server": "npm run start:server:prod",
     "start:server:dev": "cross-env NODE_ENV=development   target=ssr  nodemon  -r @babel/register  ./dist/server/server/index.js",
@@ -25,8 +26,8 @@
   "license": "ISC",
   "devDependencies": {},
   "dependencies": {
-    "@babel/cli": "^7.17.6",
-    "@babel/core": "^7.17.10",
+    "@babel/cli": "^7.18.10",
+    "@babel/core": "^7.18.10",
     "@babel/eslint-parser": "^7.18.2",
     "@babel/eslint-plugin": "^7.17.7",
     "@babel/node": "^7.16.8",
@@ -56,7 +57,7 @@
     "@babel/plugin-transform-runtime": "^7.18.6",
     "@babel/plugin-transform-typescript": "^7.12.1",
     "@babel/polyfill": "^7.12.1",
-    "@babel/preset-env": "^7.16.11",
+    "@babel/preset-env": "^7.18.10",
     "@babel/preset-react": "^7.16.7",
     "@babel/preset-stage-0": "^7.8.3",
     "@babel/preset-typescript": "^7.17.12",
@@ -67,6 +68,7 @@
     "axios": "^0.27.2",
     "babel-eslint": "^10.1.0",
     "babel-loader": "^8.2.5",
+    "babel-node": "^0.0.1-security",
     "babel-plugin-syntax-dynamic-import": "^6.18.0",
     "bootstrap": "^5.2.0",
     "cache-loader": "^4.1.0",
@@ -78,6 +80,7 @@
     "cross-env": "^5.1.1",
     "css-loader": "^0.28.7",
     "directory-named-webpack-plugin": "^4.0.1",
+    "dotenv": "^16.0.1",
     "esbuild-loader": "^2.19.0",
     "eslint": "^8.20.0",
     "eslint-config-airbnb": "^19.0.4",
@@ -135,4 +138,4 @@
     "webpack-merge": "4.1.0",
     "webpackbar": "^5.0.2"
   }
-}
+}
diff --git a/server/app.js b/server/app.js
@@ -1,50 +1,52 @@
-require('./ignore.js')()
-import Loadable from 'react-loadable'
-import Koa from 'koa'
-import Router from './router'
-import Middleware from './middleware'
+require('./ignore.js')();
+import Loadable from 'react-loadable';
+import Koa from 'koa';
+import Router from './router';
+import Middleware from './middleware';
+
+
 // import { getEv } from '@/utils';
 
 let {
-  NODE_ENV, // 环境参数
-  WEB_ENV, // 环境参数
-  target, // 环境参数
-  htmlWebpackPluginOptions = '',
-} = process.env // 环境参数
+    NODE_ENV, // 环境参数
+    WEB_ENV, // 环境参数
+    target, // 环境参数
+    htmlWebpackPluginOptions = '',
+} = process.env; // 环境参数
 
 //    是否是生产环境
-const isEnvProduction = NODE_ENV === 'production'
+const isEnvProduction = NODE_ENV === 'production';
 //   是否是测试开发环境
-const isEnvDevelopment = NODE_ENV === 'development'
+const isEnvDevelopment = NODE_ENV === 'development';
 
-const port = process.env.port || 3002
+const port = process.env.port || 3002;
 
 class App {
-  constructor() {
-    this.init()
-  }
-  init() {
-    this.app = new Koa()
-    this.addRouter()
-    this.addMiddleware()
-    this.listen()
-  }
-  addRouter() {
-    new Router(this.app)
-  }
-  addMiddleware() {
-    new Middleware(this.app)
-  }
-  listen() {
-    Loadable.preloadAll().then(() => {
-      const server = this.app.listen(port, function () {
-        var port = server.address().port
-        console.log( 
-          `\n==> 🌎  node服务器启动成功，监听端口：${port}. 请打开浏览器 http://localhost:${port}/ \n`,
-        )
-      })
-    })
-  }
+    constructor() {
+        this.init();
+    }
+    init() {
+        this.app = new Koa();
+        this.addRouter();
+        this.addMiddleware();
+        this.listen();
+    }
+    addRouter() {
+        new Router(this.app);
+    }
+    addMiddleware() {
+        new Middleware(this.app);
+    }
+    listen() {
+        Loadable.preloadAll().then(() => {
+            const server = this.app.listen(port, function () {
+                var port = server.address().port;
+                console.log(
+                    `\n==> 🌎  node服务器启动成功，监听端口：${port}. 请打开浏览器 http://localhost:${port}/ \n`
+                );
+            });
+        });
+    }
 }
 
-export default App
+export default App;
diff --git a/server/ignore.js b/server/ignore.js
@@ -1,28 +1,27 @@
-const { getEv } = require('../client/utils');
-
+ 
 let {
     NODE_ENV, // 环境参数
     WEB_ENV, // 环境参数
     target, // 环境参数
     htmlWebpackPluginOptions = '',
-    COMPILER_ENV,
-} = getEv(); // 环境参数
+   
+} = process.env; // 环境参数
+
 
-const isCompiler = COMPILER_ENV == 'middleware';
 
 //    是否是生产环境
 const isEnvProduction = NODE_ENV === 'production';
 //   是否是测试开发环境
 const isEnvDevelopment = NODE_ENV === 'development';
 
 const ignore = () => {
-    var extensions = isCompiler
-        ? []
-        : ['.css', '.scss', '.less', '.png', '.jpg', '.gif', '.svg']; //服务端渲染不加载的文件类型
-    for (let i = 0, len = extensions.length; i < len; i++) {
-        require.extensions[extensions[i]] = function () {
-            return false;
-        };
-    }
+    // var extensions = isCompiler
+    //     ? []
+    //     : ['.css', '.scss', '.less', '.png', '.jpg', '.gif', '.svg']; //服务端渲染不加载的文件类型
+    // for (let i = 0, len = extensions.length; i < len; i++) {
+    //     require.extensions[extensions[i]] = function () {
+    //         return false;
+    //     };
+    // }
 };
 module.exports = ignore;
diff --git a/server/index.js b/server/index.js
@@ -12,7 +12,13 @@ import cluster from 'cluster';
 import App from './app';
 // import "core-js/stable";
 import os from 'os';
-const { Worker } = require('worker_threads');
+import * as dotenv from 'dotenv'; // see https://github.com/motdotla/dotenv#how-do-i-use-dotenv-with-import
+import { Worker } from 'worker_threads';
+// 注入环境变量
+dotenv.config({ path: '.env' });
+console.log('process.env.S3_BUCKET==', process.env.S3_BUCKET); //
+console.log('process.env.VITE_PROJECT_TITLE==', process.env.VITE_PROJECT_TITLE); //
+
 // 开启的子进程数
 const workerNum = 1; //os.cpus().length - 1;
 // 如果是主进程
diff --git a/server/middleware/clientRouter/index.js b/server/middleware/clientRouter/index.js
@@ -13,7 +13,7 @@ import Helmet from 'react-helmet'
 import { matchPath } from 'react-router-dom'
 import createStore from '@/redux'
 import routesComponent, { routesConfigs } from '@/router/routesComponent'
-import { findTreeData, getEv, getBaseInitState } from '@/utils'
+import { findTreeData,   getBaseInitState } from '@/utils'
 import otherModules from './otherModules'
 import path, { resolve } from 'path'
 import fs from 'fs'
@@ -23,11 +23,8 @@ let {
   WEB_ENV, // 环境参数
   target, // 环境参数
   htmlWebpackPluginOptions = '',
-  COMPILER_ENV,
-} = getEv() // 环境参数
+} = process.env; // 环境参数
 
-// 如果是中间件编译
-const isCompile = COMPILER_ENV === 'middleware'
 //    是否是生产环境
 const isEnvProduction = NODE_ENV === 'production'
 //   是否是测试开发环境
@@ -57,7 +54,7 @@ class ClientRouter {
     const modules = new Set()
     let html = fs.readFileSync(
       path.join(
-        path.join(absolutePath, isCompile ? '/client/public' : 'dist/client'),
+        path.join(absolutePath, isEnvDevelopment ? '/client/public' : 'dist/client'),
         'index.html',
       ),
       'utf-8',
diff --git a/server/middleware/index.js b/server/middleware/index.js
@@ -8,12 +8,9 @@ let {
     WEB_ENV, // 环境参数
     target, // 环境参数
     htmlWebpackPluginOptions = '',
-    COMPILER_ENV,
 } = process.env; // 环境参数
-
-// 如果是中间件编译
-const isCompile = COMPILER_ENV === 'middleware';
-
+// 是否是ssr
+const isSsr = target == 'ssr';
 //    是否是生产环境
 const isEnvProduction = NODE_ENV === 'production';
 //   是否是测试开发环境
@@ -52,9 +49,10 @@ export default class Middleware {
     addMiddleware() {
         this.addCorsMiddleware();
 
-        if (isCompile) {
+        if (isEnvDevelopment) {
+            // 如果是生产不在这里编译
             this.addWebpackHotMiddleware();
-        } else {
+        } else if (isSsr) {
             this.addStaticCacheMiddleware();
             this.addClientRouterMiddleware();
         }
diff --git a/server/middleware/webpackHot/index.js b/server/middleware/webpackHot/index.js
diff --git a/webpack/config/client/index.js b/webpack/config/client/index.js
diff --git a/webpack/config/client/webpack.base.config.js b/webpack/config/client/webpack.base.config.js
diff --git a/webpack/config/client/webpack.prod.config.js b/webpack/config/client/webpack.prod.config.js
diff --git a/webpack/config/server/webpack.base.config.js b/webpack/config/server/webpack.base.config.js
diff --git a/yarn.lock b/yarn.lock

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1 @@`
	`1`	`+htmlWebpackPluginOptions='{title:网页标题,webpackName:webpack-cli-util}'`