形形色色Node工程

Posted 2020-08-23 tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了形形色色Node工程相关的知识，希望对你有一定的参考价值。

最近项目要用的

一些无关紧要的文件夹, demo是一些示例, dist是webpack打包后发布的代码,server是用node启动服务,typings和tsconfig是一些ts配置.

npm install 安装node_modules依赖.

npm start 从package.json指定的webpack.config开始运行.

    "start": "concurrently \\"webpack --watch --colors\\" \\"nodemon server/main.js\\""

var webpack = require(\'webpack\');
var htmlWebpackPlugin = require(\'html-webpack-plugin\');

module.exports = {
  entry: {
        main:[\'./app/main.ts\'],
        vendor:[
            
        ]
  },
  externals:{
      "jquery":"jQuery"
  },
  output: {
    path: \'./dist\',
    filename: \'js/app.bundle.js\',
    publicPath:\'/\'
  },
  module: {
    loaders: [
      {test: /\\.ts$/, loader: \'ts\'},
      {test: /\\.html$/, loader: \'raw\'},
      {test: /\\.css$/, loader: \'raw\'}
    ]
  },
  resolve: {
    extensions: [\'\', \'.js\', \'.ts\', \'.html\', \'.css\']
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: \'./app/index.html\'
    }),
    new webpack.optimize.CommonsChunkPlugin({
        name: "vendor",
        //filename : \'vendor_[chunkhash].js\',
        filename : \'js/vendor.js\',
        minChunks: Infinity
    }),
    /*new webpack.optimize.UglifyJsPlugin({
        compress: {
            warnings: false
        }
    }),*/
    new webpack.DefinePlugin({
      app: {
        environment: JSON.stringify(process.env.APP_ENVIRONMENT || \'development\')
      }
    })
  ]

};

webpack.config

webpack设入口为main.ts

import {platformBrowserDynamic} from \'@angular/platform-browser-dynamic\';
import {AppModule} from \'./app.module\';

platformBrowserDynamic().bootstrapModule(AppModule);

main.ts导入./app.module.ts(import和require的时候后缀名可以省略)使用bootstrapModule方法启动AppModule

在模块app.module.ts中导入angular基础模块以及自定义组件和路由组件.

import \'./polyfills\';

import {BrowserModule} from "@angular/platform-browser";
import {NgModule} from "@angular/core";
import {HttpModule} from \'@angular/http\';

// 表单 双向数据绑定
import {AppComponent} from "./app.component";
import { HomeComponent, TestComponent } from \'./component\';
//路由
import APP_ROUTER_PROVIDERS from "./app.routes";

import {enableProdMode} from \'@angular/core\';
import { LoggerService, GLobalService, UIHelperService } from \'./service\';
enableProdMode();

@NgModule({
    imports: [
        BrowserModule,
        HttpModule,
        APP_ROUTER_PROVIDERS
    ],
    declarations: [
        AppComponent,
        HomeComponent,
        TestComponent
    ],
    providers: [
        LoggerService,
        GLobalService,
        UIHelperService
    ],
    bootstrap: [AppComponent]
})

export class AppModule {
}

app.module.ts

自定义组件如果是以页面为划分,比如HomeComponent, TestComponent, 可以在内部再细分功能组件.

例如上面的

import { HomeComponent, TestComponent } from \'./component\';

AppModule中导入页面组件后,在app.routes.ts中作好路由,就可以在html模板中实现页面跳转.

import {RouterModule, Routes } from \'@angular/router\';

import { HomeComponent, TestComponent } from \'./component\';

const routes = [
  {path: \'\', component: HomeComponent},
  {path: \'test\', component: TestComponent}
];

export default RouterModule.forRoot(routes);

component.ts中

export * from \'./app.component\'

export * from \'./components/home/home.component\'
export * from \'./components/test/test.component\'

统一export组件, Module中统一import或require, 这是这个工程组织的结构.

AppModule最后也是export一个对象供使用.

上面提到的home组件除了home.component.ts还有一个模板文件homecomponent.html.ts

import {Component,OnInit} from "@angular/core";
import { URLSearchParams } from \'@angular/http\';
import { GLobalService, UIHelperService } from \'../../service\';

import { htmlTemplate } from \'./home.component.html\';

@Component({
  selector: \'home\',
  template: htmlTemplate
})
export class HomeComponent implements OnInit{
    errorMessage:string;
    homeData:any;
    
    constructor(private _globalService: GLobalService,private _uIHelperService:UIHelperService) {}
    
    ngOnInit() {
        let requestParams = new URLSearchParams();
        requestParams.set(\'id\', \'11111\');
        this._globalService.ajaxCallerGet(this._globalService.getServiceURL(\'home\'), requestParams).subscribe(
            (data) => {        
                this.homeData=data;    
                //this._uIHelperService.getTest("test");
                console.log(data,this.homeData);    
            },
            error => this.errorMessage = <any>error
        );
    }
}

hoem.component.ts

其中导入了封装有ajax方法的的service组件, 指定模板文件位置 import { htmlTemplate } from \'./home.component.html\';

export const htmlTemplate = `
    <div class="row">{{homeData?.name}}</div>
    <a [routerLink]="[\'/test\']">切换到测试页面</a>
`;

中间的a标签插入了路由标志\'test\', div中的{{插值变量}}语法根据不同的依赖包会有所不同,此处有一个问号?

路由去到test

import {Component} from "@angular/core";
import { htmlTemplate } from \'./test.component.html\';
@Component({
  selector: \'test\',
  styles: [\'\'],
  template: htmlTemplate
})
export class TestComponent{
    constructor() {
        //this.name = \'World\';
    }
}

读取模板

export const htmlTemplate = `
    <div class="row">
           我是test
    </div>
`;

前台的逻辑基本就是这样,更多有关node的知识以及隐蔽工程有待完善.

以上是关于形形色色Node工程的主要内容，如果未能解决你的问题，请参考以下文章

Node.js JavaScript 片段中的跳过代码

高效程序猿的狂暴之路

大道至简---软件工程实践者的思想--------------第二章读后感---是懒人造就了方法

vscode代码片段建议bug

澄清 node.js + promises 片段

EasyClick 运行代码片段出Null