Webpck & Typescript 工作流程

2020-08-04 本文已影响0人前端的爬行之旅

全局安装typescript

$ npm install -g typescript

生成tsconfig.json文件

$ tsc

根目录下会生成 tsconfig.json文件
修改tsconfig.json文件

"target": "es6",  
"module": "es2015",

初始化项目

$ npm init

根目录下会生成package.json文件

安装依赖包

$ npm install ts-loader webpack webpack-cli  typescript -D

根目录下会生成node_modules文件夹

配置项目编译ts文件

// src/index.ts
console.log()

根目录新建 public/index.html

// `public/index.html`
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Webpack & Typescript</title>
</head>
<body>
  <h1> Webpack & Typescript </h1>
</body>
</html>

根目录新建 webpack.config.js文件

const path = require('path');
module.exports = {
  entry: './src/index.ts', // webpack编译的入口文件
  module: {
    rules: [
      {
        test: /\.ts$/,
        use: 'ts-loader',
        include: [path.resolve(__dirname, 'src')]
      }
    ]
  },
  output: {
    filename: 'bundle.js', // 编译之后输出的文件名
    path: path.resolve(__dirname, 'public'), //输出文件的绝对路径
  }
}

修改 package.json

// 添加脚本
"build": "webpack",

执行命令

$ npm run build

会按照webpack配置在public下生成bundle.js文件

安装webpack-dev-server

$ npm install webpack-dev-server -D

修改 package.json

// 添加脚本
"serve": "webpack-dev-server",

修改 webpack.config.js

resolve: {
    extensions: ['.ts', '.js'],
  },
output: {
    publicPath: 'public',

修改public/index.html

<h1>Signup for the latest tutorials</h1>
  <form>
    <label for="name">Your name</label>
    <input type="text" id="name" required>
    <label for="email">Your email</label>
    <input type="email" id="email" required>
    <label for="age">Your age</label>
    <input type="number" id="age" required>
    <button>submit</button>
  </form>

  <!-- add scripts here -->
  <script src="bundle.js"></script>

修改src/index.ts

import { formData } from './forms';

const form = document.querySelector('form')!;

form.addEventListener('submit', (e) => {
 e.preventDefault();
 const data = formData(form);
 console.log(data);
});

新建src/forms.ts

export const formData = (form: HTMLFormElement) => {
  const inputs = form.querySelectorAll('input');
  let values: {[prop: string]: string} = {};

  inputs.forEach(input => {
    values[input.id] = input.value;
  });
  return values;
};

执行命令

$ npm run serve

之后在开发环境修改相关的ts文件，会达到实时编译的效果。

配置sourceMap

通过浏览器直接访问index.html会发现控制台显示的console.log打出的内容的资源地址是打包后的bundle.js

image.png

那么如何知道该代码的源地址呢？

修改 tsconfig.js文件

"sourceMap": true,

修改webpack.config.js文件

 devtool: 'eval-source-map',

重新执行打包命令并通过浏览器访问index.html