服务器&客户端TypeScript项目组织、编译 [英] Server & client-side TypeScript project organization, compilation
问题描述
我如何编译我的 TypeScript 项目
How can I compile my TypeScript project what
- 在服务器和服务器之间共享代码客户
- 使用打字稿
我无法让 webpack 工作，该网站只显示了一个非常基本的入门.我试过 gulp，但它太复杂了，增量编译需要很长时间(比它应该需要的时间多得多).
I couldn't get webpack working, the website just shows a very basic getting started. I tried gulp, but it was far too complex and the incremental compilation took a very long time (way more than it should need).
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]
我该怎么做?我应该用什么?
How can I do it? What should I use?
在 gulp 中，我使用了 gulp-typescript 和 tsify，但是增量编译花费了 5 秒以上，这太多了.
With gulp, I used gulp-typescript and tsify but the incremental compilation took more than 5 seconds, which was way too much.
推荐答案
我使用 npm 脚本启动 3 个监视"进程:
I use npm scripts to start 3 "watch" processes:
监视客户端文件 (webpack) 并编译到名为
public的文件夹中.
监视服务器文件 (tsc) 并编译到名为 private
One that watches the server files (tsc) and compiles then into a folder called private
观察输出服务器代码 (nodemon) 并在它发生变化时运行 node.js 应用程序.
One that watches the output server code (nodemon) and runs the node.js app when it changes.
这两个应用程序都可以从 common 导入文件，它应该可以正常工作.
Both apps can import files from common ans it should work fine.
我在 package.json 中的 scripts 配置如下所示:
My scripts config in package.json looks as follows:
"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 为每个应用创建一个包.
We have multiple standalone apps inside "client" and each app uses a folder. So we use webpack to create one bundle for each app.
我的 webpack 配置如下(注意:在这个配置中有一些你可能不需要的插件):
My webpack config looks as follows (Note: there are some plugins that you may not need in this config):
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"
]
}
这篇关于服务器&客户端TypeScript项目组织、编译的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
