Typescript + TSLint + webpack 搭建 Typescript 的开发环境
let a: number = ;
const h1 = document.createElement("h1");
h1.innerHTML = "Hello, I am Lison";
document.body.appendChild(h1);
index.html
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>TS-Learning</title>
</head> <body></body> </html>
package.json
{
"name": "client-side1",
"version": "1.0.0",
"description": "",
"main": "./src/index.ts",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "cross-env NODE_ENV=development webpack-dev-server --mode=development --config build/webpack.config.js",
"build": "cross-env NODE_ENV=production webpack --mode=production --config ./build/webpack.config.js"
},
"author": "zxw",
"license": "ISC",
"dependencies": {
"cross-env": "^5.2.0",
"typescript": "^3.5.3"
},
"devDependencies": {
"clean-webpack-plugin": "^3.0.0",
"html-webpack-plugin": "^3.2.0",
"ts-loader": "^6.0.4",
"webpack": "^4.39.1",
"webpack-cli": "^3.3.6",
"webpack-dev-server": "^3.7.2"
}
}
webpack.config.js
const HtmlWebpackPlugin = require("html-webpack-plugin");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
module.exports = {
// 指定入口文件 // 这里我们在src文件夹下创建一个index.ts
entry: "./src/index.ts", // 指定输出文件名
output: { filename: "main.js" },
resolve: {
// 自动解析一下拓展,当我们要引入src/index.ts的时候,只需要写src/index即可
// 后面我们讲TS模块解析的时候,写src也可以
extensions: [".tsx", ".ts", ".js"]
},
module: {
// 配置以.ts/.tsx结尾的文件都用ts-loader解析 // 这里我们用到ts-loader,所以要安装一下
// npm install ts-loader -D
rules: [{ test: /\.tsx?$/, use: "ts-loader", exclude: /node_modules/ }
]
},
// 指定编译后是否生成source-map,这里判断如果是生产打包环境则不生产source-map devtool: process.env.NODE_ENV === "production" ? false : "inline-source-map", // 这里使用webpack-dev-server,进行本地开发调试
devServer: { contentBase: "./dist", stats: "errors-only", compress: false, host: "localhost", port: },
// 这里用到两个插件,所以首先我们要记着安装
// npm install html-webpack-plugin clean-webpack-plugin -D
plugins: [
// 这里在编译之前先删除dist文件夹
new CleanWebpackPlugin({ cleanOnceBeforeBuildPatterns: ["./dist"] }),
// 这里我们指定编译需要用模板,模板文件是./src/template/index.html,所以接下来我们要创建一个index.html文件
new HtmlWebpackPlugin({ template: "./src/template/index.html" })] };
项目的总体目录:
仓库:
https://gitee.com/guangzhou110/lingjichuxuetoutypescript.git
Typescript + TSLint + webpack 搭建 Typescript 的开发环境的更多相关文章
- webpack搭建vue项目开发环境【文档向学习】
为何有这篇文章 各个社区已经有无数篇帖子介绍如何使用webpack搭建前端项目,但无论是出于学习webpack的目的还是为了解决工作实际需要都面临着一个现实问题,那就是版本更新.别人的帖子可能刚写好版 ...
- 从零开始搭建react基础开发环境(基于webpack5)
前言 最近利用闲暇时间把webpack系统的学习了下,搭建出一个react环境的脚手架,写篇文章总结一下,帮助正在学习webpack小伙伴们,如有写的不对的地方或还有可以优化的地方,望大佬们指出,及时 ...
- 手把手教你用webpack3搭建react项目(开发环境和生产环境)(一)
开发环境和生产环境整个配置源码在github上,源码地址:github-webpack-react 如果觉得有帮助,点个Star谢谢!! (一)是开发环境,(二)是生产环境. 一.首先创建packag ...
- 利用webpack搭建的前端工程化环境
随着webpack3.x的发布,其功能也越来越强大,很多的项目的编译打包工具也由gulp逐渐转移到webpack.最近因为项目重构考虑使用使用vue,同时想从原来的gulp切换到webpack,所以搭 ...
- 搭建Vue2.0开发环境
1.必须要安装nodejs 2.搭建vue的开发环境 ,安装vue的脚手架工具 官方命令行工具 npm install --global vue-cli / cnpm install --global ...
- 前端开发 Vue -1windows环境搭建Vue Node开发环境
解决几个疑问: 想学习下vue.js,我理解的它是一个前端的框架,主要作用是对数据的处理,和juqery类似,所以不太理解为什么要在nodejs中npm install vue呢?在html文件中引入 ...
- 用grunt搭建web前端开发环境
1.前言 本文章旨在讲解grunt入门,以及讲解grunt最常用的几个插件的使用. 2.安装node.js Grunt和所有grunt插件都是基于nodejs来运行的,如果你的电脑上没有nodejs, ...
- [webpack] 配置react+es6开发环境
写在前面 每次开新项目都要重新安装需要的包,简单记录一下. 以下仅包含最简单的功能: 编译react 编译es6 打包src中入口文件index.js至dist webpack配置react+es6开 ...
- Windows下搭建Spark+Hadoop开发环境
Windows下搭建Spark+Hadoop开发环境需要一些工具支持. 只需要确保您的电脑已装好Java环境,那么就可以开始了. 一. 准备工作 1. 下载Hadoop2.7.1版本(写Spark和H ...
随机推荐
- eclipse jshint安装
http://www.cnblogs.com/lhb25/archive/2012/04/05/javascript-validation-with-jshint-eclipse.html
- EventBus和Otto第三方构架
代码 添加依赖:implementation 'org.greenrobot:eventbus:3.0.0'1注册并声明订阅者,然后发布事件最后解除注册 @Override protected voi ...
- 《SQL Server 2012 T-SQL基础》读书笔记 - 3.联接查询
Chapter 3 Joins Cross Joins(交叉联接)就是返回两个表的笛卡尔积(m行的表cross join一个n行的表得到一个m * n行的结果),它有两种标准SQL语法,第一种: SE ...
- 5个用/不用GraphQL的理由
我在如何使用Gatsby建立博客 / How to build a blog with Gatsby这篇文章中提过GraphQL在Gatsby中的应用.总的来讲,它是一个新潮的技术,在适宜的使用场景威 ...
- leetcode 39. 组合总和(python)
给定一个无重复元素的数组 candidates 和一个目标数 target ,找出 candidates 中所有可以使数字和为 target 的组合. candidates 中的数字可以无限制重复被选 ...
- 【运维相关】MongoDB那些坑
前言 某个早期技术债务项目线上有一个mongoDB服务,用途很简单,存一些文件而已.不过用户那边突然报个bug说上边的图片丢失了,起初没当回事认为是代码遇到错了,直到后来看了用户详细的bug复现后,登 ...
- springmvc 读写分离
推荐第四种:https://github.com/shawntime/shawn-rwdb 4种不方的读写分离实现方法 http://blog.csdn.net/lixiucheng005/artic ...
- 阶段1 语言基础+高级_1-3-Java语言高级_1-常用API_1_第6节 static静态_15_静态代码块
static的特殊用法, 静态代码块 加上构造方法,做测试 又创建一个对象 静态代码块 只执行一次 后续在学习jdbc的时候,静态代码块很有用途.
- 阶段1 语言基础+高级_1-3-Java语言高级_02-继承与多态_第4节 多态_15_多态的概述
不是多种状态,而是有多种形态 继承是多态的前提 子类就是一个父类.学生就是一个人 多态性说的是这个对象.
- 修改JAVA_HOME失效
在修改JDK的安装目录的情况下会出现失效的时候,因为jdk在安装的时候自己在path中添加了 C:\ProgramData\Oracle\Java\javapath 这个路径. 解决: 删除 path ...