

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

[code]

    import * as $ from "jquery";
    
    function test(){
        return $('#TEST').text();
    }
    
[/code]

## package.json

[code]

    {
      "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"
      }
    }
    
[/code]

## webpack.config.js

[code]

    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" }
            ]
        }
    };
    
[/code]

## tsconfig.json

[code]

    {
        "compilerOptions": {
            "outDir": "./dist/",
            "sourceMap": true,
            "noImplicitAny": true,
            "module": "commonjs",
            "target": "es5"
        },
        "include": [
            "./src/**/*"
        ]
    }
    
[/code]

# 出力

[code]

    $ 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
    
[/code]


CC BY-SA 3.0
2017-11-04T15:52:18.573
39299
2017-11-05T00:38:25.167
26049
question
javascript typescript webpack
TypeScript 2 + Webpack 3で、同じライブラリを通常のモジュールとしてインストールすると動くが、@typesの型定義だけをインストールするとエラーになる


すみません、自己解決してしまったかもしれません。

webpack.config.jsの中に、 **externals**
を追加することで、正常に動作するらしいことに気が付きました。（今回であれば外部ライブラリとしてjQueryを使うため、externalsにjQueryを追加）  
お騒がせしました。

# webpack.config.js

[code]

    module.exports = {
        // (中略)
    
        externals: {
            "jquery": "jQuery"
        },
    };
    
[/code]

もしも、これが正しい解決方法でないというご意見などありましたら、追加のコメントや回答などを頂けると助かります。


CC BY-SA 3.0
2017-11-05T00:38:25.167
39304
2017-11-05T00:38:25.167
26049
39299
answer