使用ts编写小程序

现在越来越多人使用ts了，那么我们如果要在小程序中使用ts的话，可以借助rollup作为ts的编译器来进行实现

具体实现步骤

1. 在小程序根目录初始化package.json

npm init -y

2. 安装编译所需要的依赖

npm install @rollup/plugin-commonjs @rollup/plugin-node-resolve @rollup/plugin-sucrase miniprogram-api-typings miniprogram-automator rollup rollup-plugin-terser typescript --save

3. 在根路径添加，编写rollup的配置文件和tsconfig.json
   

rollup.config.js
在input选项中添加ts文件的路径即可进行编译
dir选项为编译文件夹的名称，可自行修改

import  sucrase  from  '@rollup/plugin-sucrase';
import  resolve  from  '@rollup/plugin-node-resolve';
import { terser } from  "rollup-plugin-terser";
import  commonjs  from  '@rollup/plugin-commonjs';

const  production = !process.env.ROLLUP_WATCH;

const  plugins = [
  resolve({ extensions: ['.ts', '.js'] }),
  commonjs(),
  sucrase({ transforms: ['typescript'] })
]

if (production) {
  plugins.unshift(terser())
}

export  default [
  {
    input: ['./pages/scene/xxx.ts'],
    treeshake:  production,
    output: {
      format:  'cjs',
      dir:  'miniprogram/',
      chunkFileNames:  'chunks/[name].js',
      entryFileNames:  'pages/[name]/[name].js'
    },
    plugins
  },
]

tsconfig.json

{
  "compilerOptions": {
      "strictNullChecks": true,
      "noImplicitAny": false,
      "module": "CommonJS",
      "target": "ES5",
      "allowJs": false,
      "experimentalDecorators": true,
      "noImplicitThis": true,
      "noImplicitReturns": true,
      "alwaysStrict": true,
      "inlineSourceMap": true,
      "inlineSources": true,
      "noFallthroughCasesInSwitch": true,
      "noUnusedLocals": true,
      "noUnusedParameters": true,
      "strict": true,
      "removeComments": true,
      "pretty": true,
      "strictPropertyInitialization": true,
      "lib": ["es6","ES5"],
      "types": ["miniprogram-api-typings"]
    },
    "include": [
      "./**/*.ts"
    ],
    "exclude": [
      "node_modules"
    ]
  }

4. package.json添加运行命令

"scripts": {
    "dev": "rollup -w -c rollup.config.js",
    "build": "rollup -c rollup.config.js"
 },

总结

至此，我们只需要在rollup.config.js中配置我们所有编译的ts，再运行dev命令即可。
如果觉得不想把rollup和小程序的配置混在一起，也可以把小程序的代码单独放在子文件夹中，并修改dir选项。