サーバー＆クライアント側の活字体のプロジェクト組織、コンパイル

Question

がどのように私は、サーバー&クライアントの間で私の活字体プロジェクト何

• 株式コードをコンパイルすることができます
• は活字体

を使用し、私はWebPACKの得ることができませんでした働いて、ウェブサイトはちょうど非常に基本的な開始を示しています。私は貪欲にしようとしましたが、それはあまりにも複雑すぎて、インクリメンタルなコンパイルには非常に長い時間がかかりました。

src/ 
    common/ 
     data.ts 
     [other files that are needed on both client and server-side] 
    server/ 
     server.ts 
     search.ts 
    client/ 
     sw.ts 
     resources/ 
      [other static resources like index.html] 
[configuration files like package.json] 

どうすればいいですか？私は何を使うべきですか？

EDIT：ゴクゴクと

、私は一息-typescriptですを使用し、tsifyが、インクリメンタル・コンパイルは、あまりにも多くのだった5秒以上を取りました。

Answer 1

あなたのtsconfigにisolatedModules : trueを設定しようとしましたか？ http://weblogs.thinktecture.com/thomas/2016/05/tired-of-waiting-for-typescript-compilation.html

Answer 2

私は3を開始するために、NPMのスクリプトを使用するプロセス「観る」：ここ続きを読むクライアントファイル（WebPACKの）を監視し、publicというフォルダの中に、その後コンパイル

• ワン。フォルダの中に、サーバーファイル（TSC）を監視し、コンパイル

• 一つは、出力サーバコード（nodemon）を監視し、それが変化した場合のNode.jsアプリケーションを実行しますprivate

• ワンと呼ばれます。

いずれのアプリもcommonからファイルをインポートできます。正常に動作するはずです。次のようにpackage.jsonで

私scripts configが見えます：

"scripts": { 
    "watch-all": "npm run watch-server & npm run watch-client & nodemon --inspect private/server.js", 
    "watch-server": "tsc -p tsconfig.json -inlineSourceMap -outDir private --watch", 
    "watch-client": "webpack --watch", 
    } 

私たちは、「クライアント」内の複数のスタンドアロンのアプリを持っており、各アプリは、フォルダを使用しています。そこでwebpackを使用して、各アプリケーションごとに1つのバンドルを作成します。次のように

私のWebPACKの設定に見えます（注：この設定では必要ないかもしれないいくつかのプラグインがあります）：

const { CheckerPlugin, TsConfigPathsPlugin } = require("awesome-typescript-loader"); 
const Visualizer = require("webpack-visualizer-plugin"); 
const webpack = require("webpack"); 
const CopyWebpackPlugin = require("copy-webpack-plugin"); 
const TypedocWebpackPlugin = require("typedoc-webpack-plugin"); 

const corePlugins = [ 
    new CheckerPlugin(), 
    new webpack.DefinePlugin({ 
     "process.env.NODE_ENV": JSON.stringify(process.env.NODE_ENV || "development") 
    }), 
    new Visualizer({ 
     filename: "./debug/statistics.html" 
    }), 
    new CopyWebpackPlugin([ 
     // ... 
    ]) 
]; 

const devPlugins = [ 
    new TypedocWebpackPlugin(
     { 
      name: "ORG", 
      out: "../private/docs", 
      mode: "file", 
      tsconfig: "./tsconfig.json" 
     }, 
     "./src" 
    ) 
]; 

const prodPlugins = [ 
    new webpack.optimize.UglifyJsPlugin() 
]; 

const plugins = process.env.NODE_ENV === "production" ? corePlugins.concat(prodPlugins) : corePlugins.concat(devPlugins) 

module.exports = { 
    entry: { 
     "app1/": "./src/client/app1/index.ts", 
     "app2/": "./src/client/app2/index.ts", 
     // ... 
    }, 
    devServer: { 
     inline: true 
    }, 
    output: { 
     filename: "[name]bundle.js", 
     path: __dirname + "/public", 
     publicPath: "/public" 
    }, 
    devtool: "source-map", 
    resolve: { 
     extensions: [".webpack.js", ".web.js", ".ts", ".tsx", ".js"], 
     plugins: [ 
      new TsConfigPathsPlugin({ configFileName: "tsconfig.json" }) 
     ] 
    }, 
    module: { 
     rules: [ 
      { 
       enforce: "pre", 
       test: /\.js$/, 
       loader: "source-map-loader", 
       exclude: [ /node_modules/, /experimental/ ] 
      }, 
      { 
       enforce: "pre", 
       test: /\.(ts|tsx)$/, 
       loader: "tslint-loader", 
       exclude: [ /node_modules/, /experimental/ ] 
      }, 
      { 
       test: /\.(ts|tsx)$/, 
       loader: "awesome-typescript-loader", 
       exclude: [ /node_modules/, /experimental/ ] 
      }, 
      { 
       test: /\.scss$/, 
       use: [{ 
        loader: "style-loader", 
        options: { 
         sourceMap: true 
        } 
       }, { 
        loader: "css-loader", 
        options: { 
         sourceMap: true 
        } 
       }, { 
        loader: "sass-loader", 
        options: { 
         sourceMap: true 
        } 
       }] 
      } 
     ] 
    }, 
    plugins: plugins 
}; 

私は次のバージョンを使用しています：

"devDependencies": { 
    "awesome-typescript-loader": "^3.0.0-beta.18", 
    "chai": "^3.5.0", 
    "copy-webpack-plugin": "^4.0.1", 
    "css-loader": "^0.28.0", 
    "html5-history-api": "^4.2.7", 
    "mocha": "^3.2.0", 
    "node-sass": "^4.5.2", 
    "nodemon": "^1.11.0", 
    "nyc": "^10.1.2", 
    "phantomjs-prebuilt": "^2.1.14", 
    "sass-loader": "^6.0.3", 
    "sequelize-auto": "^0.4.25", 
    "sinon": "^2.0.0-pre.5", 
    "source-map-loader": "^0.2.1", 
    "sourcemap-istanbul-instrumenter-loader": "^0.2.0", 
    "style-loader": "^0.16.1", 
    "supertest": "^3.0.0", 
    "tmp": "0.0.31", 
    "ts-node": "^3.0.2", 
    "tslib": "^1.6.0", 
    "tslint": "^5.1.0", 
    "tslint-loader": "^3.5.2", 
    "typedoc": "^0.5.10", 
    "typedoc-webpack-plugin": "^1.1.4", 
    "typescript": "^2.2.2", 
    "webpack": "^2.3.3", 
    "webpack-dev-server": "^2.4.2", 
    "webpack-visualizer-plugin": "^0.1.10", 
    "xlsx": "^0.9.10", 
    "yargs": "^7.0.2" 
    } 

更新1（tsconfig.jsonを追加）

{ 
    "compilerOptions": { 
     "target": "es5", 
     "lib": ["es6", "dom", "dom.iterable"], 
     "downlevelIteration" : true, 
     "module": "commonjs", 
     "moduleResolution": "node", 
     "jsx": "react", 
     "experimentalDecorators": true, 
     "emitDecoratorMetadata": true, 
     "noImplicitAny": true, 
     "preserveConstEnums": true, 
     "suppressImplicitAnyIndexErrors": true, 
     "strictNullChecks": true, 
     "noImplicitReturns": false, 
     "noImplicitThis": true, 
     "baseUrl": "src", 
    }, 
    "exclude": [ 
     "./node_modules" 
    ] 
}