typescript 如何引入jquery

Posted 2020-11-10 liangcheng11

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);
});