随笔分类 - 前端构建工具
摘要：第1步：最简单使用 创建一个空项目 webpack-demo，安装 webpack 依赖 npm install --D webpack webpack-cli 接着，我们在项目中创建文件 src/index.js，内容如下 console.log('哈哈') 最后我们运行，npx webpack,
阅读全文
摘要：打开VScode，按Ctrl + H 打开替换框，切换正则模式 单行注释： //[\s\S]*?\n 多行注释：/\*(.|\r\n|\n)*?\*/ 所有注释：\/\*[\s\S]*\*\/|\/\/.* html 注释：<!--(.*?)--> html 有换行注释：<!--([\s\S|\r]
阅读全文
摘要：什么是抽象语法树 抽象语法树 Abstract Syntax Tree 简称AST，是源代码语法结构的一种抽象表示。 比如 const a = 123; ，用ast可以表示为 ast json表示为 { "type": "Program", "start": 0, "end": 14, "body"
阅读全文
摘要：一、兼容性问题的产生 随着时间的推移，es6及其更高版本的'新版js'语法逐渐普及使用开来。 不像后端一样，只需要升级一台掌握在开发者手中的设备（服务器），就万事大吉。 由于客户端浏览器掌握在用户手中，他们拿老的浏览器访问我们新版的语法，代码自然是运行不起来，也就产生了前端颇为头痛的‘兼容’问题。
阅读全文
摘要：关于注释问题 注释规遵循jsDoc 类注释（多行注释） /** * 工具类 * @author 丁少华 * @date 2020-01-01 08:00:00 */ 方法注释（多行注释） /** * 用于xxx * @param {string} uid - 用户id * @return {User
阅读全文
摘要：一、编译 编译命令 直接cmd下执行webpack 即可，但是配置成为node项目，就可以使用npm的快捷脚本了， 那么我再提供一个在npm下好用的script命令（只支持windows） "scripts": { "build":"PowerShell.exe rm ./dist/* && web
阅读全文
摘要：window 命令使用 找打chrome安装的位置， 默认在 C:\Program Files\Google\Chrome\Application 然后无头启动 ./chrome.exe --headless --remote-debugging-port=9222 https://www.baid
阅读全文
摘要：熟悉vue的同学，肯定知道有.env或env.development类似于这样的配置文件来定义app的全局变量。那么这是如何实现的呢？如果我没用vue，比如我用的react或者纯手工的webpack项目。我怎么去实现这个功能呢？以下详细描述，也是vue支持配置文件的原理。 如何向应用注入全局变量？
阅读全文
摘要：amd require.js， 依赖前置，预先下载，立即执行 index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-w
阅读全文
摘要：掉落神坛的webpack webpack诞生之初的根本原因就是处理前端js模块化的工具。 如果浏览器本身慢慢的已经支持了模块化。 那么webpack存在的意义就不大了。 webpack的其它瑕疵 在wp中，哪怕是一行代码，最终也会budle成特别冗长的大文件。 因为编译后的代码包含有关于模块化方案的
阅读全文
摘要：Windows PowerShell 版权所有 (C) Microsoft Corporation。保留所有权利。 尝试新的跨平台 PowerShell https://aka.ms/pscore6 PS C:\Users\admin> hello hello world在使用vue-cli的过程中
阅读全文
摘要：忽略上传文件 两种办法： 办法一 .npmignore 这个文件类似于.gitignore 将需要忽略的文件或目录书写其中，如 src/ 办法二 在packge.json中 这个目录声明用于需要上传的文件列表 "files": [ "dist", "types" ]
阅读全文
摘要：这是官方文档 这是效果 开通Giscus Giscus是github的一个功能，用了专门存放评论的功能。需要依托一个仓库。 我这里就拿我这个当前vuepress项目开开通。 Settings>Features>Discussions 获取Giscus信息 进入此网站，获取信息 在你的vuepress
阅读全文
摘要：前提 两者都很强大，但是两者结合，存在问题，目前网上无解。 以下两种版都需要在index.html 即入口页面添加一个元素 <body> <div id="root"></div> <div hidden id="mermaidSvg"></div> </body> 解决办法1 写一个拦截器即可 c
阅读全文
摘要：前言 随着业务的增长和开发团队的成员快速增加，其中很多新人来自于五湖四海各大门派，在编码的风格和习惯中也出现各异。 通常在相互 codereview 时发现很多代码上的问题，久而久之代码出现了代码难以维护的问题，甚至还会出现低级错误。 因此，我尝试在前端代码质量的管控上做了些探索 相信编码规范对于大
阅读全文
摘要：问题描述 今天提交代码的时候，控制台报的错误就有点吓人 分析问题 由于历史原因，windows下和linux(mac)下的文本文件的换行符不一致。 当我用windows电脑git操作代码的时候，如clone、提交，git会默认会将文件每行会被自动转成以CRLF结尾，这就导致了eslint的规则错误。
阅读全文
摘要：前言 在使用taro ui时候报错如下 > Executing task: yarn run dev:weapp < yarn run v1.22.17 $ npm run build:weapp -- --watch > turntable@1.0.0 build:weapp > taro bui
阅读全文
摘要：先看提速效果 上图：使用默认设置（包括缩小和源映射）从头开始制作包含 10 个three.js库副本的生产包的时间。更多信息在这里。 我们当前用于 Web 的构建工具比esbuild速度可能慢 10-100 倍。esbuild bundler 项目的主要目标是开创一个构建工具性能的新时代，并在此过程
阅读全文
摘要：简介 用的自动化部署的工具，IntelliJ 家的产品teamcity对内存要求及高，我的1gb的内存就出现了“TeamCity服务器正在遇到内存不足的问题。内存清理花费了超过50％的时间。可用的296 MB总可用空间为989.8 MB。有关可能的解决方案，请参见TeamCity 文档。”所以不建议
阅读全文
摘要：动机 以前写ts或者es6，都是用在脚手架搭建的项目中，比如vue和react，当时当我识图写一个ts的demo的，我还要创建一个完整的vue或者react项目？明显不合适，那就要研究一下如何手动搭建一套编译调试环境源代码src/index.ts 方案1：tsc编译+手动做垫片+webpack处理模
阅读全文
