做电商网站前端需要什么框架,互站网,百度收录刷排名,申请域名 建设网站前言#xff1a;在继grunt、gulp实现自动化构建之后#xff0c;webpack又引领前端打包潮流#xff0c;众所周知的是#xff0c;vue-cli的脚手架就是基于webpack进行项目打包的。而webpack还在上升的势头的时候#xff0c;又一打包神器横空出世——parcel。Parcel快速…前言在继grunt、gulp实现自动化构建之后webpack又引领前端打包潮流众所周知的是vue-cli的脚手架就是基于webpack进行项目打包的。而webpack还在上升的势头的时候又一打包神器横空出世——parcel。Parcel快速零配置的 Web 应用程特性快速打包Parcel 使用工作进程启用多核编译并具有文件系统缓存即使在重新启动后也可快速重新构建。打包所有资源Parcel 支持JSCSSHTML文件资源等等 - 不需要安装任何插件。自动转换在需要时代码使用 BabelPostCSS 和 PostHTML 自动转换 - 即使是 node_modules。零配置代码拆分Parcel 使用动态 import() 语法拆分您的输出包所以只加载初始加载时所需的内容。模块热替换当你在开发过程中进行更改时Parcel 会自动更新浏览器中的模块不需要进行任何配置。友好的错误记录遇到错误时Parcel 会以语法高亮的形式打印的代码帧以帮助你查明问题。为啥用 parcel现在有很多Web应用程序打包工具包括webpack 和 browserify。所以我们为什么还需要一个呢主要的原因是围绕开发者的经验。很多打包工具都围绕配置和插件进行构建的因此看到有500行以上配置的应用程序正常运行并不罕见。这种配置不仅繁琐和费时而且也很难得到正确的配置必须为每个应用程序复制。通常情况下这可能导致次优化的应用程序发送到生产环境。parcel 被设计为零配置只要将它指向你的应用程序的入口点它就能做正确的事情。现有的打包工具大多都执行得慢具有很多文件和依赖的大型应用将花费数分钟去构建随着时间的推移这将会相当痛苦的事情。监听文件变更能帮助重新编译当时初始构建的时候通常还是会很慢。parcel 利用现代的多核处理能力和工作线程去并行编译你的代码。这导致了初始构建的速度极大的提升。它还有一个文件系统缓存可以保存每个文件的编译结果以便更快的后续启动。最后现有的打包工具都是围绕字符串加载/转换进行构建的其中转换需要一个字符串解析它然后进行一些转换之后再次生成代码。通常这最终导致许多解析和代码生成在单个文件上运行这是低效的。相反parcel 的转换工作在 AST上所以这样每个文件就有一个解析多个转换和一个代码生成。Parcel 是如何工作的Parcel 将 资源 树转换成 包(bundles) 树。许多其它的打包工具基本上是基于 JavaScript 资源还有附加在其上的其它格式的资源。例如在 JS 文件中内联成字符串。 Parcel 是对文件类型无感知的它能按你所期待的方式那样与任意类型的资源工作且毋须配置。构建资源树Parcel 接受单个入口资源作为输入可以是任意类型JS、HTML、CSS、图片文件等等。在 Parcel 中定义了许多不同的资源类型它知道如何去处理特定的文件类型。资源会被解析资源的依赖会被提取资源会被转换成最终编译好的形态。此过程创建了一个资源树。构建文件束树一旦资源树被构建好资源会被放置在文件束树中。首先一个入口资源会被创建成一个文件束然后动态的 import() 会被创建成子文件束 这引发了代码的拆分。当不同类型的文件资源被引入兄弟文件束就会被创建。例如你在 JavaScript 中引入了 CSS 文件那它会被放置在一个与 JavaScript 文件对应的兄弟文件束中。如果资源被多于一个文件束引用它会被提升到文件束树中最近的公共祖先中这样该资源就不会被多次打包。打包在文件束树被构建之后每个文件束都会被 packager 写到一个特定文件类型的文件中。packagers 知道如何从每个资源中将代码合并起来生成到最终被浏览器加载的文件中。[ps基于官网https://parceljs.org/进行的总结]入门Demo一、初始化npmnpm init二、添加babel 并安装 babel-preset-env依赖1.新建.babelrc 文件{presets: [env]}2.安装依赖npm install babel-preset-env --save-dev三、添加parcelnpm install parcel-bundler --save-dev四、最后生成的package.json文件大概就这样{name: parcel-demo,version: 1.0.0,description: parcel,main: index.js,scripts: {test: echo \Error: no test specified\ exit 1,start:parcel index.html},keywords: [parcel],author: aaron,license: ISC,devDependencies: {babel-cli: ^6.26.0,babel-preset-env: ^1.6.1,parcel-bundler: ^1.2.0}}[ ps给npm添加启动项start:parcel index.html]五、最后根据官网新建index.htmlindex.js等文件然后命令行打包然后运行npm start 或 parcel index.html 启动简单的demo就生成了。index.html / index.js / main.js / main.csshello Parcelparcel
