iced项目转typescript

Jul 27, 2020

iced项目转typescript

背景

Iced 语言在早期相对于js 无疑是进步巨大，告别语法臃肿、callback hell、直观等，早早就用上了await defer 等便捷语法。

但是他的弱点就是，他就是传统脚本，小项目几个文件，不管你依不依赖，我记得住其他文件的需求，那么他很合适。但是到了中级项目、大型项目，上下文不通、脚本间不达意，维护起来非得常年累月的伙伴加班熬夜，只能边写脚本，边吃着小饼干才能维持得了生活这样子。

Typescript 优点很多，编译强类型语言等等一系列光环之下也有一个弱点，就是项目特大之后，编译性能下降(社区里有讨论)。但是特大那种，是不是也应该想办法拆分业务的方案解决了。所以当前来看，直接整Typescript，发展了这么久的开源语言，没有后顾之忧。

目标

当前Iced 的项目，还是正常的运行，直接加上tsconfig.json 文件，将项目直接变成Typescript 项目。

开发能正常运行后，开始下一步的打包开发文件。

打包成本地开发文件后，本地测试能运行，上线测试是否正常。

最终项目结构:

图略

实践

增加TYPESCRIPT 配置文件
直接在项目根目录中创建tsconfig.json

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
{
  "include": [ "**/*" ],
  "exclude": [ "**/*/config.ts", "**/*/config.js" ],
  "compilerOptions": {
    "baseUrl": ".",
    "allowJs": true,
    "target": "ES6",
    "module": "CommonJS",
    "moduleResolution": "node",
    "types": [ "node" ],
    "sourceMap": false,
    "pretty": true,
    "noImplicitAny": false,
    "removeComments": true,
    "outDir": "./dist",
    "paths": {
      "*": [
        "node_modules/*",
        "types/*"
      ],
      "@/*": ["*"]
    }
  }
}

include 表示当前所有文件都包含(可根据您的目录进行修改，比如src/*/)

此时开发直接便可运行Iced 的项目。当前【个人中心】改造一个脚本，很顺利全部改动过来。

修改原有ICED 脚本为TYPESCRIPT

此时外部引用时，需要引用其default 对象，写法为: App = require(“../service/app).default

增加所需第三方库

上面开发已经能正常了，但是混合之后，打包就需要对应修改了。

package.json 增加所需第三方库

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
{
  scripts: {
    "dev": "nodemon --watch '**/*.ts' --ignore '**/*.test.ts' --exec 'ts-node --files -r tsconfig-paths/register' app.js",
    "start": "node app.js"
    "build": "gulp"
  },
  "dependencies": {
    "module-alias": "^2.2.2"
  },
  "devDependencies": {
    "@types/express": "",
    "@types/lodash": "",
    "gulp": "~3.9.1",
    "gulp-if": "~2.0.0",
    "gulp-iced": "0.0.3",
    "gulp-load-plugins": "~1.2.0",
    "gulp-terser": "~1.2.0", // 功能通uglify
    "gulp-typescript": "^6.0.0-alpha.1",
    "nodemon": "^2.0.4",
    "ts-node": "^8.10.2",
    "tsconfig-paths": "^3.9.0",
    "typescript": "^3.9.7"
  }
}

修改GULPFILE

第一步还是要 gulp iced 得到js文件。这时我们所需的Typescript 的项目文件就都在了。

gulpfile.js 增加以下任务

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
gulp.task("tsc", function () {
  const project = $.typescript.createProject("tsconfig.json")
  return gulp.src([
    '!node_modules/**/*',
    '!node_modules/**/*.ts',
    '**/*.js',
    '**/*.ts',
    '!gulpfile.js',
    '!**/config.js',
    '!**/config.ts',
    '!apidoc/**/*',
    '!test/**/*',
    '!dongle/**/*',
    '!license/**/*',
    '!public/**/*',
    '!packages/**/*'
  ])
  .pipe(project())
  .pipe($.if('*.js', $.terser().on('error', console.error)))
  .pipe(gulp.dest("dist"))
})
gulp.task("copy-favicon", function () {
  return gulp.src(["favicon.png"])
    .pipe(gulp.dest("dist"))
})
gulp.task("copy-package", function () {
  return gulp.src(["package*.json"])
    .pipe(gulp.dest("dist"))
})

此时dist 就是我们要的全部项目文件了。

接下来的Docker 打包、上线流程还是和以前一样。

完结

以上就是这次将Iced 的项目，转化为Typescript 项目。而且是平稳过渡，不影响之前功能。