1.全局编译TS文件

全局安装typescript对TS进行编译

npm install typescript -g
tsc --init # 生成tsconfig.json

tsc # 可以将ts文件编译成js文件
tsc --watch # 监控ts文件变化生成js文件

2.配置webpack环境

• 安装依赖

  npm install rollup typescript rollup-plugin-typescript2 @rollup/plugin-node-resolve rollup-plugin-serve -D
  
  

• 初始化TS配置文件

  npx tsc --init
  
  

• webpack配置操作

  // rollup.config.js
  import ts from 'rollup-plugin-typescript2'
  import {nodeResolve} from '@rollup/plugin-node-resolve';
  import serve from 'rollup-plugin-serve';
  import path from 'path'
  export default {
      input:'src/index.ts',
      output:{
          format:'iife',
          file:path.resolve('dist/bundle.js'), 
          sourcemap:true
      },
      plugins:[
          nodeResolve({
              extensions:['.js','.ts']
          }),
          ts({
              tsconfig:path.resolve(__dirname,'tsconfig.json')
          }),
          serve({
              open:true,
              openPage:'/public/index.html',
              port:3000,
              contentBase:''
          })
      ]
  }
  
  

• package.json配置

  "scripts": {
        "dev": "rollup -c -w"
  }
  
  

出错点！！！

1.commonjs出错
tsconfig.json里面别忘记把commonjs替换成ES2015或者ESNEXT
2.打开页面什么都没有，记得要引入public下面的js里要引入<script src="/dist/bundle.js"></script>

image.png

我们可以通过npm run start启动服务来使用typescript啦~