無法調用jQuery

Question

可能這是一個總的初學者問題。

我無法從aurelia模型中調用jQuery。我正在使用JavaScript Services SPA模板。任何對jQuery的調用都會失敗。我嘗試了不同的方法來解決這個問題，但無法使其工作。

以下是相關文件：

webpack.config.js

var isDevBuild = process.argv.indexOf('--env.prod') < 0; 
var path = require('path'); 
var webpack = require('webpack'); 
var AureliaWebpackPlugin = require('aurelia-webpack-plugin'); 

var bundleOutputDir = './wwwroot/dist'; 
module.exports = { 
    resolve: { extensions: [ '.js', '.ts' ] }, 
    entry: { 'app': 'aurelia-bootstrapper-webpack' }, // Note: The aurelia-webpack-plugin will add your app's modules to this bundle automatically 
    output: { 
     path: path.resolve(bundleOutputDir), 
     publicPath: '/dist', 
     filename: '[name].js' 
    }, 
    module: { 
     loaders: [ 
      { test: /\.ts$/, include: /ClientApp/, loader: 'ts-loader', query: { silent: true } }, 
      { test: /\.html$/, loader: 'html-loader' }, 
      { test: /\.css$/, loaders: [ 'style-loader', 'css-loader' ] }, 
      { test: /\.(png|woff|woff2|eot|ttf|svg)$/, loader: 'url-loader?limit=100000' }, 
      { test: /\.json$/, loader: 'json-loader' } 
     ] 
    }, 
    plugins: [ 
     new webpack.DefinePlugin({ IS_DEV_BUILD: JSON.stringify(isDevBuild) }), 
     new webpack.DllReferencePlugin({ 
      context: __dirname, 
      manifest: require('./wwwroot/dist/vendor-manifest.json') 
     }), 
     new AureliaWebpackPlugin({ 
      root: path.resolve('./'), 
      src: path.resolve('./ClientApp'), 
      baseUrl: '/' 
     }) 
    ].concat(isDevBuild ? [ 
     // Plugins that apply in development builds only 
     new webpack.SourceMapDevToolPlugin({ 
      filename: '[file].map', // Remove this line if you prefer inline source maps 
      moduleFilenameTemplate: path.relative(bundleOutputDir, '[resourcePath]') // Point sourcemap entries to the original file locations on disk 
     }) 
    ] : [ 
     // Plugins that apply in production builds only 
     new webpack.optimize.UglifyJsPlugin() 
    ]) 
}; 

webpack.config.vendor.js

var isDevBuild = process.argv.indexOf('--env.prod') < 0; 
var path = require('path'); 
var webpack = require('webpack'); 
var ExtractTextPlugin = require('extract-text-webpack-plugin'); 
var extractCSS = new ExtractTextPlugin('vendor.css'); 

module.exports = { 
    resolve: { 
     extensions: [ '.js' ] 
    }, 
    module: { 
     loaders: [ 
      { test: /\.(png|woff|woff2|eot|ttf|svg)(\?|$)/, loader: 'url-loader?limit=100000' }, 
      { test: /\.css(\?|$)/, loader: extractCSS.extract(['css-loader']) } 
     ] 
    }, 
    entry: { 
     vendor: [ 
      'aurelia-event-aggregator', 
      'aurelia-fetch-client', 
      'aurelia-framework', 
      'aurelia-history-browser', 
      'aurelia-logging-console', 
      'aurelia-pal-browser', 
      'aurelia-polyfills', 
      'aurelia-route-recognizer', 
      'aurelia-router', 
      'aurelia-templating-binding', 
      'aurelia-templating-resources', 
      'aurelia-templating-router', 
      'bootstrap', 
      'bootstrap/dist/css/bootstrap.css', 
      'jquery' 
     ], 
    }, 
    output: { 
     path: path.join(__dirname, 'wwwroot', 'dist'), 
     publicPath: '/dist/', 
     filename: '[name].js', 
     library: '[name]_[hash]', 
    }, 
    plugins: [ 
     extractCSS, 
     new webpack.ProvidePlugin({ $: 'jquery', jQuery: 'jquery' }), // Maps these identifiers to the jQuery package (because Bootstrap expects it to be a global variable) 
     new webpack.DllPlugin({ 
      path: path.join(__dirname, 'wwwroot', 'dist', '[name]-manifest.json'), 
      name: '[name]_[hash]' 
     }) 
    ].concat(isDevBuild ? [] : [ 
     new webpack.optimize.UglifyJsPlugin({ compress: { warnings: false } }) 
    ]) 
}; 

和打字稿模型

import { $, jQuery} from 'jquery'; 

export class Home { 
    private a: jQuery; 

    attached() { 
     alert("begin"); 
     this.a = $("body"); // this line fails 
     alert("end"); 
    } 
} 

Answer 1

評論從凱利的伎倆：

嘗試匯入像import * as $ from 'jquery';