如何新建typescript配合webpack项目

趁typescript火热之际写一篇如何利用webpack构建项目吧。

第一步，肯定是安装typescript的npm包

npm install -g typescript

安装好之后就可以手动编译.ts文件了，即typescript文件后缀.ts

tsc filename.ts

即可在.ts同一目录下生成.js文件

但每个.ts文件都手动生成是不现实也不允许的，那么如何利用webpack自动编译呢？

其实和其他的编译比如ES6 babel等编译类似，但也存在一些区别。

在项目目录下，执行npm init 生成package.json。

{
  "name": "luke",
  "version": "1.0.0",
  "description": "this a typescript",
  "main": "index.ts",
  "dependencies": {
    "ts-loader": "^1.3.3",
    "webpack": "^1.14.0",
    "webpack-dev-server": "^1.14.0"
  },
  "devDependencies": {},
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack -w"
  },
  "author": "luke",
  "license": "ISC"
}

这是最基础的仅仅是typescript的package.json的依赖，具体的package.json的相关内容，可参考阮一峰老师的package.json文件。

有了package.json，npm install吧，安装依赖所需包。

webpack.config.js关于webpack的配置和普通的基本一致。

module.exports = {
    entry: './index.ts',
    output: {
        filename: './index.js'
    },
    module: {
        loaders: [{
            test: /\.ts$/,
            loader:'ts-loader'
        }]
    },
    resolve: {
        extensions: ['', '.webpack.js', '.web.js', '.ts', '.js']
    }
}

一般的webpack编译到此就可以运行了，但是typescript还需要一个tsconfig.json是什么东西呢，还请看tsconfig.json介绍

最基本的写法如下：

//第一种写法，将file一一列出
{
    "compilerOptions": {
        // "module": "commonjs",//可不写
        "sourceMap": true
    },
    "files": [
        "./index.ts"
   ]
}
//第二种写法，用include包含所有ts文件，同时可写不包含文件
{
    "compilerOptions":{
        "module": "amd",//或system
        "sourceMap":true,
        "outFile": "./index.js"
    },
    "include": [
        "./index.ts"
    ],
    "exclude": [//不包括的文件
        "node_module"
    ]
}

之后即可在项目目录下运行webpack了，根据本文的package.json中的scripts:{"dev":"webpack -w"}，也可执行npm run dev进行编译。

生成的js文件则在你的目标目录下了。

这里有两个关于"需编译"文件的控制，一个是webpack.config.js中的entery，另一个是tsconfig.json中的include。

做了一个测验：

1.entry:a.ts；a.ts中import了b.ts；则不论tsconfig中是否include:['b.ts']，将a.ts，b.ts都编译；

2.entry:a.ts；a.ts中没有import；include:['a.ts']；则只编译a.ts；

3.entry:a.ts；a.ts中没有import；include:['a.ts','b.ts']或include:['b.ts']；将a.ts，b.ts都编译；

以上测验包括了3种全部情况：

一、webpack包含了两个文件即测验一，两个文件编译；

二、webpack和tsconfig有且只包含了同一个文件即测验二，编译该文件；

三、webpack和tsconfig各自包含了不同的两个文件，两个文件都编译；

所以总结是所编译的文件是两者的合集。