服務器和客戶端的打字稿項目組織，編制

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] 

我該怎麼辦？我應該使用什麼？

編輯：

隨着一飲而盡，我一飲而盡使用，打字稿及tsify但漸進式編譯時間超過5秒，這是太多。

Answer 1

你有沒有試過在你的tsconfig中設置isolatedModules : true？在這裏閱讀更多：http://weblogs.thinktecture.com/thomas/2016/05/tired-of-waiting-for-typescript-compilation.html

Answer 2

我用NPM腳本啓動3「看」的過程：

• 一說手錶的客戶端文件（的WebPack）和編譯，然後到一個名爲public文件夾。

• 一說手錶服務器文件（TSC）和然後編譯到一個文件夾名爲private

• 一說手錶輸出服務器代碼（nodemon）並運行的node.js應用時它的變化。

這兩個應用程序都可以從common導入文件，它應該可以正常工作。

我scripts配置在package.json如下所示：

"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爲每個應用程序創建一個包。

我的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" 
    ] 
}