• wordpress CMS主题:ssmay主题wordpress CMS主题:ssmay主题
  • 首页 > angular开发 > angular6.0使用教程:使用nodejs搭建一个web服务器

    angular6.0使用教程:使用nodejs搭建一个web服务器

    作者: 分类:angular开发 点击: 1,185 次
    wordpress CMS主题:ssmay主题

      通过angular6.0开发项目后,我们最终是要把它布署到web服务器上,在浏览器端使用它,angular6.0打包成APP不在本教程之列。因为angular6.0是基于node.js环境的,所以,我们这里通过node.js来搭建一个web服务器,然后,再把开发好的angular6.0项目放到这个web服务器上去运行。

      第一步:安装node.js

      如果服务器系统是windows,直接上node.js官网下载,直接双击安装。跟安装普通软件一样。这里不多说。如果是linux系统,安装方法有所区别,这个在后期再做解说。本教程以在本地电脑windows系统为例。

      第二步:在e盘创建一个nodejs目录,并进入nodejs目录:

      要以在命令行工具中进入e盘,再执行下面的命令:

      mkdir  nodejs  //创建目录

      cd  nodejs  //进入目录

      当然,我们也可以在电脑的e盘中直接去创建。

      第三步:初始化nodejs目录:

      npm  init  -y

      这个命令会在nodejs目录下创建一个package.json文件,代码如下图:

      angular6.0使用教程:使用nodejs搭建一个web服务器

      第四步:引入nodejs的类型定义文件:

      angular是通过typescript,所以要先引入typescript

      npm  i  @types/node  --save

      这个命令会在nodejs目录下创建node_modules目录,如下图:

      angular6.0使用教程:使用nodejs搭建一个web服务器

      第五步:创建一个配置文件用来编译typescript

      因为node.js不认typescript语言,所以要先把typescript编译成javascript,所以,要创建一个编译配置文件 tsconfig.json ,代码如下:

      {
      "compilerOptions": {                            //编译器的配置
      "target":"es5",                                 //把目标编译成es5规范的文件,即: javascript
      "module":"commonjs",                          //规范是commonjs规范
      "emitDecoratorMetadata":true,          //跟头饰器相关:编译时保留装饰器的源数据
      "experimentalDecorators":true,   //跟头饰器相关:编译时保留装饰器的源数据
      "outDir":"build",                               //编译后的JS文件放在build目录里
      "lib":["es6"]                                      //声明开发时,用到的是es6的语法
      },
      "exclude":[                                           //编译的时候,排除掉node_modules目录,
      "node_modules"
      ]
      }

      第六步:webstorm启动自动编译typescript

      方法1菜单file => setting => language & framewords

      angular6.0使用教程:使用nodejs搭建一个web服务器

      但是,我在webstorm 2018.1版本上没有找到这个 enable typescript compiler 选项

      方法2:通过File Watcher来自动编译TypeScript

      菜单file => setting => tool  => File Watcher,进入File Watcher后,如果没有typescript选项,点击右侧的 +,再选<sustom>

      angular6.0使用教程:使用nodejs搭建一个web服务器

      再填写飘红的地方: angular6.0使用教程:使用nodejs搭建一个web服务器

      Program:   C:\Users\Administrator\AppData\Roaming\npm\tsc.cmd
      Arguments:   --sourcemap --target "ES5"
      Output paths to refresh:   $FileNameWithoutExtension$.js:$FileNameWithoutExtension$.js.map
      Working directory:   $FileDir$

      配置好后,我们写服务器代码时,就会自动编译typescript为javascript,保存在build目录下。

      第七步:编辑服务器文件:

      在nodejs目录下新建一个server目录,再在server目录下新建一个hello_server.ts文件,代码如下:

      import * as http from 'http';
      const server = http.createServer( (request,response) => {
      response.end("hello node!");  //返回到前面页面
      });
      server.listen(8000); //设置端口

      编写好这个文件后,会自动编译成JS代码文件,保存在build目录下。

      第八步:启动服务器:

      node build/hello_server.ts

      在浏览器地址输入:http://localhost:8000 就可以打开服务器页面,页面会显示 hello node!

       



      QQ二维码

    文章作者:高时银博客
    本文地址:http://wanlimm.com/77201807055837.html
    版权所有 © 转载时必须以链接形式注明作者和原始出处!

    上一篇:
    下一篇:
    wordpress CMS主题:ssmay主题

    或许你会感兴趣的文章:

    5条回应:“angular6.0使用教程:使用nodejs搭建一个web服务器”

    1. mylayout说道:

      学习了!学习了!学习了!

    2. eric说道:

      进来看看,

    3. steam说道:

      通过node.js来搭建一个web服务器,强大呀

    发表评论

    电子邮件地址不会被公开。 必填项已用*标注

    This site uses Akismet to reduce spam. Learn how your comment data is processed.