引入typescript

在上一篇中，成功的用webpack搭建出了一个基础项目
接下来把typescript 引入到项目中

首先创建一个tsconfig.json

{
    "compilerOptions": {
      "module": "commonjs",
      "target": "es6",
      "sourceMap": true,
      "importHelpers": true,
      "allowJs": true,
      "allowSyntheticDefaultImports": true
    },
  "exclude": [
    "node_modules",
    "dist"
    ]
  }

安装typescript

npm install typescript awesome-typescript-loader --save-dev

image.png

修改webpack.config.js

配置typesciprt对应的loader模块

修改文件

将app.js改成app.ts
将webpack.config.js中的entry字段，文件名从app.js修改成app.ts

重新启动项目
如果命令行不报错就是成功啦

image.png

引入jquery

执行命令
npm install jquery --save
npm install @types/jquery --save-dev

改写app.ts

import * as $ from 'jquery'
class App {
    constructor(){
        this.init();
    }
    init(){
        // let div = document.createElement('div');
        // div.innerHTML = '我是大旋风';
        // document.body.appendChild(div);
        $('body').append('<div>我是大旋风</div>')
    }
}

new App();

页面输出正确