服务器和客户端的打字稿项目组织，编制

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