TypeScript + Webpack 4 开发环境搭建(转)
前段时间接触到 Microsoft 的 Microsoft.AspNetCore.SpaTemplates
模板,生成的项目使用的默认语言是 TypeScript
,虽然以前在此之前并没有用过TypeScript
,但第一看上去有种很熟悉的感觉。当然,也有人说 TypeScript
是 JavaScript
版本的C#
,不管怎么说,有了学习的兴趣。另外,据说新版的webpack 4
相比以前的版本的更快的打包速度,于是就有了把它们结合在一起使用的想法。
准备工作
请事先安装好 Node.js
新建项目文件夹,按住 Shift
键不放手,在文件夹空白处单击鼠标右键,选择 在此处打开Powershell窗口
使用npm 安装相应的模块
webpack 4 需要安装 webpack
、webpack-cli
和 typescript
等必要的模块。为了使用 webpack 处理 typescript,还需要 ts-loader
。
在上面打开的 Powershell 窗口中输入以下命令
1、初始化项目:
npm init
回答一系列的问题(也可以直接回车使用默认值)后,在当前项目文件夹中会出现一个package.json的配置文件。文件内容大概如下所示:
{
"name": "webpacktypescript",
"version": "1.0.0",
"description": "",
"main": "index.js",
"dependencies": {
"ts-loader": "^4.2.0",
"typescript": "^2.8.1",
"webpack": "^4.6.0",
"webpack-cli": "^2.0.14"
},
"devDependencies": {},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}
2、安装需要的各个模块:
npm install webpack webpack-cli typescript ts-loader --save-dev
回答一系列的问题(也可以直接回车使用默认值)后,在当前项目文件夹中会出现一个package.json的配置文件。文件内容大概如下所示:
{
"name": "webpacktypescript",
"version": "1.0.0",
"description": "",
"main": "index.js",
"dependencies": {
"ts-loader": "^4.2.0",
"typescript": "^2.8.1",
"webpack": "^4.6.0",
"webpack-cli": "^2.0.14"
},
"devDependencies": {},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}
3、添加 TypeScript 的配置文件 tsconfig.json
启动 WebStorm
并打开项目,在项目名称上单击鼠标右键
-> New
-> tsconfig.json
, 添加TypeScipt的配置文件,内容如下所示:
{
"compilerOptions": {
"module": "commonjs",
"target": "es5",
"sourceMap": true
},
"exclude": [
"node_modules"
]
}
4、添加index.html
及默认的 src/index.js
文件
在项目文件夹中添加html文件,并命名为:'index.html',并编辑文件内容如下所示:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>TypeScript + Webpack 4</title>
</head>
<body>
<script src="dist/main.js"></script>
</body>
</html>
在项目文件夹中添加名字为src
的文件夹,并在该文件夹中添加名字为index.js
的JavaScript文件,文件内容如下所示:
console.log("Hello TypeScript!");
完成以上操作后项目的结构如下所示:
webpackwithtypescript
|- src
|- index.js
|- index.html
|- package.json
|- package-lock.json
|- tsconfig.json
5、使用webpack-cli打包项目
在控制台窗口(Powershell窗口
或WebStorm的Terminal
都可以) 输入以下命令进行打包:
npx webpack
控制台显示内容如下所示:
D:\SPAProjects\webpacktypescript>npx webpack
npx: installed 1 in 11.482s
The "path" argument must be of type string
D:\SPAProjects\webpacktypescript\node_modules\webpack\bin\webpack.js
Hash: 7dffdd50a425c0f906c2
Version: webpack 4.6.0
Time: 579ms
Built at: 2018-04-18 14:23:26
Asset Size Chunks Chunk Names
main.js 577 bytes 0 [emitted] main
Entrypoint main = main.js
[0] ./src/index.js 33 bytes {0} [built]
打包成功,项目文件夹中会多出 dist/main.js
- 这也正是 webpack 4 未指定输出文件时默认的位置。此时在浏览器中打开index.html
,并在浏览器中按下F12
,进入控制台将会看到 consolr.log()
语句的输出结果。
此时的项目文件夹结构:
webpackwithtypescript
|- dist
|- main.js
|- src
|- index.js
|- index.html
|- package.json
|- package-lock.json
|- tsconfig.json
webpack 4 没有配置文件时,使用src/index.js
作为默认入口,同时使用dist/main.js
作为默认出口。
由于TyepScript文件的默认扩展名为.ts
,所以并不适合于没有配置文件的默认状况。
6、webpack 配置文件
在项目文件夹中添加名为webpack.config.js
的JavaScript文件,并编辑其内容如以下所示:
const path = require('path');
module.exports = {
mode: 'development',
entry: './src/index.ts',
output: {
filename: 'main.js',
path: path.resolve(__dirname, 'dist')
},
module: {
rules: [{
test: /\.ts$/,
use: "ts-loader"
}]
},
resolve: {
extensions: [
'.ts'
]
}
};
同时修改package.json
如以下内容所示:
{
"name": "webpacktypescript",
"version": "1.0.0",
"description": "",
"main": "index.js",
"dependencies": {
"ts-loader": "^4.2.0",
"typescript": "^2.8.1",
"webpack": "^4.6.0",
"webpack-cli": "^2.0.14"
},
"devDependencies": {},
"scripts": {
"build": "webpack", //添加这一行
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}
完成以上的设置,然后将src/index.js
改名为src/index.ts
。
webpackwithtypescript
|- dist
|- main.js
|- src
|- index.ts
|- index.html
|- package.json
|- package-lock.json
|- tsconfig.json
使用npm run build
命令编译、打包src/index.ts
文件:
D:\SPAProjects\webpacktypescript>npm run build
> webpacktypescript@1.0.0 build D:\SPAProjects\webpacktypescript
> webpack
Hash: 9bf0b33a5a6b242a917e
Version: webpack 4.6.0
Time: 1683ms
Built at: 2018-04-18 15:03:36
Asset Size Chunks Chunk Names
main.js 2.84 KiB main [emitted] main
Entrypoint main = main.js
[./src/index.ts] 35 bytes {main} [built]
在控制台窗口可以输入npm run build
指令进行打包时,项目中src
文件夹中的ts文件index.ts
被编译,并输出为 dist/main.js
。
QQ群:762080163
TypeScript + Webpack 4 开发环境搭建(转)的更多相关文章
- TypeScript完全解读(26课时)_1.TypeScript完全解读-开发环境搭建
1.TypeScript完全解读-开发环境搭建 初始化项目 手动创建文件夹 D:\MyDemos\tsDemo\client-demo 用VSCode打开 npm init:初始化项目 然后我们的项目 ...
- windows下vue+webpack前端开发环境搭建及nginx部署
一.开发环境搭建 1.前端框架一般都依赖nodejs,我们首先要安装node.js.请参考http://www.cnblogs.com/wuac/p/6381819.html. 2.由于许多npm的源 ...
- Windows 环境下vue+webpack前端开发环境搭建
一.开发环境搭建 1.前端框架一般依赖node.js,我们首先要安装node.js. 2.由于许多npm 的源都在国外的地址,安装起来特别慢,所以我们这里利用淘宝的镜像服务器. 安装命令为:npm i ...
- webpack前端开发环境搭建
要搭建webpack开发环境,首先要安装NodeJS,后面的过程均在NodeJS已经安装的基础上进行. 1. 首先建立一个工程目录,命名为,其目录结构如下: 其中dist目录用于存放生成的文件,src ...
- webpack+angular2开发环境搭建
升级版之webpack4 + angular5脚手架demo详见: http://www.cnblogs.com/xudengwei/p/8852257.html 刚搭建完一个webpack+angu ...
- React+Webpack+Webstorm开发环境搭建
需要安装的软件 node.js npm包管理 Webstorm 由于6.3.0版本之后会自带npm的包管理所以不需要单独的安装npm nodejs(包含npm)安装在默认路径C:\Program Fi ...
- 从零搭建TypeScript与React开发环境
前言 平时进行开发大多数是基于vue-cli或者create-react-app等官方或者公司内部搭建的脚手架. 我们业务仔做的最多就是npm i和npm run dev或者npm start,然 ...
- 第二章 TypeScript 开发环境搭建
Mac OS X 下 TypeScript 开发环境搭建 一.集成开发环境 WebStrom VSCode 二.安装 TypeScript Homebrew(macOS 缺失的软件包管理器) ruby ...
- typescript+react+antd基础环境搭建
typescript+react+antd基础环境搭建(包含样式定制) tsconfig.json 配置 // 具体配置可以看上面的链接 这里module moduleResolution的配置都会影 ...
随机推荐
- ElementUi中el-table分页效果
现实的场景中很经常遇到表格el-table数据过多,为了更好的用户体验,所以我们需要用到分页,一般分页可以视数据量的大小可分为前端控制和后端控制. 先看下效果(已做脱敏处理) 图1 前端el-tabl ...
- 一条简单的更新语句,MySQL是如何加锁的?
看如下一条sql语句: # table T (id )) delete : MySQL在执行的过程中,是如何加锁呢? 在看下面这条语句: : 那这条语句呢?其实这其中包含太多知识点了.要回答这两个问题 ...
- Cocos2d-x游戏实例《忍者飞镖》之对象管理
推荐移步至<忍者飞镖射幽灵>之对象管理阅读 配置环境:win7+Cocos2d-x.2.0.3+VS2012 目标读者:需了解游戏帧率以及回调函数的概念 一.引言 对具体游戏demo的分析 ...
- Unity3D 截取6面图 做全景图脚本
using System.Collections;using System.Collections.Generic;using UnityEditor;using UnityEngine; publi ...
- Centos 7.5私有域名服务器部署(coredns+etcd)
单机配置: 一.安装etcd: 1.安装 yum install etcd -y 2.启动 systemctl start etcd 3.设置开机启动 systemctl enable e ...
- 利用Haproxy搭建 HTTP 请求走私(Request smuggling)环境
Haproxy 介绍 HAProxy是一个使用C语言编写的自由及开放源代码软件,其提供高可用性.负载均衡,以及基于TCP和HTTP的应用程序代理. 请求走私(Request smuggling)概念证 ...
- nodejs攻略——第一章 配置
nodejs这玩意吧,我也是心血来潮的学习,所以啊.看这篇文章之前请大家有以下技能,如果没有..我不确定你能看得懂,毕竟我文采水平实在有限. 前置技能要求: c#或java 熟练+ JavaScrip ...
- 集合系列 Set(七):LinkedHashSet
LinkedHashSet 继承了 HashSet,在此基础上维护了元素的插入顺序. public class LinkedHashSet<E> extends HashSet<E& ...
- 阿里面试官:字符串在JVM中如何存放?90%的人就真的只回答在哪里存放
目录: 一道面试题的引出 案例分析 intern 源码分析 总结 1. 一道面试题的引出 在面试BAT这种一线大厂时,如果面试官问道:字符串在 JVM 中如何存放?大多数人能顺利的给出如下答案: 字符 ...
- 什么是DaemonSet
DaemonSet只管理Pod对象,通过nodeAffinity和Toleration两个调度器,保证每个节点上只有一个Pod 集群动态加入了新Node,DaemonSet中的Pod也会添加在新加入N ...