webpack4学习笔记-typescript打包

webpack中文网：https://doc.webpack-china.org/
https://www.webpackjs.com

一、typescript简单介绍

js的超集
官网： http://www.typescriptlang.org/
/https://www.tslang.cn/index.html

二、typescript打包

使用typescript-loader

npm i typescript ts-loader -D   --官方的
npm i typescript awesome-typescript-loader -D   --个人开发的，速度更快，使用缓存

需要配置tsconfig，配置选项在官网https://www.tslang.cn/docs/handbook/compiler-options.html
或http://www.typescriptlang.org//docs/handbook/compiler-options.html
常用选项有：compilerOptions、include、exclude;

// tsconfig.json
{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es5", // 最终要转换成es5
    "allowJs": true // 允许使用js编码
  },
  "include": [
    "./src/*" // 要用ts-loader解析的文件路径
  ],
  "exclude": [
    "./node_modules" // 不用ts-loader解析的文件路径
  ]
}

webpack配置文件：

// webpack.config.js
module.exports = {
  mode: 'development',
  entry: {
    'app': './src/app.ts'
  },
  output: {
    filename: '[name].bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: 'ts-loader'
      }
    ]
  }
}

如果要使用第三方库，比如lodash，可以：

npm install lodash --save

然后在文件中引入：

import * as _ from 'lodash';
console.log(_.chunk([1, 2, 3, 4, 5], 2))

对于传参错误或方法使用错误，有时候打包会报错，有时候不会报错。
方便提醒的话，可以安装声明文件或typings。

• 1.安装声明文件：

npm install @types/lodash 或 npm install @types/vue

这样错误使用就会有提示；

image.png

• 2.使用typings:

npm install typings -g
typings install lodash
typings install vue

用typings安装完lodash，文件夹下会多出来一个typings文件夹。这时候打包仍然不会提示错误使用；

image.png

需要在tsconfig.json文件里增加配置：

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es5",
    "allowJs": true,
    "typeRoots": [ // 增加这个选项
      "./node_modules/@types",
      "./typings/modules"
    ]
  },
  "include": [
    "./src/*"
  ],
  "exclude": [
    "./node_modules"
  ]
}

然后再打包，就有错误提示了：

image.png