使用webpack构建typescript

原创
2017/02/07 10:25
阅读数 332

安装

npm init  生成package.json文件
npm install 生成node_modules文件夹
npm install -g typescript 安装typescript
npm install -g typings 安装Typings工具
npm install webpack --save-dev 安装webpack
npm install webpack-dev-server -g 安装webpack
npm install ts-loader --save-dev  安装ts-loader

如果想在TypeScript代码中直接使用npm上的JS库,需要借助Typings这个工具。

Typings也是一个包管理器,它管理的是JS代码“定义文件”,用Typings安装相应的定义文件后,编辑器和编译器就可以去node_modules目录中找到相应的JS库,并编译到最终的JS代码中。

项目结构

mkdir dist   编译后文件目录
mkdir src    源文件目录
touch src/main.ts  入口文件
touch index.html   模板文件

src/main.ts文件是我们的typescript的入口文件,内容如下

function Add(left: number,right: number):number{
	return left + right;
}

console.log(Add(5,9))

function area2(shape:string,width:number,height:number){
	var area = width * height;
	return  shape + ":" + width+"*"+height+"="+area;
}

document.body.innerHTML = area2("长方形的面积",10,30);

index.html 是我们的模板文件,内容如下

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>Learning TypeScript</title>
</head> 
<body> 
	<script src="dist/build.js"></script>
</body> 
</html>

###配置package.json文件

修改scripts节点,修改后的内容是

"scripts": {
    "start": "webpack-dev-server --inline --hot --colors --progress"
},

package.json配置文件详解请看这里:http://www.runoob.com/nodejs/nodejs-npm.html

###创建tsconfig.json文件

为了方便编译器和编辑器识别TypeScript项目,TypeScript约定了tsconfig.json文件来存储项目配置,如果运行tsc时不指定输入文件,编译器则会查找项目目录中的这个文件,如果找不到则会依次向父级目录查找

在根目录下新建tsconfig.json文件,内容如下

{
    "compilerOptions": {
    	"target": "es5",
	"module": "commonjs",	    
        "outDir":"./dist/"
    },
    "include": [
        "src/**/*.ts"
    ],
    "exclude": [
        "node_modules",
        "**/*.spec.ts"
    ]
}

上面文件内容的意思是,在src目录下的所有.ts文件编译,输出到dist/index.js,现在我们可以在根目录下使用命令行,运行tsc,就会发现dist/index.js生成了编译后的内容

关于tsconfig.json配置的说明看这里:http://www.w3cschool.cn/typescript/typescript-tsconfig-json.html

创建webpack配置文件

上面我们安装了webpack和webpack-dev-server,现在我们添加webpack配置文件 在根目录下新建webpack.config.json文件,内容如下

var path = require('path')

module.exports = {

  entry: './src/main.ts',
  
  output: {
    path: path.resolve(__dirname, './dist'),
    filename: 'build.js'
  },

  module: {
    loaders: [
      { test: /\.ts$/, loader: 'ts-loader' }
    ]
  },

  // 配置 webpack-dev-server
  devServer:{
      historyApiFallback: true,
      hot: true,
      inline: true,
      port: 7777 // 修改端口,一般默认是8080
  }
  
}

在命令行输入webpack会发现dist/build.js已经编译生成好了,现在双击根目录下的index.html会发现页面上输出了”长方形:10*30=300“,说明webpack正常工作,下面测试webpack-dev-server服务,在命令行输入npm start,打开浏览器,在地址栏中输入:http://localhost:7777/,恭喜你,配置成功。 关于webpack配置文件的说明请看这里http://www.jianshu.com/p/b95bbcfc590d

展开阅读全文
加载中
点击引领话题📣 发布并加入讨论🔥
打赏
0 评论
1 收藏
0
分享
返回顶部
顶部