使用webpack构建typescript

最新推荐文章于 2023-11-21 19:47:36 发布

weixin_33937499

最新推荐文章于 2023-11-21 19:47:36 发布

阅读量239

点赞数

CC 4.0 BY-SA版权

文章标签： webpack javascript json ViewUI

原文链接：https://my.oschina.net/tongjh/blog/833074

本文详细介绍如何使用TypeScript和Webpack搭建项目环境，包括安装必要工具、配置文件、项目结构等关键步骤，帮助读者快速上手。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

安装

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

转载于:https://my.oschina.net/tongjh/blog/833074