详解使用打印稿开发node . js项目(简单的环境配置)

  

最近在学习打印稿的过程中,想到也许可以使用ts来开发node . js项目。在网上搜了一下,其实已经有很多开发者实践了这方面的内容。这里,我记录一下自己搭建开发环境的简单过程。

  

<强>使用打印稿开发的好处:

  
      <李>较严格的类型检查和语法检查。   <李>对ES6/ES2015 ES7(部分)支持比较好。   <李>编译后的js文件很干净,也支持多种代码规范。   <李>其他,请参见文档。   
  

<强>准备

  
      <李>节点。js v6.9.1或者任意的新版本,老版本暂时没有试验。   <李> tsc打印稿编译器,使用npm安装:npm安装- g打印稿,当前是v2.0.10李   <李>编辑器:vscode李   <李>命令行终端:windows的cmd李   
  

特别提示和吐槽:安装tsc可能需要翻墙(如果特别慢的话),所以也可以使用淘宝镜像。

  

<>强建立节点。js项目
  

  

使用npm init在指定的目录中建好项目的目录。

  

在这里我建立了一个自己的项目目录结构:

        testTS   |——构建//编译后的js文件目录   | - - - src//ts文件目录   |——静态//客户端静态文件   | | -脚本   | | | - -main.js   | | - - - - -风格   | | | - -style.css   | | - - - - -资产   |——视图//html文件目录   | | - index . html   |——-package.json   |——-tsconfig.json      

<强>编辑tsconfig。json
  

  

在上面的目录结构中有一个tsconfig。json文件,用来设置ts的编译选项。
  

  

想要获取这份文件,可以在项目根目录下使用tsc -初始化,就会自动建立好一份.tsconfig.json。

  

<强>编写需要的配置项
  

  

默认情况下,tsc会使用默认的编译配置编译目录中的所有.ts文件。通过书写tsconfig.json,我们可以配置tsc的编译行为,达到想要的结果:

        {   " compilerOptions ": {   “模块”:“commonjs”//指定生成哪个模块系统代码   “目标”:“es6 ",//目标代码类型   “noImplicitAny”:假的,//在表达式和声明上有隐含的“任何”类型时报的错。   “sourceMap”:假的,//用于调试   “rootDir”:”。/src ",//仅用来控制输出的目录结构,outDir。   “outDir”:”。/构建”,//重定向输出目录。   “看”:真正的//在监视模式下运行编译器。会监视输出文件,在它们改变时重新编译。   },   “包括”:(   ”。/src/* */*”   ),   “排除”:(   “视图”,   “静态”   ]   }   之前      

<>强配置文件注意点
  

  

" compilerOptions "是编译选项,具体详情,请参见:

  

中文文档
  英文文档
  

  

“模块”是用来指定设置编译后的js代码,使用何种模块规范。由于是开发node . js项目,所以选择commonjs。(有兴趣的话,可以把所有模块所有可能的值都试一遍,查看编译后的js文件的差别,会发现生成的代码还是很不错的,很干净)。

  

“目标”是编译后的js代码遵循何种规范,可以是胡/es5/es6等等,这里为了对比ts 2.0代码和es6代码的不同,使用了“es6”。

  

" rootDir "是一个需要注意的地方,它会告诉编译器,此目录下的文件需要经过编译。那么,如果设置了这个选项,又在外部(比如根目录)放置了.ts文件,会怎么样呢? tsc会提示一条类似这样的错误:

  

代码如下:
  职场“错误TS6059:文件' D://nodeWP/testTS/索引。ts '不是在rootDir“D:/工作/nodeWP testTS/src”。“rootDir”预计将包含所有源文件。“
  
  

  

并且,在构建的目录中,输出的目录结构也会变化:

  

, 详解使用打印稿开发node . js项目(简单的环境配置)

  

这显然不是我们想要的结果。

  

解决方案是使用包括和排除属性。按照文档说明,“包括”和“排除”属性指定一个文件水珠匹配模式列表。表明需要包含的文件目录或文件,以及需要过滤掉的文件或目录(也可以使用“文件”配置项,不过需要一个一个文件录入,“文件”属性明确指定的文件却总是会被包含在内,不管“排除”如何设置),详见官方文档说明。

  

所以,添加”。/src/* */*”到“包括”所指向的数组,就可以指定。/src下的所有文件,是我们真正需要被编译的,其他目录将会被排除。

详解使用打印稿开发node . js项目(简单的环境配置)