TypeScript 2 + Webpack 3で、同じライブラリを通常のモジュールとしてインストールすると動くが、@typesの型定義だけをインストールするとエラーになる
TypeScript 2 + Webpack 3を用いて、外部ライブラリ(モジュール)を使用したアプリケーションを作ろうとしているのですが、このとき、あるライブラリAについて
- ライブラリA本体をnpm installでインストールすると正常にビルドできる
- ライブラリAの型定義のみ(@types/A)をnpm installでインストールするとビルドに失敗する
という現象が発生し、解決方法が分からずに悩んでおります。
お手数ですが、解決方法をご存知の方がいらっしゃいましたら、教えていただけないでしょうか。
※私の推測では、おそらく@typesの位置をWebpackに教えないといけないのかと考えていますが
そのための適切な方法が分からない状態です。
環境
Typescript 2.6.1
Webpack 3.8.1
npm 5.5.1
Visual Studio Code上でソースファイルを開いた場合には、特にエラーが出ず
ライブラリ(jQuery)の入力補完も動作することを確認
ソースファイル
index.d.ts
import * as $ from "jquery";
function test(){
return $('#TEST').text();
}
package.json
{
"name": "webpacktest1",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"dependencies": {},
"devDependencies": {
"@types/jquery": "^2",
"awesome-typescript-loader": "^3.3.0",
"typescript": "^2.6.1"
}
}
webpack.config.js
module.exports = {
entry: "./src/index.ts",
output: {
filename: "bundle.js",
path: __dirname + "/dist"
},
resolve: {
// 解決可能な拡張子に'.ts'を追加
extensions: [".ts", ".js", ".json"]
},
module: {
loaders: [
// '.ts'の全てのファイルを、'awesome-typescript-loader'で扱う
{ test: /\.ts$/, loader: "awesome-typescript-loader" }
]
}
};
tsconfig.json
{
"compilerOptions": {
"outDir": "./dist/",
"sourceMap": true,
"noImplicitAny": true,
"module": "commonjs",
"target": "es5"
},
"include": [
"./src/**/*"
]
}
出力
$ webpack --verbose
[at-loader] Using typescript@2.6.1 from typescript and "tsconfig.json" from C:\work\webpacktest1/tsconfig.json.
[at-loader] Checking started in a separate process...
[at-loader] Ok, 0.073 sec.
Hash: ba68d05679d08d7b9f26
Version: webpack 3.8.1
Time: 1626ms
Asset Size Chunks Chunk Names
bundle.js 2.79 kB 0 [emitted] main
Entrypoint main = bundle.js
chunk {0} bundle.js (main) 160 bytes [entry] [rendered]
> main [0] ./src/index.ts
[0] ./src/index.ts 160 bytes {0} [depth 0] [built]
ERROR in ./src/index.ts
Module not found: Error: Can't resolve 'jquery' in 'C:\work\webpacktest1\src'
resolve 'jquery' in 'C:\work\webpacktest1\src'
Parsed request is a module
using description file: C:\work\webpacktest1\package.json (relative path: ./src)
Field 'browser' doesn't contain a valid alias configuration
after using description file: C:\work\webpacktest1\package.json (relative path: ./src)
resolve as module
C:\work\webpacktest1\src\node_modules doesn't exist or is not a directory
C:\work\node_modules doesn't exist or is not a directory
C:\node_modules doesn't exist or is not a directory
looking for modules in C:\work\webpacktest1\node_modules
using description file: C:\work\webpacktest1\package.json (relative path: ./node_modules)
Field 'browser' doesn't contain a valid alias configuration
after using description file: C:\work\webpacktest1\package.json (relative path: ./node_modules)
using description file: C:\work\webpacktest1\package.json (relative path: ./node_modules/jquery)
no extension
Field 'browser' doesn't contain a valid alias configuration
C:\work\webpacktest1\node_modules\jquery doesn't exist
.ts
Field 'browser' doesn't contain a valid alias configuration
C:\work\webpacktest1\node_modules\jquery.ts doesn't exist
.js
Field 'browser' doesn't contain a valid alias configuration
C:\work\webpacktest1\node_modules\jquery.js doesn't exist
.json
Field 'browser' doesn't contain a valid alias configuration
C:\work\webpacktest1\node_modules\jquery.json doesn't exist
as directory
C:\work\webpacktest1\node_modules\jquery doesn't exist
[C:\work\webpacktest1\src\node_modules]
[C:\work\node_modules]
[C:\node_modules]
[C:\work\webpacktest1\node_modules\jquery]
[C:\work\webpacktest1\node_modules\jquery.ts]
[C:\work\webpacktest1\node_modules\jquery.js]
[C:\work\webpacktest1\node_modules\jquery.json]
[C:\work\webpacktest1\node_modules\jquery]
@ ./src/index.ts 3:8-25