详解Vue快速零配置的打包工具,包裹 - 行业资讯 - 肥雀云

本文介绍了Vue快速零配置的打包工具,包裹分享给大家,具体如下:

<>强特性

　　<李>快速打包李　　<李>打包所有资源李　　<李>自动转换李　　<李>代码拆分　　<李>模块热替换李　　<李>友好的错误记录　　　　

<>强如何工作
　　

包裹将资源树转换成包(包)树。许多其它的打包工具基本上是基于JavaScript资源,还有附加在其上的其它格式的资源,例如,在JS文件中内联成字符串。包裹是对文件类型无感知的,它能按你所期待的方式那样与任意类型的资源工作,且毋须配置。
　　

构建资源树
　　

包裹接受单个入口资源作为输入,可以是任意类型:JS, HTML, CSS,图片文件等等。在包裹中定义了许多不同的资源类型,它知道如何去处理特定的文件类型。资源会被解析,资源的依赖会被提取,资源会被转换成最终编译好的形态。此过程创建了一个资源树。
　　

构建文件束树
　　

一旦资源树被构建好,资源会被放置在文件束树中,首先一个入口资源会被创建成一个文件束,然后动态的进口()会被创建成子文件束,这引发了代码的拆分。当不同类型的文件资源被引入,兄弟文件束就会被创建,例如你在JavaScript中引入了CSS文件,那它会被放置在一个与JavaScript文件对应的兄弟文件束中。如果资源被多于一个文件束引用,它会被提升到文件束树中最近的公共祖先中,这样该资源就不会被多次打包。
　　

打包
　　

在文件束树被构建之后,每个文件束都会被包装机写到一个特定文件类型的文件中.packagers知道如何从每个资源中将代码合并起来,生成到最终被浏览器加载的文件中。
　　

<>强配置

初始化项目
　　

　　　　　　npm安装- g包裹　　mkdir xxx,,cd xxx,,npm init - y 　　　　

转换
　　

巴别塔
　　

　　　　　　npm安装babel-preset-env——save-dev 　　　　

根目录配置。babelrc
　　

　　　　　　{ 　　“预设”(“env”): 　　} 　　　　

PostCSS 　　　　　　npm安装postcss-modules autoprefixer——save-dev 　　　　

根目录配置。postcssrc
　　

　　　　　　{ 　　“模块”:没错, 　　"插件":{ 　　" autoprefixer ": { 　　“网格”:真的　　} 　　} 　　} 　　　　vue

支持　　

　　　　　　npm安装parcel-plugin-vue——save-dev 　　之前　　　　

添加条目
　　

　　　　　　导入应用程序从“/App.vue。” 　　从“进口路由器。/路由器/index.js” 　　进口的。/资产/js/rem.js” 　　窗口。onload=()=比;{ 　　const vm=new Vue ({ 　　埃尔:“#应用”, 　　路由器, 　　呈现:h=比;h(应用) 　　}）　　} 　　之前　　　　

配置索引。html
　　

　　　　　　& lt; body> 　　& lt; div id="应用"祝辞& lt;/div> 　　& lt;脚本src=" https://www.yisu.com/zixun/入口文件“祝辞& lt;/script> 　　& lt;/body> 　　　　

配置路由(代码拆分——懒加载)
　　

　　　　　　{ 　　路径:“回家”, 　　组件:()=祝辞导入(“. ./页面/home.vue”) 　　} 　　　　

import()返回的是一个承诺,所以也可以用异步/等待语法,当你想在本地使用异步/等待语法,请引入babel-polyfill

区分生产环境和开发环境,配置package.json。
　　

dev - - -开发环境
　　

构建- - -生产环境
　　

　　　　　　"脚本":{ 　　“开发”:“包裹指数。html - p 3700”, 　　“构建”:“包裹构建index . html” 　　} 　　　　

大功告成
　　

访问http://localhost: 3700/home

详解Vue快速零配置的打包工具,包裹