webpack开发环境准备工作

package.json

@@ -14,6 +14,7 @@
     "@types/fs-extra": "^5.0.5",
     "@types/gulp": "^4.0.6",
     "@types/hapi": "^18.0.1",
+    "@types/history": "^4.7.2",
     "@types/imagemin": "^6.0.0",
     "@types/koa": "^2.0.48",
     "@types/koa-router": "^7.0.40",
@@ -34,6 +35,7 @@
     "chai": "^4.2.0",
     "chokidar": "^2.1.5",
     "csso": "^3.5.1",
+    "history": "^4.9.0",
     "html-webpack-plugin": "^3.2.0",
     "imagemin": "^6.1.0",
     "imagemin-mozjpeg": "^8.0.0",
@@ -60,6 +62,7 @@
     "webpack": "^4.30.0",
     "webpack-dev-middleware": "^3.6.2",
     "webpack-hot-client": "^4.1.1",
+    "webpack-hot-middleware": "^2.24.4",
     "webpack-koa2-middleware": "^2.1.0",
     "yargs": "^13.2.2"
   },

packages/nger-effects/lib/actions.ts

@@ -12,7 +12,6 @@ import { filter } from 'rxjs/operators';
 export class Actions<V = Action> extends Observable<V> {
   constructor(@Inject(ScannedActionsSubject) source?: Observable<V>) {
     super();
-
     if (source) {
       this.source = source;
     }

packages/nger-module-core/README.md

@@ -0,0 +1,3 @@
+# `nger-module-core`
+
+> 全段页面核心

packages/nger-module-core/__tests__/nger-module-core.test.js

@@ -0,0 +1,7 @@
+'use strict';
+
+const ngerModuleCore = require('..');
+
+describe('nger-module-core', () => {
+    it('needs tests');
+});

packages/nger-module-core/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "nger-module-core",
+  "version": "0.0.1",
+  "description": "> TODO: description",
+  "author": "imeepos <1037483576@qq.com>",
+  "homepage": "https://github.com/meepobrother/nger#readme",
+  "license": "ISC",
+  "main": "lib/nger-module-core.js",
+  "directories": {
+    "lib": "lib",
+    "test": "__tests__"
+  },
+  "files": [
+    "lib"
+  ],
+  "publishConfig": {
+    "registry": "http://registry.npmjs.org/"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/meepobrother/nger.git"
+  },
+  "scripts": {
+    "test": "echo \"Error: run tests from root\" && exit 1"
+  },
+  "bugs": {
+    "url": "https://github.com/meepobrother/nger/issues"
+  }
+}

packages/nger-module-webpack/lib/providers/store/webpack.actions.ts

@@ -0,0 +1,13 @@
+import { Action } from 'nger-store';
+
+export enum WebpackActionTypes {
+    // 打包命令
+    Build = '[Webpack Build] Build',
+    Decrement = '[Counter Component] Decrement',
+    Reset = '[Counter Component] Reset',
+}
+
+// 打包
+export class Build implements Action {
+    readonly type = WebpackActionTypes.Build;
+}

packages/nger-module-webpack/lib/providers/store/webpack.effects.ts

@@ -0,0 +1,25 @@
+import { Injectable } from 'nger-core';
+import { Actions, Effect, ofType } from 'nger-effects';
+import { EMPTY, Observable, of } from 'rxjs';
+import { map, mergeMap, catchError } from 'rxjs/operators';
+import { WebpackActionTypes } from './webpack.actions'
+@Injectable()
+export class WebpackEffects {
+    @Effect()
+    loadMovies$ = this.actions$
+        .pipe(
+            ofType(WebpackActionTypes.Increment),
+            mergeMap(() => {
+                console.log(`Increment`)
+                return of({ type: WebpackActionTypes.Reset });
+            })
+        );
+
+    constructor(
+        private actions$: Actions,
+    ) {
+        this.actions$.subscribe(res => {
+            console.log(`action`, res)
+        });
+    }
+}

packages/nger-module-webpack/lib/providers/store/webpack.reducer.ts

@@ -0,0 +1,20 @@
+import { Action } from 'nger-store';
+import { WebpackActionTypes } from './webpack.actions';
+
+export const initialState = 0;
+
+export function counterReducer(state = initialState, action: Action) {
+    switch (action.type) {
+        case WebpackActionTypes.Increment:
+            return state + 1;
+
+        case WebpackActionTypes.Decrement:
+            return state - 1;
+
+        case WebpackActionTypes.Reset:
+            return 0;
+
+        default:
+            return state;
+    }
+}

packages/nger-module-webpack/lib/providers/webpack.ts

@@ -5,14 +5,15 @@ import { WebpackMergeService } from './merge';
 import chalk from 'chalk';
 import ora from 'ora';
 import { Injector } from 'nger-di';
-
+import { Store } from 'nger-store'
 @Injectable()
 export class WebpackService {
     serveSpinner: ora.Ora = ora(`Starting development server, please wait~`);
 
     constructor(
         @Inject() public injector: Injector,
-        @Inject() public merge: WebpackMergeService
+        @Inject() public merge: WebpackMergeService,
+        private store: Store<{ count: number }>
     ) { }
 
     configs: Configuration[];

packages/nger-platform-axios/lib/index.ts

@@ -12,65 +12,69 @@ export class NgerPlatformAxios extends Platform {
         this.util = new NgerUtil(this.logger)
     }
     async run<T>(ref: NgModuleRef<T>) {
-        const _axios = await this.util.loadPkg<typeof axios>('axios');
         const ngModule = ref.context.getClass(NgModuleMetadataKey) as NgModuleClassAst;
         ngModule.declarations.map(declaration => {
             const instance = ref.createControllerRef(declaration.target)
             const controller = declaration.getClass(ControllerMetadataKey) as ControllerClassAst;
-            const gets = declaration.getProperty(GetMetadataKey) as GetPropertyAst[];
-            const posts = declaration.getProperty(PostMetadataKey) as PostPropertyAst[];
-            gets.map(get => {
-                const def = get.ast.metadataDef;
-                def.path = def.path || `${get.ast.propertyKey as string}`;
-                if (def.path.startsWith('http')) {
-                    instance[get.ast.propertyKey] = (...args: any[]) => {
-                        let params: any = {}
-                        args.map(arg => {
-                            if (typeof arg === 'object') {
-                                params = { ...params, ...arg }
-                            }
-                        });
-                        if (def.path) return _axios.get(def.path, {
-                            params: params
-                        }).then(data => data.data)
-                    }
-                } else {
-                    instance[get.ast.propertyKey] = (...args: any[]) => {
-                        let params: any = {}
-                        args.map(arg => {
-                            if (typeof arg === 'object') {
-                                params = { ...params, ...arg }
-                            }
-                        });
-                        return _axios.get(`${controller.path}/${def.path}`, { params }).then(data => data.data)
-                    }
+            this.handler(declaration, instance, controller)
+        });
+    }
+
+    async handler(declaration: TypeContext, instance: any, controller: any) {
+        const _axios = await this.util.loadPkg<typeof axios>('axios');
+        const gets = declaration.getProperty(GetMetadataKey) as GetPropertyAst[];
+        const posts = declaration.getProperty(PostMetadataKey) as PostPropertyAst[];
+        gets.map(get => {
+            const def = get.ast.metadataDef;
+            def.path = def.path || `${get.ast.propertyKey as string}`;
+            if (def.path.startsWith('http')) {
+                instance[get.ast.propertyKey] = (...args: any[]) => {
+                    let params: any = {}
+                    args.map(arg => {
+                        if (typeof arg === 'object') {
+                            params = { ...params, ...arg }
+                        }
+                    });
+                    if (def.path) return _axios.get(def.path, {
+                        params: params
+                    }).then(data => data.data)
+                }
+            } else {
+                instance[get.ast.propertyKey] = (...args: any[]) => {
+                    let params: any = {}
+                    args.map(arg => {
+                        if (typeof arg === 'object') {
+                            params = { ...params, ...arg }
+                        }
+                    });
+                    return _axios.get(`${controller.path}/${def.path}`, { params }).then(data => data.data)
+                }
+            }
+        });
+        posts.map(post => {
+            const def = post.ast.metadataDef;
+            def.path = def.path || `${post.ast.propertyKey as string}`;
+            if (def.path.startsWith('http')) {
+                instance[post.ast.propertyKey] = (...args: any[]) => {
+                    let body: any = {}
+                    args.map(arg => {
+                        if (typeof arg === 'object') {
+                            body = { ...body, ...arg }
+                        }
+                    });
+                    return _axios.post(`${def.path}`, body).then(data => data.data)
                 }
-            });
-            posts.map(post => {
-                const def = post.ast.metadataDef;
-                def.path = def.path || `${post.ast.propertyKey as string}`;
-                if (def.path.startsWith('http')) {
-                    instance[post.ast.propertyKey] = (...args: any[]) => {
-                        let body: any = {}
-                        args.map(arg => {
-                            if (typeof arg === 'object') {
-                                body = { ...body, ...arg }
-                            }
-                        });
-                        return _axios.post(`${def.path}`, body).then(data => data.data)
-                    }
-                } else {
-                    instance[post.ast.propertyKey] = (...args: any[]) => {
-                        let body: any = {}
-                        args.map(arg => {
-                            if (typeof arg === 'object') {
-                                body = { ...body, ...arg }
-                            }
-                        });
-                        return _axios.post(`${controller.path}/${def.path}`, body).then(data => data.data)
-                    }
+            } else {
+                instance[post.ast.propertyKey] = (...args: any[]) => {
+                    let body: any = {}
+                    args.map(arg => {
+                        if (typeof arg === 'object') {
+                            body = { ...body, ...arg }
+                        }
+                    });
+                    return _axios.post(`${controller.path}/${def.path}`, body).then(data => data.data)
                 }
-            });
+            }
         });
     }
 }

packages/nger-platform-express/lib/express.ts

@@ -1,20 +1,29 @@
 import { ConsoleLogger, LogLevel } from 'nger-logger';
-import { TypeContext } from 'ims-decorator';
 import express from 'express';
+import WebpackDevMiddleware from 'webpack-dev-middleware';
 import { createServer } from 'http';
 import { NgModuleMetadataKey, NgModuleClassAst, ControllerMetadataKey, ControllerClassAst, GetMetadataKey, GetMethodAst, PostMetadataKey, PostMethodAst, Platform, NgModuleRef } from 'nger-core';
 import { NgerUtil } from 'nger-util';
+import { Injector, InjectFlags } from 'nger-di';
+import { WebpackService } from 'nger-module-webpack';
+import { NgerPlatformAxios } from 'nger-platform-axios';
 export class NgerPlatformExpress extends Platform {
     logger: ConsoleLogger;
     util: NgerUtil;
+    injector: Injector;
+    app: any;
+    axios: NgerPlatformAxios = new NgerPlatformAxios();
     constructor() {
         super();
         this.logger = new ConsoleLogger(LogLevel.debug)
         this.util = new NgerUtil(this.logger);
     }
     async run<T>(ref: NgModuleRef<T>) {
+        await this.axios.run(ref);
+        this.injector = ref.injector;
         const exp = await this.util.loadPkg<typeof express>('express')
         const app = exp();
+        this.app = app;
         const server = createServer(app)
         // 获取端口号
         const port = ref.context.get(`port`);
@@ -35,7 +44,6 @@ export class NgerPlatformExpress extends Platform {
                     }
                 });
             });
-
             posts.map(post => {
                 this.logger.debug(`post ${controller.path}/${post.path}`)
                 app.post(`${controller.path}/${post.path}`, async (req, res, next) => {
@@ -47,9 +55,24 @@ export class NgerPlatformExpress extends Platform {
                     }
                 })
             });
+            // 属性
         });
+        this.attachWebpackCompiler();
         server.listen(port, () => {
             this.logger.info(`app start at http://localhost:${port}`)
         });
     }
+
+    async attachWebpackCompiler() {
+        const webpack = this.injector.get(WebpackService, undefined, InjectFlags.Optional) as WebpackService;
+        const config = webpack.config;
+        let publicPath = '/';
+        if (config) {
+            if (config.output && config.output.publicPath) publicPath = config.output.publicPath
+        }
+        const middleWare = WebpackDevMiddleware(webpack.compiler, {
+            publicPath,
+        })
+        this.app.use(middleWare);
+    }
 }