1.安装Node.js
Node.js 之后使用 npm的命令
2.初始化项目
使用vscode打开工作目录，在vscode里边打开terminal，输入下面命令
npm init -y
npm install --save-dev webpack style-loader css-loader file-loader typescript ts-loader webpack-merge
npm init -y 在当前目录下生成package.json -y是不磨叽的意思
nmp install 是安裝模塊, --save-dev是在当前目录下安裝,webpack style-loader等都是模块名字
3.目录结构
查看 https://github.com/inno-tecth/lab/tree/master/ts-001
webpack.config.js, webpack.dev.js, webpack.prod.js配置webpack的编译，在package.json中引用。
webpack.config.js: 中定义了入口文件和输出文件，以及解析的规则，webpack.dev.js: 类似debug模式，webpack.prod.js 類似release
4.調試
console.log()是必不可少的 但还要断点调式
安裝debug for chrome
配置 launch.json 如下
這裏的http://dev.innotech.vip/index.html 是 apache的虛擬目錄 指向了工作目錄
輸入命令 npm run start
点击debug图标
也可以在chrome中調式
5. 引入 第三方庫
在引入 第三方庫 jquery的時候沒有提示 後來發現
npm install jquery @types/jquery --save 安裝之後 提示好了
至於tsconfig裏邊配置的 其實配不配都可以
"compilerOptions": {
... other compiler options ...
"typeRoots": [ "node_modules/@types/" ],
"types": ["jquery" ]
},
