Ts-01

工具

code runner + tsnode

构建工具

webpack, rollup [用这个搭建一个]

解析Ts的方式有2种 Babel系 和 非Babel系

需要一个rollup的插件

• rollup-plugin-typescript2

webpack

• ts-loader
• babel babel-plugin-typescript

工程目录

• src
  • index.ts
• rollup.config.js

npm i rollup-plugin-typescript2 rollup typescript @rollup/plugin-node-resolve[node的方式导入包 import require都行] rollup-plugin-serve[服务相关的] -D

修改

rollup.config.js

import {nodeResolve} from "@rollup/plugin-node-resolve"
import ts from "rollup-plugin-typescript2";
import serve from "rollup-plugin-serve";
import path from "path";

export default {
    input: 'src/index.ts',
    output: {
        file: path.resolve(__dirname, 'dist/bund.js'),
        format: 'iife', // 立即执行 global 搞个全局变量 cjs module.export esm import export
        sourcemap: true, // tsconfig.js 这里也需要设置为true
    },
    plugins:[
        // 注意必须按照顺序这个要在ts上面
        nodeResolve({
            extensions: ['.js', '.ts']
        }), // 默认不支持.ts的
        ts({
            tsconfig: path.resolve(__dirname, './tsconfig.json')
        }), // 默认用tsconfig
        serve({
            port: '1235',
            contentBase: '/', // 启动的这个服务以根目录为基准
            openPage: '/public/index.html' // 找到根目录下的public目录
        })
    ]
}
// 配置运行入口
package.json
"script": "rollup -cw"