时间:2021-05-25
本文介绍了Vue快速零配置的打包工具——parcel,分享给大家,具体如下:
特性
如何工作
Parcel 将 资源 树转换成 包(bundles) 树。许多其它的打包工具基本上是基于 JavaScript 资源,还有附加在其上的其它格式的资源。例如,在 JS 文件中内联成字符串。 Parcel是对文件类型无感知的,它能按你所期待的方式那样与任意类型的资源工作,且毋须配置。
构建资源树
Parcel 接受单个入口资源作为输入,可以是任意类型:JS、HTML、CSS、图片文件等等。在 Parcel 中定义了许多不同的资源类型,它知道如何去处理特定的文件类型。资源会被解析,资源的依赖会被提取,资源会被转换成最终编译好的形态。此过程创建了一个资源树。
构建文件束树
一旦资源树被构建好,资源会被放置在文件束树中。首先一个入口资源会被创建成一个文件束,然后动态的 import() 会被创建成子文件束 ,这引发了代码的拆分。当不同类型的文件资源被引入,兄弟文件束就会被创建。例如你在 JavaScript 中引入了 CSS 文件,那它会被放置在一个与 JavaScript 文件对应的兄弟文件束中。如果资源被多于一个文件束引用,它会被提升到文件束树中最近的公共祖先中,这样该资源就不会被多次打包。
打包
在文件束树被构建之后,每个文件束都会被 packager 写到一个特定文件类型的文件中。packagers 知道如何从每个资源中将代码合并起来,生成到最终被浏览器加载的文件中。
配置
初始化项目
转换
Babel
根目录配置.babelrc
PostCSS
npm install postcss-modules autoprefixer --save-dev根目录配置.postcssrc
支持vue
添加entry
配置index.html
配置路由(代码拆分--懒加载)
import()返回的是一个promise,所以也可以用 async/await 语法,当你想在本地使用 async/await 语法,请引入 babel-polyfill
区分生产环境和开发环境,配置package.json.
dev --- 开发环境
build --- 生产环境
大功告成
访问http://localhost:3700/home
此demo是vue + parcel + grid +stylus完成 : parcel-vue
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
parcel-vue一个基于Parcel打包工具的VueJS急速开发脚手架解决方案,强烈建议使用node8.0以上项目地址:https://github.com
提到前端打包工具,毫无疑问想先到的是webpack。但是前端发展地很快,时不时会有新东西出现,打包工具这边之前也出现parcel和rollup。各种工具的碰撞,
一.常见打包工具的介绍在打包工具中,常见的有RequireJS,browserify,webpack,其中RequireJS是一个JavaScript模块加载器
前言项目发布总需要根据具体情况配置打包,AngularCLI提供了方便的打包工具“ngbuild”。其中关于发布路径的配置有几样,这里总结汇总它们。base-h
Androidaapt自动打包工具概念在Android.mk中有LOCAL_AAPT_FLAGS配置项,在gradle中也有aaptOptions,那么aapt