Angualr 2 +打字稿+的jQuery +的WebPack：$未定義

正如標題所說我正在開發使用打字稿，jQuery和的WebPack（到dist JS和CSS文件）的角2應用程序。

從控制器，當我需要訪問的jQuery（$）我總是導入它想：

var $: JQueryStatic = require('jquery');

在每一個需要的jQuery功能控制器的頂部。

欲瞭解更多信息，這裏是我的webpack.config文件：

const path = require('path'); 
const webpack = require('webpack'); 
const ExtractTextPlugin = require('extract-text-webpack-plugin'); 
const merge = require('webpack-merge'); 

module.exports = (env) => { 
    const extractCSS = new ExtractTextPlugin('vendor.css'); 
    const isDevBuild = !(env && env.prod); 
    const sharedConfig = { 
     stats: { modules: false }, 
     resolve: { extensions: ['.js'] }, 
     module: { 
      rules: [ 
       { test: /\.(png|woff|woff2|eot|ttf|svg)(\?|$)/, use: 'url-loader?limit=100000' }, 
       { test: /jquery-mousewheel/, loader: "imports-loader?define=>false&this=>window" }, 
       { test: /malihu-custom-scrollbar-plugin/, loader: "imports-loader?define=>false&this=>window" } 
      ] 
     }, 
     entry: { 
      vendor: [ 
       '@angular/common', 
       '@angular/compiler', 
       '@angular/core', 
       '@angular/flex-layout', 
       '@angular/http', 
       '@angular/material', 
       '@angular/platform-browser', 
       '@angular/platform-browser-dynamic', 
       '@angular/router', 
       '@angular/platform-server', 
       'angular2-universal', 
       'angular2-universal-polyfills', 
       'bootstrap', 
       //'bootstrap/dist/css/bootstrap.css', 
       'es6-shim', 
       'es6-promise', 
       'font-awesome/css/font-awesome.css', 
       'event-source-polyfill', 
       'hammerjs', 
       'jquery', 
       'jquery-mousewheel', 
       'malihu-custom-scrollbar-plugin', 
       'malihu-custom-scrollbar-plugin/jquery.mCustomScrollbar.css', 
       'swiper', 
       'swiper/dist/css/swiper.css', 
       'zone.js', 
      ] 
     }, 
     output: { 
      publicPath: '/dist/',  // Specifies the public URL address of the output files when referenced in a browser 
      filename: '[name].js',  // Specifies the name of each output file on disk 
      library: '[name]_[hash]' // Export the bundle as library with that name 
     }, 
     plugins: [ 
      new webpack.ProvidePlugin({ $: 'jquery', jQuery: 'jquery', jquery: 'jquery', Hammer: "hammerjs/hammer" }), // Maps these identifiers to the jQuery package (because Bootstrap expects it to be a global variable) 
      new webpack.ContextReplacementPlugin(/\@angular\b.*\b(bundles|linker)/, path.join(__dirname, './ClientApp')), // Workaround for https://github.com/angular/angular/issues/11580 
      new webpack.IgnorePlugin(/^vertx$/) // Workaround for https://github.com/stefanpenner/es6-promise/issues/100 
     ] 
    }; 

    const clientBundleConfig = merge(sharedConfig, { 
     output: { path: path.join(__dirname, 'wwwroot', 'dist') }, 
     module: { 
      rules: [ 
       { test: /\.css(\?|$)/, use: extractCSS.extract({ use: 'css-loader' }) } 
      ] 
     }, 
     plugins: [ 
      extractCSS, 
      new webpack.DllPlugin({ 
       path: path.join(__dirname, 'wwwroot', 'dist', '[name]-manifest.json'), 
       name: '[name]_[hash]' 
      }) 
     ].concat(isDevBuild ? [] : [ 
      new webpack.optimize.UglifyJsPlugin() 
     ]) 
    }); 

    const serverBundleConfig = merge(sharedConfig, { 
     target: 'node', 
     resolve: { mainFields: ['main'] }, 
     output: { 
      path: path.join(__dirname, 'ClientApp', 'dist'), 
      libraryTarget: 'commonjs2', 
     }, 
     module: { 
      rules: [{ test: /\.css(\?|$)/, use: ['to-string-loader', 'css-loader'] }] 
     }, 
     entry: { vendor: ['aspnet-prerendering'] }, 
     plugins: [ 
      new webpack.DllPlugin({ 
       path: path.join(__dirname, 'ClientApp', 'dist', '[name]-manifest.json'), 
       name: '[name]_[hash]' 
      }) 
     ] 
    }); 

    return [clientBundleConfig, serverBundleConfig]; 
}

有沒有辦法不用每次都做這個聲明？

在此先感謝

來源

2017-02-22 Androidian

你總是要導入或聲明您使用的每個組件的外部對象。你可以讓webpack捆綁它，但是外部對象仍然必須在每個組件中聲明或導入。 –

是的，你可以做到這一點，如果你用這種方式更新您的webpack.config.js插件：

plugins: [ 
    new webpack.ProvidePlugin({ 
     jQuery: 'jquery', 
     $: 'jquery', 
     jquery: 'jquery' 
    }) 
    ]

不要忘記之前安裝必要的依賴關係：

npm install jquery --save 
npm install @types/jquery --save-dev

來源

2017-02-22 14:37:47

我的WebPack已經包含了這些聲明和我已經安裝了jQuery和@類型/ jQuery的。請在我的更新問題中查看我的webpack.config文件。 – Androidian

Angualr 2 +打字稿+的jQuery +的WebPack：$未定義

回答

相關問題