使用 Webpack 配置 TypeScript 项目

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

基础配置

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

webpack getting started 教程：Getting Started

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

webpack ts 教程：TypeScript

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

安装依赖

npm install --save-dev typescript ts-loader

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

{
  "compilerOptions": {
    "outDir": "./dist/",
    "sourceMap": true,
    "noImplicitAny": true,
    "module": "commonjs",
    "target": "es5",
    "jsx": "react",
    "allowJs": true
  }
}

修改 webpack.config.js

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 的依赖

npm install --save-dev @types/lodash

添加 index.ts 文件

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 文件

declare module '*.svg' {
  const content: any;
  export default content;
}

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

测试代码

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

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 依赖解决了这个问题