typescript 如何引入jquery

webpack配置，不需要配置externals，webpack具体配置如下，

const webpack = require('webpack');

const path = require('path');

const htmlWebpackPlugin = require('html-webpack-plugin');

const { CheckerPlugin } = require('awesome-typescript-loader')

// 设置dev环境或pro环境

const WEBPACK_ENV = process.env.WEBPACK_ENV || 'dev';

// 对babel的配置，内容同.babelrc文件

const babelOptions = {

  "presets": [

    [

      "env",

      {

        "targets": { "browsers": ["last 2 versions", "safari >= 7"] }

      },

    ]

  ]

};

// htmlWebpackPLugin 默认配置

var getHtmlConfig = function (name, title) {

  return {

    template: './src/views/' + name + '.html',

    filename: './views/' + name + '.html',

    // favicon: './favicon.ico',

    title: title,

    inject: true,

    hash: true,

  };

};

// 获取页面地址

var getInitEntryModal = function (name) {

  return [path.join(__dirname, './src/pages/' + name + '.ts')];

}

// ts-loader的配置

const tsLoaderOptions = {

  transpileOnly: true

};

module.exports = {

  entry: {

    'index': getInitEntryModal('index'),

  },

  output: {

    filename: './scripts/[name].js',

    path: path.join(__dirname, './dist'),

  },

  resolve: {

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

  },

  module: {

    rules: [

      {

        test: /\.ts(x?)$/,

        exclude: /node_modules/,

        use: [

          { loader: 'ts-loader', options: tsLoaderOptions },

          // { loader: 'awesome-typescript-loader' }

          // { loader: 'babel-loader', options: babelOptions },

        ],

      }

      // { test: /\.js$/, enforce: "pre", loader: "source-map-loader" },

      // { enforce: 'pre', test: /\.tsx?$/, use: "source-map-loader" },

      // { test: /\.tsx?$/, loader: 'awesome-typescript-loader', exclude: /node_modules/ },

    ],

  },

  //将外部变量或者模块加载进来, 在.ts文件中要引用jquery，下面代码屏蔽

  // externals: {

  //   'jquery': 'window.jQuery',

  // },

  devtool: "source-map",

  plugins: [

    // new webpack.LoaderOptionsPlugin({

    //   options: { resolve: { extensions: [".ts", ".tsx", ".js"] } }

    // }),

    new htmlWebpackPlugin(getHtmlConfig('index', 'index')),

  ],

  devServer: {

    contentBase: path.join(__dirname, './dist'),

    port: 9000,

    // host: '192.168.81.1',

    open: false,

    hot: false,

    inline: true,

    compress: true,

  },

}

jquery 代码测试

import $ = require("jquery");

export class App {

  public addComment(): void {

    let creatAt = new Date();

    $("#main").append("<div><span>new comment pushed at." + creatAt.toTimeString() + "</span>");

  }

}

let app = new App();

$(() => {

  $("#btn-add").click(app.addComment);

});