工程化
文章平均质量分 93
卡列尼娜翠花
这个作者很懒,什么都没留下…
展开
-
一文学会 ts 构建工具 —— tsup
config 配置项可指定配置文件。})return {js: `.${return {.js`,},})| 'js'| 'jsx'| 'ts'| 'tsx'| 'css'| 'json'| 'text'| 'base64'| 'file'| 'binary'| 'copy'会发现上面没有图片的 loader,但我们可以指定 loader 去处理某些后缀的图片。原创 2024-04-20 21:53:14 · 1134 阅读 · 0 评论 -
理解按需自动导入 unplugin-auto-import & unplugin-vue-components
如果是自己开发的组件库,为了让它支持自动按需导入,就需要自己编写解析器。},],})resolvers 数组里可以传入一个函数,这个函数会在编译时不断执行。函数接收组件名,并返回一个和 unplugin-auto-import 插件中 imports 配置一样的配置对象,这个对象就是 import 语句的描述对象,最终依据它生成导入语句。注意:组件名会自动转成大驼峰写法。因此所谓的解析器,功能就是根据组件名映射成 import 导入语句。原创 2023-12-21 22:39:31 · 3396 阅读 · 3 评论 -
理解 webpack 的作用
*我们还是要必须明确一点,webpack 构建的是 js 文件,并且它的产物也是 js 文件。可是因为 webpack 默认只能解析 js 文件,所以 index.js 如果引入了其他文件,比如 css 文件,png 文件等等。打包入口 js 文件生成到出口文件夹中,其中 js 文件引入的其他类型文件,需要 loader 解析;没有使用构建工具的时候,我们将所有的东西,css,img,ttf 等都是在 js 文件中引入,被使用。由一到多,就是一个 js 文件生成了多个文件到出口文件夹中。原创 2023-03-19 00:15:00 · 281 阅读 · 0 评论 -
10分钟学会 webpack
webpack是一个静态的模块化打包工具,为现代的JavaScript应用程序。这些问题我们可以利用工具来处理,比如为了兼容就使用 Babel 转换 es6,ts 代码就使用 tsc 来转换。然后使用转换好的 js 引入 html 中。css 也一样。但是我们会发现,一个一个处理,这很麻烦,所以我们需要一个构建工具,可以帮助我们自动完成这些东西。webpack 就是一个这样的工具。原创 2023-03-18 00:15:00 · 429 阅读 · 0 评论 -
webpack 中配置 vue 环境
我们知道 vue 是一个渐进式框架,我们可以在项目中局部使用,并不侵犯其他代码。vue 最大的作用就是利用虚拟 dom 将开发者从操作 dom 的繁杂中解放出来,使得开发者可以更专注处理数据的逻辑。npm i vue然后我们能就在 webpack 的入口 js 中引入 vue,进行使用了。上面代码构建后执行,发现网页没有效果。为什么?这和引入的 vue js 文件有关。警告信息表示当前运行环境不支持 template 模块选项,建议我们手动导入包。原创 2023-03-17 09:00:00 · 361 阅读 · 0 评论 -
webpack 搭建本地开发服务器
在此之前的 webpack 配置是必不可少的。但是开发体验并不好,一直需要 npm run build 手动打包。我们希望可以做到,当文件发生变化时,可以自动的完成 编译 和 展示;原创 2023-03-17 04:02:00 · 351 阅读 · 0 评论 -
初识 Babel
事实上,在开发中我们很少直接去接触babel,但是babel对于前端开发来说,目前是不可缺少的一部分:开发中,我们想要使用ES6+的语法,想要使用TypeScript,开发React项目,它们都是离不开Babel的;所以,学习Babel对于我们理解代码从编写到线上的转变过程至关重要;那么,Babel到底是什么呢?原创 2023-03-17 04:00:05 · 120 阅读 · 0 评论 -
webpack 插件
Webpack的另一个核心是Plugin,官方有这样一段对Plugin的描述:上面表达的含义翻译过来就是:插件是一个独立的模块,所以要使用它们我就需要引入它们,并在 webpack.config.js 的 plugins 数组中进行实例化。CleanWebpackPlugin每次重新打包时,都需要手动删除dist文件夹:我们可以借助于一个插件来帮助我们完成,这个插件就是CleanWebpackPlugin;安装:当前打包后,我们是将生成的 js 文件手动引入到 html 文件中,这很不方便。我们的目标原创 2023-03-17 03:55:16 · 138 阅读 · 0 评论 -
5分钟学会 vite
为什么 vite 既用了 esbuild 又用了 rollup?esbuild 在开发阶段(vite dev)使用,主要用来预编译第三方依赖和编译业务代码里的 typescript 代码。esbuild 在抹平了第三方依赖的语法差异(第三方依赖不一定是 ESM 的语法)的同时,保证了 vite dev 的开发速度。rollup 只会在 vite build 的时候执行构建,主要是构建生产环境可稳定使用的包,依然使用 rollup 是因为 rollup 成熟稳定,具有大量优秀的插件。原创 2023-03-17 03:09:12 · 15304 阅读 · 0 评论