用纯TypeScript开发Web应用的模板

现在开发前端应用多数使用Vue, React或者Angular, 但是假如希望直接使用TypeScript开发前端应用, 需要哪些配置呢? 这里提供一个TypeScript前端应用模板, 你可以直接下载使用: https://github.com/deping/TypeScriptWebAppTemplate

下载以后:

1. 解压到一个目录;
2. 进入该目录;
3. npm install
4. 开发时运行: npm run serve, 发布时运行 npm run build
   就这么简单!

如果你希望一步一步创建这个模板, 下面是创建步骤:

(参考了https://blog.csdn.net/u013986166/article/details/80246452)

1. 在某个目录打开git bash(这个比较方便, cmd也可以)
2. mkdir TypeScriptWebApp && cd TypeScriptWebApp
3. npm init, 在生成的package.json的scripts字段中加入下面的内容
   “scripts”: {
   “test”: “echo “No test!””,
   “start”: “webpack”,
   “dev”: “npx webpack-dev-server --mode development --content-base ./”
   },
4. npm install --save-dev webpack webpack-cli
5. npm install --save-dev typescript ts-loader
   6.npm install webpack-dev-server --save-dev
6. touch index.html(自己填写/复制适当的内容)
7. touch tsconfig.json(需要填写/复制适当的内容, 见github链接)
8. touch webpack.config.js(需要填写/复制适当的内容, 见github链接)
9. touch tslint.json(可选, 需要填写/复制适当的内容, 见github链接)
10. git init(可选, 如果希望使用git)
11. touch .gitignore(可选, 如果希望使用git, 需要填写/复制适当的内容, 见github链接)
12. mkdir src && touch src/index.ts

webpack-dev-server知识:
webpack.config.js中的publicPath属性表示发布生成的bundle.js到web服务器的/dist目录, 注意这不是文件系统的dist目录, 当你运行npm run serve时, 改变ts文件, 文件系统dist目录下的内容不会改变, 但是http://localhost:8080/dist/bundle.js确实会改变.
执行npm run build会在文件系统dist目录下生成内容.

希望可以帮到大家!