前言
IDE提供了强大的纠错与补全能力,但是对于从开发时的编程语言实时转译,提供开发本地服务器以及自动刷新,到转为生产环境代码的编译,压缩,混淆代码以及打包,还是交给一些第三方工具的吧,对,我说的就是Typescript代替Javascript进行前端开发,第三方工具就说的是神器webpack。
在此记录一下,下一次直接复制粘贴 :-p
需求
开发环境
- 即时编译为js,并自动刷新页面
生产环境
- 将es6/es7转为es5
- 混淆并压缩转译完的js代码
环境搭建
cd <your-dev-dir>
npm init
目录如下
<your-dev-dir>
├── dist // 生产环境的js代码输出文件夹
│ └── index.html // html 页面
├── .babelrc // babel 配置文件
├── package-lock.json
├── package.json
├── src
│ └── typescript
│ ├── main.ts // typescript入口文件
│ ├── ....... // 其他ts文件或模块
├── tsconfig.json // typescript配置文件,IDE会读取
├── webpack.common.js // wepack通用配置文件
├── webpack.dev.js // webpack开发环境配置文件
└── webpack.prod.js // webpack生产环境配置文件
安装依赖
npm install --save-dev babel babel-loader babel-polyfill babel-preset-env ts-loader typescript uglif