Webpack无法加载jQuery模块。

Question

我正在尝试使用webpack在typescript中导入jquery。这是我所做的。

npm init -y
npm install -g webpack
npm install ts-loader --save
touch webpack.config.js

在文件中，我写了这个。

module.exports = {  
  entry: './app.ts',
  output: {
    filename: 'bundle.js'
  },
  resolve: {
    extensions: ['', '.webpack.js', '.web.js', '.ts', '.js']
  },
  module: {
    loaders: [
      { test: /\.ts$/, loader: 'ts-loader' }
    ]
  }
}

然后创建app.ts文件并编写以下内容。

import $ = require('jquery');

接下来我使用npm install jquery --save命令加载jquery组件。

然后当我执行webpack命令时，它提示找不到模块“jquery”的信息。

ts-loader: Using typescript@1.6.2
Hash: af60501e920b87c93349
Version: webpack 1.12.2
Time: 1044ms
    Asset     Size  Chunks             Chunk Names
bundle.js  1.39 kB       0  [emitted]  main
    + 1 hidden modules

ERROR in ./app.ts
(1,20): error TS2307: Cannot find module 'jquery'.

有人能告诉我我做错了什么吗？

- user454232

---

很好的问题礼仪。非常直接。喜欢阅读/回答它。 - basarat

Answer 1

有人能告诉我我做错了什么吗？

你需要安装jquery的定义文件:

tsd install jquery --save

此外，你需要有一个tsconfig.json配置文件:

tsc -init 会为您生成一个。但是我建议：

{
    "compilerOptions": {
        "module": "commonjs",
        "target": "es5"
    },
    "exclude": [
        "node_modules"
    ]
}

你还需要安装typescript

npm install typescript -save

- basarat

---

我已经尝试过了，但它不起作用。如果我没记错的话，webpack可以直接加载npm组件。顺便说一下，我喜欢你的YouTube视频。 :) - user454232

谢谢，现在它可以工作了。但我还想知道，webpack是否会自动读取node_modules？ - user454232

你可以在webpack配置中创建别名例如：'resolve: { alias: { myNpmModule: path.join(__dirname, '/node_module/myNpmModule/dist/myNpmModule.min') }' - Raiss

Webpack会自动读取node_modules中的内容，以供require调用。 - basarat