webpack 集成 Typescript && Less

webpack 集成 Typescript && Less

TypeScript是JavaScript的一个类型化的超集，可以编译成纯JavaScript，在本指南中，我们将学习如何将Typescript与webpack集成。

基本设置

为了开始使用webpack和Typescript，首先我们必须在我们的项目中安装webpack。 如果您没有这样做，请查看webpack安装指南。

要开始使用包含Typescript的webpack，您需要几件事情：

• 在您的项目中安装Typescript编译器。
• 安装一个Typescript加载器（在这种情况下，我们使用的是ts-loader）。
• 创建一个tsconfig.json文件以包含我们的TypeScript编译配置。
• 创建webpack.config.js以包含我们的webpack配置。
• 您可以通过运行以下方法从npm安装TypeScript编译器和TypeScript加载器：

npm install --save-dev typescript ts-loader

tsconfig.json
tsconfig文件可以作为一个空配置文件启动，在这里可以看到一个基本配置示例，用于将TypeScript编译为es5，并为JSX提供支持。

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

您可以在TypeScript文档网站上阅读有关tsconfig.json配置选项的更多信息

webpack.config.js

具有TypeScript配置的基本Webpack应该沿用这些代码：

const path = require("path");
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    entry: {
        app: './src/index.ts'
    },
    output: {
        path: path.resolve(__dirname, "./dist"),
        filename: 'bundle/[name].bundle.js'
    },
    mode:"development",
    devtool: 'inline-source-map',
    resolve: {
        extensions: ['.tsx', '.ts', '.js']
    },
    module: {
        rules: [
            {
                test: /\.tsx?$/,
                use: [
                    {
                        loader: "ts-loader"
                    }
                ]
            },
            {
                test: /\.less$/,
                use: [
                    {
                        loader: 'style-loader'
                    },
                    {
                        loader: 'css-loader'
                    },
                    {
                        loader: 'less-loader'
                    }
                ]
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            title: 'Output Management'
        })
    ]
};

这里我们将我们的入口点指定为我们当前目录中的index.ts，一个名为bundle.js的输出文件和我们的TypeScript加载器，负责将我们的TypeScript文件编译为JavaScript。 我们还添加resolve.extensions来指示webpack在解析Typescript模块时使用什么文件扩展名。

Typescript loaders

目前有两种可用于TypeScript的loaders：

• awesome-typescript-loader

• ts-loader

令人敬畏的TypeScript加载程序创建了一个awesome-typescript-loader和ts-loader之间的区别精彩的解释。

您可以在这里阅读更多。 在本指南中，我们将使用ts-loader，因为更容易实现其他Webpack功能，例如将非代码资源导入到项目中。

启用源映射

为了启用源映射，我们首先必须配置TypeScript以将内联源映射输出到我们编译的JavaScript文件中。这通过将sourceMap属性设置为true来完成.

tsconfig.json

{
  "sourceMap": true
}

一旦将TypeScript配置为输出源映射，我们需要告诉webpack提取这些源映射并将其传递给浏览器，这样我们就可以在我们的代码编辑器中看到源文件。

webpack.config.js

module.exports = {
 entry: './index.ts',
 output: {
   filename: 'bundle.js',
   path: __dirname
 },
 module: {
   rules: [
     {
       enforce: 'pre',
       test: /\.js$/,
       loader: "source-map-loader"
     },
     {
       enforce: 'pre',
       test: /\.tsx?$/,
       use: "source-map-loader"
     }
   ]
 },
 resolve: {
   extensions: [".tsx", ".ts", ".js"]
 },
 devtool: 'inline-source-map',
};

首先我们添加一个名为source-map-loader的新加载器。

要安装它运行：

npm install --save-dev source-map-loader

一旦加载程序安装，我们需要告诉webpack我们要在任何其他加载程序之前使用enforce：'pre'配置标志来运行这个加载程序。 最后，我们需要通过指定devtool属性来启用webpack中的源映射。 目前我们使用'inline-source-map'设置来阅读有关此设置的更多信息，并查看其他选项，以查看devtool文档。

使用第三方库

从npm安装第三方库时，请务必记住安装该库的typing定义。

您可以从@types存储库,安装第三方库定义。

例如，如果我们要安装lodash，我们可以运行以下命令来获取它的输入：

npm install --save-dev @types/lodash

有关更多信息，请参阅此博文

导入非代码部分资源

要使用TypeScript的非代码资源，我们需要告诉TypeScript如何推迟这些导入的类型。

为此，我们需要创建一个custom.d.ts文件。 此文件表示我们项目中TypeScript的自定义定义。

在我们的custom.d.ts文件中，我们需要为svg导入提供一个定义，为此，我们需要将以下内容放在此文件中：

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

在这里，我们通过指定任何以.svg结尾的导入，为svg声明一个新模块，并将该模块的类型定义为any。 如果我们想要更明确地说这是一个url，我们可以将类型定义为字符串。

这不仅适用于svg，而且还适用于您可能希望使用的任何自定义加载器，包括css，scss，json或您可能希望在项目中加载的任何其他文件。