做平面素材比较好的网站海口手机网站制作

当前位置： 首页 > news >正文

做平面素材比较好的网站,海口手机网站制作,微信团购群网站怎样做,深圳聘请做网站人员Vite#xff08;发音为“veet”#xff09;是一个新的JavaScript绑定器。它包括电池#xff0c;几乎不需要任何配置即可使用#xff0c;并包括大量配置选项。哦——而且速度很快。速度快得令人难以置信。 本文将介绍将现有项目转换为Vite的过程。我们将介绍别名、填充webp…Vite发音为“veet”是一个新的JavaScript绑定器。它包括电池几乎不需要任何配置即可使用并包括大量配置选项。哦——而且速度很快。速度快得令人难以置信。 本文将介绍将现有项目转换为Vite的过程。我们将介绍别名、填充webpack的dotenv处理和服务器代理等内容。换句话说我们正在研究如何将一个项目从现有的bundler转移到Vite。如果你想开始一个新的项目你会想跳转到他们的文档。 长话短说CLI会询问您选择的框架——React、Preact、Svelte、Vue、Vanilla甚至lit-html——以及您是否想要TypeScript然后为您提供一个功能齐全的项目。 我们的用例 我们所看到的是基于我自己迁移booklist项目repo的webpack构建的经验。这个项目没有什么特别的地方但它相当大而且很旧而且非常依赖webpack。因此从这个意义上说这是一个很好的机会可以在我们迁移到Vite时看到一些更有用的配置选项。 我们不需要什么 使用Vite最令人信服的原因之一是它已经做了很多开箱即用的工作结合了其他框架的许多职责因此配置和约定的依赖性更少基线也更稳固。 所以与其从喊出我们需要开始的内容开始不如让我们回顾一下我们不需要的所有常见的网络包东西因为Vite免费给了我们。 静态资产加载 我们通常需要在webpack中添加这样的内容 {test: /.(png|jpg|gif|svg|eot|woff|woff2|ttf)\(/,use: [{loader: file-loader}] } 这将获取对字体文件、图像、SVG文件等的任何引用并将它们复制到dist文件夹中以便可以从新的捆绑包中引用它们。这是Vite的标准配置。 Styles 我在这里故意说“styles”而不是“css”因为有了webpack你可能会有这样的东西 {test: /\.s?css\)/,use: [MiniCssExtractPlugin.loader, css-loader, sass-loader] },// laternew MiniCssExtractPlugin({ filename: [name]-[contenthash].css }), …这允许应用程序导入CSS或SCSS文件。你会厌倦听我这么说的但Vite支持这一点。只要确保将Sass本身安装到您的项目中Vite将处理其余的工作。 模板转换/TypeScript 很可能您的代码正在使用TypeScript和/或非标准JavaScript功能如JSX。如果是这种情况您将需要转换代码以删除这些内容并生成浏览器或JavaScript解析器能够理解的普通旧JavaScript。在webpack中它看起来像这样 {test: /.(t|j)sx?\(/,exclude: /node_modules/,loader: babel-loader }, …用相应的Babel配置来指定适当的插件对我来说它看起来是这样的 {presets: [babel/preset-typescript],plugins: [babel/plugin-proposal-class-properties,babel/plugin-syntax-dynamic-import,babel/plugin-proposal-optional-chaining,babel/plugin-proposal-nullish-coalescing-operator] } 虽然我可能在几年前就停止使用前两个插件了但这并不重要因为正如我相信你已经猜到的那样Vite为我们做了这一切。它会获取你的代码删除任何TypeScript和JSX并生成现代浏览器支持的代码。 node_modules 令人惊讶的是webpack要求您告诉它从node_modules解析导入我们这样做 resolve: {modules: [path.resolve(./node_modules)] } 不出所料Vite已经做到了。 生产模式 我们在webpack中做的一件常见的事情是通过手动传递模式属性来区分生产环境和开发环境如下所示 mode: isProd ? production : development, …我们通常会这样推测 const isProd process.env.NODE_ENV production; 当然我们通过构建过程来设置环境变量。 Vite处理这一问题的方式有点不同它为我们提供了不同的命令来运行开发构建和生产构建我们很快就会了解这些命令。 文件扩展 冒着拖延这一点的风险我会很快注意到Vite也不要求您指定您正在使用的每个文件扩展名。 resolve: {extensions: [.ts, .tsx, .js], } 只要建立一个合适的Vite项目你就可以开始了。 支持 Rollup 插件 这是一个关键点我想在它自己的部分中指出。如果你在完成这篇博客文章时仍然需要在Vite应用程序中替换一些webpack插件那么试着找到一个等效的Rollup插件并使用它。你没有看错Rollup插件已经或者通常至少与Vite兼容。当然一些Rollup插件所做的事情与Vite的工作方式不兼容——但总的来说它们应该只是工作的。 详情请查看 使用插件 你的第一个Vite项目 请记住我们正在将现有的遗留webpack项目转移到Vite。如果你正在建造新的东西最好开始一个新的Vite项目然后从那里开始。也就是说我向您展示的初始代码基本上是从Vite从一个新项目中构建的代码复制而来的所以花点时间构建一个新的项目可能也是比较流程的好主意。 HTML入口 是的你没看错。Vite不是像webpack那样将HTML集成放在插件后面而是将HTML放在首位。它期望在JavaScript入口点上有一个带有脚本标记的HTML文件并从中生成所有内容。 以下是我们开始使用的HTML文件Vite希望将其称为index.html !DOCTYPE html html langenheadmeta charsetUTF-8 /titleThe GOAT of web apps/title/headbodydiv idhome/divscript typemodule src/reactStartup.tsx/script/body /html 请注意script标记指向/reactStartup.tsx。根据需要将其调整为您自己的条目。 让我们安装一些东西比如React插件 \) npm i vite vitejs/plugin-react types/node 我们还在项目目录中的index.html文件旁边创建以下vite.config.ts。 import { defineConfig } from vite; import react from vitejs/plugin-react;export default defineConfig({plugins: [react()] }); 最后让我们添加一些新的npm脚本 dev: vite, build: vite build, preview: vite preview, 现在让我们用npm运行的dev启动Vite的开发服务器。它速度快得令人难以置信可以根据请求逐步构建所需的内容。 但是不幸的是它失败了。至少现在是这样。 我们稍后将了解如何设置别名但现在让我们改为修改reactStartup文件或您的入口文件的名称如下所示 import React from react; import { render } from react-dom;render(divh1Hi there/h1/div,document.getElementById(home) ); 现在我们可以通过npm run-dev命令运行它并浏览到localhost:3000。 HMR热更新模块 现在开发服务器正在运行请尝试修改源代码。输出应该几乎立即通过Vite的HMR进行更新。这是维特最好的特点之一。当变化似乎立即反映出来而不是等待甚至是自己触发它们时它会让开发体验变得更好。 这篇文章的其余部分将介绍我为使用Vite构建和运行自己的应用程序所必须做的所有事情。我希望其中一些与您相关 Aliases(别名) 基于webpack的项目有这样的配置并不罕见 resolve: {alias: {jscolor: util/jscolor.js},modules: [path.resolve(./), path.resolve(./node_modules)] } 这在提供的路径中为jscolor设置了一个别名并告诉webpack在解析导入时同时查看根文件夹./和node_modules。这使我们可以进行这样的进口 import { thing } from util/helpers/foo …在组件树的任何位置假设在最顶部有一个util文件夹。 Vite不允许您提供整个文件夹来进行这样的解析但它允许您指定别名这些别名遵循与rollup/plugin-alias相同的规则 import { defineConfig } from vite; import react from vitejs/plugin-react;import path from path;export default defineConfig({resolve: {alias: {jscolor: path.resolve(./util/jscolor.js),app: path.resolve(./app),css: path.resolve(./css),util: path.resolve(./util)}},plugins: [react()] }); 我们添加了resolve.alias部分其中包括我们需要别名的所有条目。我们的jscolor-util被设置为相关模块并且我们的顶级目录有别名。现在我们可以从任何位置的任何组件导入app/、css/和util/。 请注意这些别名仅适用于导入的根例如util/foo。如果您的树中有其他util文件夹并且您使用以下内容引用它 import { thing } from ./helpers/util; ……那么上面的别名就不会搞砸了。这种区别没有很好的记录但您可以在Rollup别名插件中看到它。Vite的别名与相同的行为相匹配。 环境变量 Vite当然支持环境变量。它从开发中的.env文件或process.env中读取配置值并将它们注入到代码中。不幸的是事情的工作方式与你可能习惯的有点不同。首先它不能取代process.env。FOO但更重要的是.meta.env。FOO。不仅如此默认情况下它只替换前缀为VITE_的变量。所以import.meta.env。VITE_FOO实际上会被替换但不是我原来的FOO。可以配置此前缀但不能将其设置为空字符串。 对于遗留项目您可以将所有环境变量进行grep和替换以使用import.meta.env然后添加VITE_前缀更新.env文件并更新您使用的任何CI/CD系统中的环境变量。或者您可以配置更经典的替换process.env的行为。任何在开发中具有.env文件值的东西或在生产中具有真实进程.env值的东西。 方法如下。Vite的define功能基本上就是我们所需要的。这在开发过程中注册全局变量并为生产进行原始文本替换。我们需要进行设置以便在开发模式下手动读取.env文件在生产模式下手动阅读process.env对象然后添加适当的define条目。 让我们将所有这些构建到Vite插件中。首先运行npm i dotenv。 现在让我们来看一下插件的代码 import dotenv from dotenv;const isProd process.env.NODE_ENV production; const envVarSource isProd ? process.env : dotenv.config().parsed;export const dotEnvReplacement () {const replacements Object.entries(envVarSource).reduce((obj, [key, val]) {obj[process.env.\({key}] \){val};return obj;}, {});return {name: dotenv-replacement,config(obj) {obj.define obj.define || {};Object.assign(obj.define, replacements);}}; }; Vite设置process.env。NODE_ENV所以我们所需要做的就是检查一下看看我们处于哪种模式。 现在我们得到实际的环境变量。如果我们在生产中我们会获取process.env本身。如果我们在dev中我们要求dotenv获取我们的.env文件解析它并返回一个包含所有值的对象。 我们的插件是一个返回Vite插件对象的函数。我们将环境值注入到一个具有process.env的新对象中。在值前面然后我们返回实际的插件对象。有许多挂钩可供使用。不过在这里我们只需要配置挂钩它允许我们修改当前的配置对象。如果不存在定义条目则添加一个定义条目然后添加所有值。 但在继续前进之前我想指出我们正在解决的Vite环境变量限制是有原因的。上面的代码是捆绑器的频繁配置方式但这仍然意味着process.env中的任何随机值都会被卡在源代码中如果该键存在的话。那里存在潜在的安全问题所以请记住这一点。 代理配置 您部署的web应用程序是什么样子的如果它所做的只是提供JavaScript/CSS/HTML——实际上一切都是通过位于其他地方的独立服务进行的——那就太好了你实际上已经完成了。我给你看的应该就是你所需要的。Vite的开发服务器将根据需要为您的资产提供服务它会像以前一样ping您的所有服务。 但是如果你的网络应用程序足够小以至于你的网络服务器上正在运行一些服务该怎么办对于我正在转换的项目我在web服务器上运行了一个GraphQL端点。为了进行开发我启动了Express服务器它以前知道如何为webpack生成的资产提供服务。我还启动了一个webpack监视任务来生成这些资产。 但随着Vite推出自己的开发服务器我们需要启动Express服务器在Vite使用的端口之外的另一个端口上然后在那里对/graphql进行代理调用 server: {proxy: {/graphql: http://localhost:3001} }
这个消息告诉Vite对/graphql的任何请求都应该发送到http://localhost:3001/graphql. 请注意我们没有将代理设置为http://localhost:3001/graphql在配置中。相反我们将其设置为http://localhost:3001并依靠Vite将/graphql部分以及任何查询参数添加到路径中。 构建库 作为一个快速的奖励部分让我们简要讨论一下构建图书馆的问题。例如如果您只想构建一个JavaScript文件例如像Redux这样的库该怎么办。没有相关的HTML文件所以您首先需要告诉Vite要做什么 build: {outDir: ./public,lib: {entry: ./src/index.ts,formats: [cjs],fileName: my-bundle.js} } 告诉Vite将生成的捆绑包放在哪里称之为什么以及构建什么格式。请注意我在这里使用CommonJS而不是ES模块因为ES模块不会缩小截至本文撰写之时因为担心它可能会破坏树的抖动。 您可以使用vite构建来运行此构建。要启动监视并在更改时重建库您需要运行 $ vite build –watch 总结 Vite是一个令人难以置信的令人兴奋的工具。它不仅减轻了捆绑web应用程序的痛苦和眼泪而且在这个过程中大大提高了捆绑的性能。它附带了一个速度极快的开发服务器该服务器附带了热模块重新加载并支持所有主要的JavaScript框架。如果你做网络开发——无论是为了好玩这都是你的工作或者两者兼而有之–我再怎么强烈地推荐它也不为过。