Webpackを使用してサブフォルダからTypeScriptモジュールを構築して参照する

Question

この質問には「モジュール」という言葉に3つの異なる意味がありますので、明確でない場合は明確にしてください。

私は現在、変更したいnode_moduleに大きく依存するTypeScriptプロジェクトを持っています。この依存関係のソースをGitサブモジュールにクローンしました。この依存関係はTypeScriptでも作成されます。次のように

私のディレクトリ構造は次のとおりです。

root/ 
    - source/ 
    - app.tsx (my entrypoint) 
    - ... 
    - vendor/ 
    - dependency/ (git submodule) 
     - node_modules/ 
     - (dependency's dependencies) 
     - source/ 
     - index.ts 
     - ... 
     - package.json 
     - tsconfig.json 
    - webpack.config.js 
    - tsconfig.json 
    - package.json 

ファイルroot/source/vendor/dependency/source/index.tsは、依存関係の輸出が含まれています。

、私はそれがまだnode_module依存関係（すなわちimport { class1, class2 } from "dependency"であるかのように私は私の.TSファイルで私の依存関係を参照することができ

1. ように私のプロジェクトを設定したい。
2. メイクのWebPACKはに私の依存関係を構築します私のプロジェクト

と同じバンドルには、私はTSCは、モジュール名「依存関係」を理解させる方法を見つけ出すことはできませんポイント1との大きな問題を抱えている。

私の問題は、tsconfig.jsonの設定が不足していると思われますが、それはわかりません。私はbaseUrlとpathsを設定してみましたが、動作するはずですが、コンパイラはまだモジュールを見つけることができないと不平を言います。

---

私の現在のtsconfig.json

{ 
    "compileOnSave": false, 
    "compilerOptions": { 
     "target": "es5", 
     "module": "commonjs", 
     "isolatedModules": false, 
     "jsx": "react", 
     "experimentalDecorators": true, 
     "emitDecoratorMetadata": true, 
     "declaration": false, 
     "noImplicitAny": false, 
     "sourceMap": true, 
     "removeComments": true, 
     "noLib": false, 
     "preserveConstEnums": false, 
     "suppressImplicitAnyIndexErrors": true, 
     "outDir": "./lib", 
     "types": [ 
      "es6-promise", 
      "google.analytics" 
     ], 
     "baseUrl": ".", 
     "paths": { 
      "dependency": "vendor/dependency/source/index.ts" 
     } 
    }, 
    "exclude": [ 
     "**/node_modules", 
     "vendor/dependency/node_modules/" 
    ] 
} 

私の現在のwebpack.config.js

var path = require("path"); 
var tsConfigPath = path.resolve("tsconfig.json"); 

module.exports = { 
    devtool: "source-map", 
    entry: {  
    web: path.resolve(path.join("source", "app.tsx")) 
    }, 
    resolve: { 
    extensions: [".ts", ".tsx", ".js", ".scss"], 
    modules: [ 
     "node_modules", 
     "vendor" 
    ] 
    }, 
    output: { 
    path: path.resolve(path.join("proxy", "static")), 
    filename: "[name]/[name].js", 
    publicPath: "/" 
    }, 
    module: { 
    rules: [ 
     { 
      test: /\.tsx?$/, 
      loader: "awesome-typescript-loader" 
     }, 
     { 
      test: /\.scss$/, 
      loaders: ["style-loader", "css-loader", "sass-loader"] 
     }, 
     { // All output '.js' files will have any sourcemaps re-processed by 'source-map-loader'. 
      enforce: "pre", 
      test: /\.js$/, 
      loader: "source-map-loader" 
     } 
    ] 
    }, 
    plugins: [ 
    require("webpack-fail-plugin") 
    ], 
    externals: { 
    "react": "React", 
    "react-dom": "ReactDOM" 
    } 
}; 

すべて...私はすべてが間違っているこれについてつもりなら、私に知らせてください。私はそれをnpmに公開することなく、依存関係をローカルに変更することができるようにしたいと考えています。

Answer 1

これはややこしいことですが、プロジェクトルートにnode_modulesフォルダを作成することができます（まだ存在していない場合）。その中にあなたがあなたがdependency.tsれているファイルを作成：あなたはどこでもあなたのアプリ内からimport { class1, class2 } from 'dependency' を書くときその後

export * from './../vendor/dependency/source/index.ts' 

を、それがroot/node_modules/dependency.tsを探します。

詳細については、を公式のTypeScryptドキュメントからお読みください。