不同打包工具下的环境变量配置方式对比
不同打包工具下的环境变量配置方式对比前言在现代的JavaScript应用程序开发中，环境变量的配置是至关重要的。不同的应用场景和部署环境可能需要不同的配置，例如开发、测试和生产环境。最常见的需求是根据不同的环境，配置如是否开启sourceMap、API请求地址的切换、是否压缩代码等逻辑。本文主要介绍利用不同的工具：Webpack、Vite、Rollup打包项目的环境变量的配置方式。 process.env.NODE_ENVprocess.env.NODE_ENV应该是我们最熟悉的环境变量了，我们知道在Node环境中process是一个全局变量，无需require引入。process.env属性返回一个包含用户环境信息的对象,当我们打印process.env时，发现它并没有NODE_ENV这一个属性。实际上process.env.NODE_ENV是在package.json的scripts命令中注入的，可以通过以下方式进行设置： { "scripts": { "dev": "NODE_ENV=deve...
从零开发一款ChatGPT VSCode插件
引言OpenAI发布了ChatGPT，就像是给平静许久的互联网湖面上扔了一颗重磅炸弹，刹那间所有人都在追捧学习它。究其原因，它其实是一款真正意义上的人工智能对话机器人。它使用了深度学习技术，通过大量的训练数据和自监督学习方法进行训练，以模拟人类的对话能力和生成自然语言回应。日常生产、学习中利用好ChatGPT这个工具，是绝对能够提升我们工作效率的，这一点对于我们程序员来说，感受应该尤为明显。我们最常用的开发工具VSCode，已经有许多的插件集成了ChatGPT功能，这篇文章将从零开始，介绍这些插件的实现原理与思路，希望对你有所帮助。 基本需求实现一款可以跟ChatGPT对话的插件，可以通过一问一答的形式来进行对话，并且可以将我们选中的代码发送给ChatGPT，让其可以对代码进行优化。当然如果要访问ChatGPT，首先需要绑定我们在OpenAI后台申请的ApiKey. VSCode 插件基本配置首先简单介绍一下VSCode插件开发的基本流程 安装脚手架 npm install -g yo generator-code 然后cd到你的工作目录，运行yo code,根据向导一步步...
浅谈Vue3响应式原理与源码解读
一. 了解几个概念什么是响应式在开始响应式原理与源码解析之前，需要先了解一下什么是响应式？首先明确一个概念：响应式是一个过程，它有两个参与方： 触发方：数据 响应方：引用数据的函数 当数据发生改变时，引用数据的函数会自动重新执行，例如，视图渲染中使用了数据，数据改变后，视图也会自动更新，这就完成了一个响应的过程。 副作用函数在Vue与React中都有副作用函数的概念，什么是副作用函数？如果一个函数引用了外部的数据，这个函数会受到外部数据改变的影响，我们就说这个函数存在副作用，也就是我们所说的副作用函数。初听这个名字不太好理解，其实 副作用函数就是引用了数据的函数或是与数据相关联的函数。举个例子： <!DOCTYPE html> <html lang=""> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge">...
setState与useState使用注意项
一. 概述我们知道React支持两种形式来创建组件，一种是 class 组件，一种是函数组件。在 React16.8 推出之前，如果要为组件添加状态，那么只能使用 class 组件来实现，并通过 setState 来修改状态值，达到更新组件的目的。在 React16.8 推出 Hook 后，可以利用 useState 来为函数组件添加状态，这让我们的状态管理更加容易。 前端开发的核心在于状态管理，在实际项目开发中，特别是对新手React开发人员而言，对setState和useState Hook 的使用上仍有一些容易犯的错误和注意事项，在本文中，我们将探讨如何避免这些问题。 二. Class 组件中的 setState 的使用在 class 组件中添加一个构造函数constructor，然后在该函数中为 this.state赋初值添加状态. class ClassComponent extends Component { constructor(props) { super(props) this.state ...
使用useReducer + useContext 代替 react-redux
一. 概述在 React16.8推出之前，我们使用react-redux并配合一些中间件，来对一些大型项目进行状态管理，React16.8推出后，我们普遍使用函数组件来构建我们的项目，React提供了两种Hook来为函数组件提供状态支持，一种是我们常用的useState,另一种就是useReducer, 其实从代码底层来看useState实际上执行的也是一个useReducer,这意味着useReducer是更原生的，你能在任何使用useState的地方都替换成使用useReducer. Reducer的概念是伴随着Redux的出现逐渐在JavaScript中流行起来的,useReducer从字面上理解这个是reducer的一个Hook，那么能否使用useReducer配合useContext 来代替react-redux来对我们的项目进行状态管理呢？答案是肯定的。 二. useReducer 与 useContext1. useReducer在介绍useReducer这个Hook之前，我们先来回顾一下Reducer，简单来说 Reducer是一个函数(state, action...
GitHub Actions 自动部署前端 Vue 项目
一. 概述作为前端技术人员，如果要部署一个项目大体要经过：代码开发、代码推送、打包dist文件、scp到服务器、服务器nginx配置、完成部署这几个流程，现实中我们希望项目部署尽可能自动且简单，因此诞生了各种CI/CD工具，比如：Jenkins、gitlab ci、gitlab runner等，其实我们最熟悉的 GitHub 也提供了CI/CD 的能力：GitHub Actions,它于2019年11月正式发布，现已经支持多种的语言和框架：Node.js, Python, Java, PHP, Ruby, Go, Rust, C/C++, .NET, Android, iOS.当然在利用GitHub Actions自动部署项目之前，先要利用GitHub Pages来发布我们的前端项目。 二. GitHub Pages 什么是 GitHub Pages？官网的介绍：Websites for you and your projects.Hosted directly from your GitHub repository. Just edit, push, and you...
Vue3.2语法糖使用总结
一. 概述在Vue2时期，组件里定义的各类变量、方法、计算属性等是分别存放到data、methods、computed等选项里，这样编写的代码不便于后期的查阅，查找一个业务逻辑需要在各个选项来回切换。vue3.0组合式APIsetup函数的推出就是为了解决这个问题，它让我们的逻辑关注点更加集中，语法也更加精简，但是当我们在使用vue3.0的语法就构建组件的时候，总是需要把外面定义的方法变量必须要return出去才能在<template>，比较麻烦一些. vue3.2语法糖的出现以及一些新增的API，让我们的代码进一步简化。 什么是语法糖？语法糖（英语：Syntactic sugar）是由英国计算机科学家彼得·兰丁发明的一个术语，指计算机语言中添加的某种语法，这种语法对语言的功能没有影响，但是更方便程序员使用。语法糖让程序更加简洁，有更高的可读性。 Vue3.2语法糖来看下vue3.0与vue3.2的单文件组件（SFC，即.vue 文件）的结构对比 vue3.0组件 <template> <div> </div> ...
从Vuex到Pinia
一. 概述在开发Vue项目时，我们一般使用Vuex来进行状态管理，但是在使用Vuex时始终伴随着一些痛点。比如：需要使用Provide/Inject来定义类型化的InjectionKey以便支持TypeScript，模块的结构嵌套、命名空间以及对新手比较难理解的流程规范等。Pinia的出现很好的解决了这些痛点。本质上Pinia也是Vuex团队核心成员开发的，在Vuex的基础上提出了一些改进。与Vuex相比，Pinia去除了Vuex中对于同步函数Mutations和异步函数Actions的区分。并且实现了在Vuex5中想要的大部分内容。 二.使用在介绍Pinia之前我们先来回顾一下Vuex的使用流程 1.VuexVuex是一个专为Vue.js应用程序开发的状态管理库。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。它主要用来解决多个组件状态共享的问题。 主流程： 在Store中创建要共享的状态state，修改state流程：Vue Compontents dispatch Actions(在Actions中定义异步函数)，Action...
iOS-多线程使用总结
一.概述与实现方案1. 线程与进程多线程在iOS中有着举足轻重的地位，是每一位开发者都必备的技能，当然也是面试常考的技术点，本文主要是探究我们实际开发或者面试中遇到的多线程问题。比如什么是线程？它跟进程是什么关系，队列跟线程什么关系，同步、异步、并发（并行）、串行这些概念又怎么来理解，iOS有哪些常用多线程方案，以及线程同步技术有哪些等等。 线程（英语：thread）是操作系统能够进行运算调度的最小单位。大部分情况下，它被包含在进程之中，是进程中的实际运作单位。一条线程指的是进程中一个单一顺序的控制流，一个进程中可以并发多个线程，每条线程并行执行不同的任务。 — 维基百科 这里又多了一个 进程,那什么是进程呢,说白了就是是指在操作系统中正在运行的一个应用程序，如微信、支付宝app等都是一个进程。线程是就是进程的基本执行单元，一个进程的所有任务都在线程中执行。也就是说 一个进程最少要有一个线程，这个线程就是主线程。当然在我们实际使用过程中不可能只有一条主线程，我们为提高程序的执行效率，往往需要开辟多条子线程去执行一些耗时任务，这里就引出了多线程的概念。 多线程（英语：m...
前端Vue入门总结
一. 概述在目前的互联网大环境下，如果只有一门技术傍身，不足以胜任市场对研发的要求，于是想学习大前端技术栈。笔者接触前端是从开发微信小程序开始的，它的数据双向绑定机制，让写习惯了客户端的我叹为观止。目前我入门前端的技术路径是：客户端—微信小程序—混合AppH5开发—Web前端。一些我自己的经验总结出来，希望对你有所帮助。当然阅读这篇文章的前提是，你已经了解了基本的Html、CSS、JS语法。 二. 环境与工具1. 前端环境搭建 笔者使用的Mac电脑，所有的环境搭建工作都是基于Mac电脑来操作的。首先安装node.js与npm: node.jsnode 是一个基于 V8 引擎的 Javascript 运行环境，它使得 Javascript 可以运行在服务端，直接与操作系统进行交互，与文件控制、网络交互、进程控制等。简单的说node.js就是运行在服务端的 JavaScript。你可能会有疑问，我写前端页面为甚么需要一个运行在服务端的的JS环境。其实我们这里使用node最关键是需要安装npm. npmnpm是node.js的包管理工具（package manager），为啥我们需...