webpack 中引入 typescript

402 阅读1分钟

npm i typescript -D

npm i ts-loader -D

初始化 tsconfig.json 文件

npx tsc --init

tsconfig.json 文件内容:

image.png

webpack.config.js里面的配置

image.png

注意事项:

一定记得配置: 他可以的import导入ts文件的时候省略扩展名。不然没有扩展名就找不到该文件。

extensions: ['.js', '.css', '.ts', '.tsx']

写一个 .ts 文件测试一下

引入 babel-loader

此时这个 ts 文件是用 ts-loader 编译的,在目前为止,babel-loader 也能够编译 ts 文件了,所以我们可以卸载 ts-loader,# babel7 在 webpack 中的配置 里面已经讲解了具体 babel 的配置,我们只需要在这个基础上配置就好了。

npm i @babel/preset-typescript -D

这是一个 babel 的 preset,里面包含了所有 tscript 的编译插件。

在 webpack.config.js 里面

image.png

在 tsconfig.json 里面配置

image.png

测试文件

image.png

发现不管是 ts 还是 polyfill 都运行正常。

此时应该将 js,ts 合并成都用 babel-loader 解析的配置,进入 webpack.config.js 文件

image.png