本文介绍了如何通过 TypeScript 和 webpack 创建 Web 应用程序。我们仅使用 DOM API,而不使用特定的前端框架。源码文件 ts-demo-webpack 可以从 GitHub 下载(https://github.com/rauschma/ts-demo-webpack)。
虽然我们也可以在TypeScript中文网的练习平台写,直接看对比编译出来的JS代码,但是实际看代码运行结果还是需要点击运行按钮,去到新页面,再打开控制台。
笔者两年前曾写过一篇文章《Webpack4 搭建 Vue 项目》,后来随着 webpack5 和 vue3 的面世,一直想升级下我这个 createVue 项目,但是苦于没有时间(其实是因为懒),一直拖延至今。捣鼓了好几天,终于搭建好整个项目,因此仅以此文记录升级搭建的过程。
只要接触过ts的前端同学都能回答出ts是js超集,它具备静态类型分析,能够根据类型在静态代码的解析过程中对ts代码进行类型检查,从而在保证类型的一致性。那,现在让你对你的webpack项目(其实任意类型的项目都同理)加入ts,你知道怎么做吗?带着这个问题,我们由浅入深,逐步介绍TypeScript、Babel以及我们日常使用IDE进行ts文件类型检查的关系,让你今后面对基于ts的工程能够做到游刃有余。
安装webpack、webpack-cli、webpack-dev-server、ts-loader、typescript、html-webpack-plugin
使用babel7并且使用@babel/preset-typescript代替ts-loader。一方面,babel7拥有着更快的速度,另一方面,ts-loader默认是会读取ts-config的,于是每次构建的时候ts-loader都会去检查全有业务的类型(即使我们只打包a业务)。
https://github.com/TypeStrong/ts-loader/blame/1b84fed767c0fbb41f3da8c8700fc21d69fda3d3/src/index.ts#line=185
https://segmentfault.com/q/1010000024459339
webpack在前端的应用越来越广泛,似乎不少人对webpack的了解似乎并不是特别深入,所以需要花点时间去了解一些webpack的内容,先从loader说起。
初始化一个自动打包和自动加载最新 JS 代码的 webpack 项目,然后在通过 tsc --init 初始化 TypeScript 配置文件:
yarn add -D webpack webpack-cli 或者npm install -D webpack webpack-cli
loader 用于对模块的源代码进行转换。loader 可以使你在 import 或"加载"模块时预处理文件。因此,loader 类似于其他构建工具中“任务(task)”,并提供了处理前端构建步骤的强大方法。loader 可以将文件从不同的语言(如 TypeScript)转换为 JavaScript,或将内联图像转换为 data URL。loader 甚至允许你直接在 JavaScript 模块中 import CSS文件!
最近在团队推行ts,顺便将webpack做了升级,升级到最新的4.X版本,下面记录一些迁移指南。
不过大概了解了一点内容。感觉webpack一个打包工具非常类似于一个编译器,将一个文件,转换为另外一个文件。
最近在学习typescript,也就是我们常说的TS,它是JS的超集。具体介绍就不多说了,今天主要是带大家用webpack从零搭建一个TS开发环境。直接用传统的tsc xx.ts文件进行编译的话太繁琐,不利于我们开发,经过这次手动配置,我们也能知道vue3内部对TS的webpack进行了怎样的配置,废话不多说进入正题。
我们在 RudderStack 使用的开发方式之一是安全快速地构建,然后根据需要进行优化,这种模式使我们能够优先考虑客户问题,跟上 RudderStack 的快速增长的脚步。
相信很多前端的朋友都知道webpack是什么,webpack 是一个模块打包器。它的主要目标是将 JavaScript 文件打包在一起,打包后的文件用于在浏览器中使用。
最近发现项目(基于Vue2)构建比较慢, 一次上线发布需要 15 分钟, 效率低下。
在上一篇中根据一切皆模块的思想,学习了解了loader:概述、引入、配置及使用。本篇接着上篇的话题,讲述常用loader。
条件编译: 用同一套代码和同样的编译构建过程,根据设置的条件,选择性地编译指定的代码,从而输出不同程序的过程
TypeScript 是 JavaScript 的超集,通过类型注解提供编译时的类型检查,能够有效提升代码的可维护性。
首先找到文档:https://www.tslang.cn/samples/index.html
在打工过程中,非常耗时的一个工作是使用loader将各种资源进行转译处理,例如常见的使用babel-loader将ES6+语法代码转译为ES5等。代码转移的工作流程如下:
tsconfig.json是typescript编译器的配置文件,需要虽然不指定也能run,但是要配合webpack用起来顺心的话,是必须要配置的。
今天给大家介绍社区当中一个 webpack 的流式配置方案——webpack-chain,这个方案现在已经在我目前所在的团队落地,且带来了一些正向的收益,现在就这个方案出现的背景、核心概念及日常使用姿势给大家展开介绍。
写 react 项目的小伙伴应该都用过 antd 组件库,但绝大多数同学并没有看过它的源码。
angularjs是一个非常老的框架,如果你准备用angular启动新项目,完全可以使用angular而不是angularjs。
在开始前,需要先了解webpack中的四个核心概念:入口(entry)、输出(output)、loader、插件(plugins)。
之前本地构建时间挺长的,初次启动要三次分钟, 后面我配置了 Vite, 本地启动时间降低到了 20s 左右,感兴趣的可以移步我这篇文章:
'cheap-module-eval-source-map'是官方推荐的一个配置项,其中module会定位到TS的源码而不是编译后的js源码。
TS:以JavaScript为基础构建的语言;可以在如何支持JavaScript的平台中执行;一个JavaScript的超集,TypeScript扩展了JavaScript,并添加了类型;TS不能被JS解析器直接执行。
TypeScript是一种由微软开发的自由和开源的编程语言。作为JavaScript的一个超集,添加了可选的静态类型和基于类的面向对象编程。
安装webpack 和 webpack-cli 到项目开发依赖,这里我选择的版本是最新版本。
webpack5中通过使用 webpack-dev-server 插件,配置 devServer 来浏览器启动页面,对于单页面,我们可以直接配置打开首页,多页面,可以配置打开一个文件目录,选择各个页面的目录
本周精读的是 webpack4.0 一些变化,以及 typescript 该怎么做才能最大化利用 webpack4.0 的所有特性。
笔者将介绍两种方式进行构建 React TS3 ( TypeScript3 简称,后面的内容都会以简称出现),分别为使用 create-react-app 进行快速构建 和 手工方式构建。
目前Web实现矢量渲染的主流技术包括SVG、VML和WebGL。相对而言,VML是一种较古老的技术,虽然未成为W3C标准,但被早期的IE浏览器(IE9以下)和微软Office广泛使用,目前已经远离了浏览器战场。所以可供选择的仅剩SVG和WebGL。SVG是XML的一个子集,秉承了一个标签对应一条数据的原则,目前经常被使用于数据量较小的web项目,比如图表和地铁图。Web矢量地图的数据量非常庞大,举个例子,如下图所示的一个512px*512px的瓦片,其数据量是一个接近5位数的二维数组。而这个瓦片仅仅是最简单的大陆和海洋轮廓,同尺寸街道图的数据量更加庞大。
webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时,它会递归地构建一个依赖关系图(dependency graph),其中包含应用程序需要的每个模块,然后将所有这些模块打包成一个或多个 bundle。 需要先理解四个核心概念: 入口(entry) 输出(output) loader 插件(plugins) 入口(entry) 入口指 webpack 构建其内部依赖图开始的模块。进入入口后,webpack 会找出有哪些
在前面两篇内容,我们一起从0开始部署了一个跨平台的APP编译以及运行,那么我们该如何编写属于我们自己的APP呢?它又是用什么语言来开发的呢?
webpack 常规配置如下(entry、output、loader、plugin、mode)
在去年的这个时候,本骚年还在被Grunt和Gulp以及各种Requirejs、Seajs团团围住攻击,狼狈不堪。后面认识了Webpack之后,基本所有项目框架都拿它来构建了。
如果我们有一个简单的JavaScript模块utils.js,它包含一个函数用于计算两数之和:
1.commonjs只会对require的代码执行一次 之后的require只会直接取其导出值 2.es6 Module动态映射,CommonJs是值拷贝,前者可以支持一定程度的循环依赖,需要由开发保证导入时,已经设置好正确的导出值 3.通过单独加载包内的单独文件,从而减小打包体积 4.当第三方依赖较多时,我们可以用提取vendor的方法将这些模块打包到一个单独的bundle中,以更有效地利用客户端缓存,加快页面渲染速度。 5.webpack指定生成目录: webpack.config.js:配置output的path 6.与loader相关的配置都在module对象中,其中module.rules代表了模块的处理规则 7.两个一般一起使用: css-loader:处理css的加载语法 style-loader:将css插入页面 8.在Webpack中,我们认为被加载模块是resource,而加载者是issuer,可以配置哪个js可以加载css rules: [ { test: /.cssKaTeX parse error: Can't use function '\.' in math mode at position 119: … test: /\̲.̲js/, include: /src/pages/, }, } ], 9.enforce可以强制指定loader的执行顺序,分四种: normal:直接定义的默认 pre:代表它将在所有正常loader之前执行 post:和pre相反,代表它需要在所有loader之后执行 inline :webpack不推荐使用
还在为webpack的配置而烦恼吗?这里有一份webpack从简易到高级版本的配置。还附赠配置地址,你想要吗?不,你不想。老老实实自己配置去吧。
注意: webpack 5 要求至少 Node.js 10.13.0 (LTS)
翻译:疯狂的技术宅 原文:https://medium.com/@freek_mencke/how-to-write-node-js-applications-in-typescript-a54af696f66
lib用于指定要包含在编译中的库文件 “lib”:[ “es6”, “dom” ],
这些年,前端发生了颠覆性的变革,这种变化极大地改变了前端的生态,前端从很多年前一个不起眼的角色跨步式的演变为一个不可或缺的存在。
main.js改成main.ts配置vue.config.js的入口为main.ts
领取专属 10元无门槛券
手把手带您无忧上云