TypeScript + jquery (使用Type Definition)环境搭建+vs2013

1. node.js安装

2.c盘建立test，作为工作路径

3.命令行执行c:\ cd test

4.命令行执行npm init 产生package.json

5.安装typescript 及ts-laoder

c:\test>npm install --save-dev typescript ts-loader

6.安装jquery

c:\test>npm install --save jquery

7.安装typings

c:\test>npm install --save-dev typings

安装后package.json如下：

{
  "name": "types",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "description": "",
  "devDependencies": {
    "ts-loader": "^6.0.4",
    "typescript": "^3.5.3",
    "typings": "^2.1.1"
  },
  "dependencies": {
    "jquery": "^3.4.1"
  }
}
 

8.使用typings生成定义jquery的ds文件

c:\test>node_modules\.bin\typings install dt~jquery --global --save

执行完成后，可以在typings\globals\jquery路径下生成index.d.ts

9.安装打包工具webpack

c:\test>npm install --save-dev webpack

10.在test路径下建立ts-src用于存放ts文件

11.建立文件Message.ts

import * as $ from 'jquery'

export default class Message {
    show() {
        $("#ShowBtn").html('Demo');
        alert("hellow world");
    }
}

app.ts

"use strict";
var Message_1 = require('./Message');
var $ = require('jquery');
$(function () {
    $("#ShowBtn").on("click", function () {
        var o = new Message_1.default();
        o.show();
    });
});

12.建立文件tsconfig.json

{
    "compilerOptions": {
        "sourceMap": true
    },
    "files": [
        "typings/index.d.ts",
        "ts-src/app.ts"
    ]
}
13.建立文件webpack.config.js

var path = require('path');
var webpack = require('webpack');

module.exports = {
    devtool: 'source-map',
    entry: ['./ts-src/app.ts'],
    output: {
        path: 'c:\\test\\build',
        filename: 'app.js'
    },
    module: {
        rules: [{
            test: /\.ts$/,
            include: path.resolve(__dirname, "ts-src"),
            loader: 'ts-loader'
        }]
    },
    resolve: {
        extensions: ["*",".webpack.js",".web.js",".ts",".js"]
    }
}

11.在test路径下面建立build文件夹，用于存放编译后生成文件

12编译

c:\test>node_modules\.bin\webpack

13.和vs2013整合

a)安装typeings -jquery

c:\test>npm install --save-dev @types/jquery

b)

修改tsconfig.json,去掉   "typings/index.d.ts",修改后如下：

{
    "compilerOptions": {
        "sourceMap": true
    },
    "files": [
        "ts-src/app.ts"
    ]
}

在vs2013中选择tools->external tools

title:webpack

command:c:\test\node_modules\.bin\webpack.cmd

initial directory:c:\test

勾选use output window

13. 代码用例

/// <reference path="../typescript/typings/index.d.ts" />
import * as $ from 'jquery'

export default class Message {
    show() {
        $("#ShowBtn").html('Demo');
        alert("hellow world");
    }
    
}

14.与bootstrap整合

a)安装bootstrap css

npm i bootstrap url url-loader style-loader css-loader --save

b)修改webpack.json.js,使其能汇入css,同时加入jquery

var path = require('path');

var webpack = require('webpack');

 

module.exports = {

devtool: 'source-map',

entry: ['./ts-src/app.ts'],

output: {

path: 'c:\\project\\new_xuxiang2005_zhengqin_tw\\build',

filename: 'app.js'

},

module: {

rules: [{

test: /\.ts$/,

include: path.resolve(__dirname, "ts-src"),

loader: 'ts-loader'

},

{

test: /\.css$/,

use: [

'style-loader',

'css-loader'

]

}

 

]

},

resolve: {

extensions: ["*",".webpack.js",".web.js",".ts",".js"]

},

plugins: [

new webpack.ProvidePlugin({

$: "jquery",

jQuery: "jquery"

})

]

}

c)安装bootstrap

c:\test>npm install bootstrap

d)安装proper.js

npm install popper.js --save

e)修改message.ts

import * as $ from 'jquery'

import 'bootstrap/dist/css/bootstrap.css'

import 'bootstrap/dist/js/bootstrap.js'

export default class Message {

    show() {

        $("#ShowBtn").html('Demo');

        alert("hellow world");

    }

}

e)运行webpack

附件为配置完成后的打包文件。装完node.js后，直接解压缩，直接可以运行webpack既可。有资源已上传。但是csdn的博客非常不好用。有好的麻烦大家介绍一下。