Typescript 2.0.3與@types定義，Webpack，基金會，jQuery沒有定義

我想用@types定義與TypeScript 2.0.3建立一個應用程序，並希望使用基金會網站和捆綁與webpack的一切。只要我試圖導入基礎，我得到控制檯錯誤消息，jQuery沒有定義。當我不導入基礎時，jQuery工作正常！Typescript 2.0.3與@types定義，Webpack，基金會，jQuery沒有定義

如果有人能解釋，我做錯了什麼以及如何加載基礎Tooltip從一個.ts文件，這將是非常棒的。

您可以檢查出在這裏完整的源：https://github.com/Der-Alex/typescript-foundation-webpack

什麼我做的是一種基本的：我有一個./app文件夾。裏面有一個app.ts，main.scss和index.html。

我安裝了以下NPM包：

... 
"dependencies": { 
    "@types/foundation-sites": "^6.1.28", 
    "@types/jquery": "^2.0.33", 
    "css-loader": "^0.25.0", 
    "foundation-sites": "^6.2.3", 
    "jquery": "^2.1.0", 
    "node-sass": "^3.10.1", 
    "sass-loader": "^4.0.2", 
    "style-loader": "^0.13.1", 
    "ts-loader": "^0.9.1", 
    "typescript": "^2.0.3", 
    "webpack": "^1.13.2" 
}, 
"devDependencies": { 
    "webpack-dev-server": "^1.16.2" 
}

我webpack.config.js：

module.exports = { 
    entry: './app/app.ts', 
    output: { 
    filename: './app/bundle.js' 
    }, 
    resolve: { 
    extensions: ['', '.ts', '.js'] 
    }, 
    module: { 
    loaders: [ 
     { 
     test: /\.ts$/, loader: 'ts-loader' 
     }, 
     { 
     test: /\.scss/, loaders: ['style', 'css', 'sass'] 
     } 
    ] 
    } 
};

我./app/app.ts：

import './main.scss'; 
import * as $ from 'jquery'; 
import 'foundation-sites'; 

$(() => { 
    $(document).foundation(); 
});

有沒有轉儲/編譯錯誤。當我運行webpack-dev-server並在瀏覽器中檢查結果時，樣式被加載，但是我得到了這個錯誤消息'jQuery沒有定義'。瀏覽器理解$，但例如不是$（...）。on（...）; 那麼我在做什麼錯了？

來源

2016-10-16 Der Alex

最後我得到了它只與webpack一起工作！從一個dev的同事一些重要的信息，我發現這個職位： Managing jQuery plugin dependency in webpack

這給了我下面的提示：

全局命名空間

global.jQuery = require('jquery');
下要求的jQuery添加別名

resolve: { extensions: ['', '.ts', '.js'], alias: { jquery: "jquery/src/jquery" } }
加$和jQuery作爲一個插件

new webpack.ProvidePlugin({ $: "jquery", jQuery: "jquery" })

這使得jQuery的一個全局對象，可用於內部.ts文件，像這樣：

import * as $ from 'jquery'; 
$(document).foundation();

我認爲，這是使用webpack加載jQuery的最簡單方法。所以我會很感激，如果這個答案被投票。

來源

2016-11-29 16:59:17

我認爲在這種情況下，問題是由於如果使用webpack導入jQuery（默認爲CommonJS風格），它不會創建全局jQuery變量，foundation-sites依賴於此。你可以嘗試將其暴露在你的代碼，看看它是否解決了這個問題：

import * as $ from 'jquery'; window.jQuery = $; import 'foundation-sites';

來源

2016-10-16 08:22:27 Stubb0rn

非常感謝你，Stubb0rn！ –

我不得不將窗口$改爲window ['jQuery']。 TypeScript不允許在其中添加屬性。句法。但現在它起作用了！謝謝！ –

你應該添加到您的tsconfig.json文件的compilerOptions：

"typeRoots": [ 
    "node_modules/@types" 
]

來源

2016-10-24 15:55:32 Macondiana

Hi @Macondiana。我不確定，這應該如何幫助我解決我的問題。 typeRoots只能告訴打字稿，在哪裏尋找哪些類型。我的問題是，該webpack不包括全球jQuery。 –

Typescript 2.0.3與@types定義，Webpack，基金會，jQuery沒有定義

回答

相關問題