带有@types 定义的 Typescript 2.0.3、Webpack、Foundation、jQuery 未定义

Question

我正在尝试使用带有@types 定义的 TypeScript 2.0.3 构建一个应用程序，并希望使用基础站点并将所有内容与 webpack 捆绑在一起。我一尝试导入基础，就收到 jQuery 未定义的控制台错误消息。当我不导入基础时，jQuery 工作正常！

如果有人可以解释我做错了什么以及如何加载，例如来自 .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 is not defined'。浏览器理解 $ 但例如不理解 $(...).on(...); 那我做错了什么？

Answer 1

我认为在这种情况下，问题是由于如果 jQuery 是使用 webpack（默认为 CommonJS 样式）导入的，它不会创建全局 jQuery 变量 [=11= 】是靠。您可以尝试在您的代码中公开它，看看它是否能解决问题：

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

Answer 2

您应该将此添加到 tsconfig.json 文件的编译器选项中：

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

Answer 3

我终于让它只与 webpack 一起工作了！通过开发同事的一些重要信息，我发现 post：

这给了我以下提示：

全局命名空间下需要jquery

global.jQuery = require('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 最干净的方式。所以，如果这个答案被投票赞成，我将不胜感激。

带有@types 定义的 Typescript 2.0.3、Webpack、Foundation、jQuery 未定义

Typescript 2.0.3 with @types definitions, Webpack, Foundation, jQuery is not defined

jquery

types

zurb-foundation

typescript

webpack