小程序项目优化

引入typescript

“动态类型一时爽，代码重构火葬场“ [笑哭]。这句话的影响力真的太强了，TypeScript完美避免了赶去火葬场的时间。 TS作为JS的超集，具备灵活的类型系统，不仅可以在coding期间自检，还能增强代码的可读性，并提供了 any 类型进行缓冲。

1. 添加tsconfig.json文件

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "strict": true, 
    "jsx": "preserve",
    "importHelpers": true,
    "moduleResolution": "node",
    "experimentalDecorators": true,
    "esModuleInterop": true,
    "allowJs": true,
    "allowSyntheticDefaultImports": true,
    "isolatedModules": false,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "pretty": true,
    "sourceMap": true,
    "outDir": "./dist",
    "baseUrl": ".",
    "typeRoots": [
      "./typings"
    ],
    "paths": {
      "@/*": [
        "src/*"
      ]
    },
    "lib": [
      "esnext",
      "dom",
      "dom.iterable",
      "scripthost"
    ],
  },
  "include": [
    "./**/*.ts"
  ],
  "exclude": [
    "node_modules",
    "dist",
    "typings",
    "miniprogram_dist",
    "config"
  ]
}

2. 添加typings文件夹
   typings的github地址
   后期增加自动更新，目前是手动维护

3. 利用gulp监听ts后缀名的文件，打包成js文件

// 引入ts相关文件
const ts = require('gulp-typescript');
const tsProject = () => ts.createProject('tsconfig.json')();

// 解析ts文件
'compile:ts': (done) => {
    return gulp
      .src(['**/*[!.d].ts'], { cwd: Paths.src })
      .pipe(
        alias({
          paths: {
            '@': path.resolve(__dirname, '../src'),
          },
        })
      )
      .pipe(tsProject())
      .js.pipe(gulp.dest(Paths.dest), done);
  }

选择gulp，主要是因为这个项目本身就用gulp进行打包。

Tips:

1. 如果是新建项目，可以下载最新的微信开发者工具，在创建小程序时，选择typescript相关。
2. 小程序仅支持运行 JS 文件，因此所有的 TS 文件都默认不会被打包上传。
3. ts在vscode的接口转换插件： Paste JSON as Code

增加路径别名

// 引入别名插件
const alias = require('gulp-path-alias');
// 监听处理
'copy:js': (done) => {
    return gulp
      .src(['**/*.{js,wxs}'], { cwd: Paths.src })
      .pipe(
        alias({
          paths: {
            '@': path.resolve(__dirname, '../src'),
          },
        })
      )
      .pipe(
        replace(/{{{\s*(\S*)\s*}}}/g, (match, letter) => env[letter] || match)
      )
      .pipe(gulp.dest(Paths.dest), done);
  }