webpack指南（五）TypeScript

将webpack与TS进行集成。

1. 安装TypeScript 编译器和 loader

npm install --save-dev typescript ts-loader

2. 在package.json同级目录下新建tsconfig.json

{

  "compilerOptions": {

    "outDir": "./dist/",

    "noImplicitAny": true,
　　"sourceMap": true,   // 启用SourceMap功能

    "module": "es6",

    "target": "es5",

    "jsx": "react",

    "allowJs": true

  }

}

3. 修改webpack.common.js

module.exports = {

+    entry: {

+        app: './src/index.ts'

+    },

    output: {

        filename: '[name].[chunkhash].js',

        path: path.resolve(__dirname, 'dist')

    },

    module:{

        rules:[

+        {

+                test:/\.tsx?$/,

+                use: 'ts-loader',

+                exclude: /node_modules/

            }

        ]

    },

+    resolve:{

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

+    },

}

ts-loader 在这里使用它可以方便地启用额外的webpack功能，例如将额外的web资源导入项目。

4. 三方库的使用

index.ts

// 此处导入必须写成import as, 否则会报错
import * as _ from 'lodash';

function component() {

    var element = document.createElement('div');

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

    return element;

}

document.body.appendChild(component());

当ts文件中使用 npm 安装第三方库时，一定要同时安装这个库的类型声明文件。你可以从 TypeSearch 中找到并安装这些第三方库的类型声明文件。

如：lodash

npm install --save-dev @types/lodash

5. 非代码文件的使用

创建 custom.d.ts 文件，用来编写自定义的类型声明。同样的理念适用于其他资源，包括 CSS, SCSS, JSON 等。

.svg 文件进行声明设置：

declare module "*.svg" {

  const content: any;

  export default content;

}

通过指定任何以 .svg 结尾的导入，将模块的 content 定义为 any，将 SVG 声明一个新的模块。我们可以通过将类型定义为字符串，来更加显式地将它声明为一个 url。

巴特西

webpack指南（五）TypeScript

最新文章

热门文章