0%

TS的webpack配置笔记

刚学 ts,搭建好环境是有必要的,我先看了一下官方文档进行练习。

基础配置

先按教程配置一下 webpack 基础配置,原文档写的很详细,一步一步走就可以了

webpack getting started 教程:**Getting Started**

然后我按着 webpack 的 ts 教程配置

webpack ts 教程:**TypeScript**

其实下面的内容就是官方的流程

安装依赖

1
npm install --save-dev typescript ts-loader

创建 tsconfig.json 文件,内容如下

1
2
3
4
5
6
7
8
9
10
11
{
"compilerOptions": {
"outDir": "./dist/",
"sourceMap": true,
"noImplicitAny": true,
"module": "commonjs",
"target": "es5",
"jsx": "react",
"allowJs": true
}
}

修改 webpack.config.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
const path = require('path');

module.exports = {
entry: './src/index.ts',
module: {
rules: [
{
test: /\.tsx?$/,
use: 'ts-loader',
exclude: /node_modules/,
},
],
},
resolve: {
extensions: ['.tsx', '.ts', '.js'],
},
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist'),
},
};

安装 lodash 的带 ts 的依赖

1
npm install --save-dev @types/lodash

添加 index.ts 文件

1
2
3
4
5
6
7
8
9
10
11
import * as _ from 'lodash';

function component() {
const element = document.createElement('div');

element.innerHTML = _.join(['Hello', 'webpack'], ' ');

return element;
}

document.body.appendChild(component());

对了,官方还说要配置一些东西,我翻译不准确直接贴原文。
To make imports do this by default and keep import _ from ‘lodash’; syntax in TypeScript, set “allowSyntheticDefaultImports” : true and “esModuleInterop” : true in your tsconfig.json file. This is related to TypeScript configuration and mentioned in our guide only for your information.

导入其他资源

要在 TypeScript 里使用非代码资源,我们需要告诉 TypeScript 如何兼容这些导入类型。那么首先,我们需要在项目里创建 custom.d.ts 文件,这个文件用来编写自定义的类型声明。让我们将 .svg 文件进行声明设置:

添加 custom.d.ts 文件

1
2
3
4
declare module '*.svg' {
const content: any;
export default content;
}

这里,我们通过指定任何以 .svg 结尾的导入,并将模块的 content 定义为 any,将 SVG 声明一个新的模块。我们可以通过将类型定义为字符串,来更加显式地将它声明为一个 url。同样的理念适用于其他资源,包括 CSS, SCSS, JSON 等。

测试代码

运行下面命令编译和测试 ts 代码

1
yarn build

遇到的一些问题

我没安装依赖的时候,鼠标移到import * as _ from 'lodash';报下面的错误

Cannot find module ‘lodash’. Did you mean to set the ‘moduleResolution’ option to ‘node’, or to add aliases to the ‘paths’ option?ts(2792)

非常困扰,然后查了一下资料,安装了 @types/lodash 依赖解决了这个问题