基于Typescript搭建前端开发环境

前端大热及相应技术栈爆发式的增长，随之而来的是学习成本的节节攀升。
有时想学学新技术、写点东西或做些积累，却一不留神陷入爬坑碰壁，乃至流血成河的窘境。
以此文，企图给那些有理想有抱负的前端青年们一点解脱。

没错，你看到了Typescript
目前它炙手可热，满满都是谈资。但你可知，在项目中使用TS，首先要针对它去布局你的项目，否则必要的时候它会出来撩骚你。当然，选择Typescript没有错，要坚信这一点，剩下的后文帮你处理。

1. 安装Git

舍我其谁？
如果是windows，你可能还会需要GitHub for Windows
或者GitHub for Windows离线安装包

2. 编辑器 | IDE

VSCode、Sublime、Webstorm、Idea等等，选一个吧。（如果是Sublime，你可能还需要ArcticTypescript这个Sublime插件，但ArcticTypescript似乎无法支持到高于1.5版本的TSC和TSS，至少我没搞成功过）

3. 安装Node

不多说

4. 初始化项目

git initnpm init

现在我们得到了package.json。
这是一个好的开始！
然后，记得把README.md创建出来，以及，选择一个License！
还有，打开.gitignore，添加一行

node_modules/

避免提交node_modules

5. Typescript&Typings

npm install typescript typings --save-dev

6. Webpack&ts-loader

npm install webpack ts-loader --save-dev

创建webpack.config.js文件，配置请参考(注意ts-loader部分)：

module.exports = {  entry: {    // key: value - key值对应output的[name]部分；value为入口文件路径    "yourModule": "./src/yourModule.ts"  },  output: {    filename: '[name].js',    path: __dirname + "/dist"  },  resolve: {     extensions: ['.webpack.js', '.web.js', '.ts', '.js']  },  externals: {  },  module: {    loaders: [      {        test: /\.tsx?$/,        exclude: /node_modules/,        loader: 'ts-loader'      }    ],  },  devtool: "source-map"}

创建src目录，并在src目录下创建yourModule.ts，先随便写点什么，然后使用

webpack

尝试构建，看到webpack: Compiled successfully.表示构建成功，之后在dist目录中你将得到yourModule.js。
这是一个不小的胜利。
不要忘记修改package.json中main属性值为”dist/yourModule.js”。

7. jasmine&karma

npm install jasmine jasmine-core --save-devnpm install karma karma-chrome-launcher karma-cli karma-jasmine karma-requirejs --save-dev

然后

karma init

一路回车下去，得到原始的karma.conf.js
请确保frameworks: [‘jasmine’]一项已经配置成jasmine

8. karma-typescript-preprocessor&karma-webpack

npm install karma-typescript-preprocessor karma-webpack --save-dev

karma-typescript-preprocessor预处理器保证你能使用typescript书写测试用例。
karma-webpack保证为测试代码打包。
建立test目录，并在目录内创建一段简短的yourModule.spec.ts测试用例代码，如

import "../src/yourModule";describe("A suite", function() {    it("contains spec with an expectation", function() {        expect(true).toBe(true);    });});

之后修改karma.conf.js

{    files: [      'test/**/*.ts',    ],    preprocessors: {      'test/**/*.ts': ["webpack"]    },    webpack: {      resolve: {        extensions: ['.webpack.js', '.web.js', '.ts', '.js']      },      module: {        loaders: [          {            test: /\.tsx?$/,            exclude: /node_modules/,            loader: 'ts-loader'          }        ],      },      devtool: "source-map"    },}

试着运行一下

karma start

你也可以吧这段脚本添加进package.json

{  "scripts": {    "test": "karma start"  },}

然后使用

npm test

执行测试用例。
看到Executed 1 of 1 SUCCESS (0.007 secs / 0.002 secs)字样，代表运行成功。

至此，环境搭建结束。

擦擦汗，终于可以敲代码了…

总结：

• 使用Typescript编码
• 使用webpack构建并打包
• 使用Karma+Jasmine进行测试

最后的最后，别忘了提交到版本库(比如Github)！