前端工程化实战
文章平均质量分 89
WJP丶
好好学习,好好工作
展开
-
Rollup和 parcel入门
Rollup概述Rollup也是一款ES Module( JavaScript 模块 )的打包器,它可以将项目中散落的模块打包成整块的代码。从而使这些划分好的模块可以更好的运行在浏览器环境和 nodeJs 环境。Rollup 与 webpack 类似,但相比于webpack ,Rollup 小巧的多,因为在配合插件的使用下,webpack 几乎可以完成开发中 前端工程化的绝大部分工作。而Rollup 就只是一款ESM的打包器。 提供一个充分利用ESM各项特性的高效打包器 。Rollup快速上手安原创 2021-08-16 21:39:38 · 373 阅读 · 1 评论 -
webpack4入门
webpack作为目前最主流的前端模块打包器,提供了一整套前端项目的模块化方案,而不仅仅局限于只对JS 的模块化.目前的webpack 非常受欢迎,基本上覆盖了绝大多数现代化的web应用项目的开发过程.模块打包工具的由来ES Module存在环境兼容问题模块文件过多,网络请求频繁所有的前端资源都需要模块化新特性代码编译模块化Javascript打包支持不同类型资源的模块模块打包工具概要模块打包工具(零散的文件打包到一起)模块加载器 ( 打包过程中通过 loader 对一些文件进行原创 2021-08-16 16:02:21 · 458 阅读 · 0 评论 -
模块化开发
模块化演变过程最早时期,JS的模块化就是基于文件划分的方式进行 ,完全依靠于约定,项目体量过大后就无法保证了。命名空间方式 :约定每一个模块暴露一个全局对象,相当于给对象内部的成员提供了命名空间(没有私有空间,模块成员在外部依然可以被访问到,模块依赖关系没有被解决)立即执行函数:将模块中的成员放在函数提供的私有作用域中,想要暴露出来的成员可以挂载到window对象上面。其他的私有成员通过闭包的方式去访问。//这个立即执行函数的参数可以作为依赖声明去使用,这样模块之间的依赖关系就变得更加原创 2021-08-16 15:20:54 · 526 阅读 · 0 评论 -
封装工作流
接下来考虑一些gulpfile的复用问题,因为如果涉及到开发多个同类型的项目,那么我们这个自动化构建工作流应该是一样的。就面临着复用gulpfile的问题。提取一个可复用的自动化构建工作流Gulp是一个自动化构建工作流的一个平台;gulpfile帮我们提供构建任务。Gulpfile + Gulp = 构建工作流Gulpfile + Gulp CLI = zce-pages具体做法就是创建一个模块,然后把这个模块发布到npm仓库上面,最后在项目中使用这个模块就可以了。提取gulpfile原创 2021-08-01 01:49:53 · 238 阅读 · 0 评论 -
Gulp入门
Gulp作为当下最流行的前端构建系统,其核心特点就是高效,易用。因为使用Gulp非常简单:现在项目中安装Gulp的开发依赖,然后在根目录添加Gulpfile.js文件用于编写构建任务;然后在命令行终端使用Gulp模块的 cli 去运行这些任务Gulp的基本使用1.初始化package.jsonyarn init2.安装Gulp模块 作为开发依赖 , 安装gulp的时候会同时安装gulp-cli的模块(也就是说在node_modules下面的bin目录中会有一个gulp.cmd命令后续可以原创 2021-07-25 22:56:53 · 196 阅读 · 0 评论 -
自动化构建
自动化构建开发行业中的自动化构建 就是把我们开发中写的源代码自动转换成可以在生产环境中运行的代码。一般我们会把这个过程称为自动化构建工作流,作用是让我们脱离运行环境兼容带来的种种问题,在开发阶段使用一些提高效率的语法规格和标准。ECMAScript新语法提高编码效率和代码质量Sass增强css的可编程性模板引擎抽象页面中重复的html通过自动化构建可以将上述不被浏览器支持的特性转换成能够直接运行的代码。浏览器使用sass基本使用安装sass模块yarn add sass --dev原创 2021-07-11 19:16:02 · 250 阅读 · 0 评论 -
脚手架工具
脚手架概要脚手架的本质作用:创建项目基础结构、给开发者提供项目规范和约定规范和约定:相同的组织结构相同的开发范式相同的模块依赖相同的工具配置相同的基础代码可以通过脚手架快速的搭建特定类型的项目骨架,然后基于这个骨架进行后续开发。像android studio,eclipse这种大型ide,它们创建项目的过程实际上就是一个脚手架的工作流程。前端脚手架:在前端项目创建过程中,由于前端技术选型多样化,也没有一个统一的标准,所以前端方向的脚手架不会集成在某一个ide中,而是一般以一个独立的工原创 2021-07-05 23:54:27 · 796 阅读 · 0 评论 -
工程化概述
工程化的定义和主要解决的问题前端工程化指遵循一定的规范,通过工具提升效率,降低成本的一种手段。前端日常开发遇到的问题想要使用ES6+新特性,但是兼容性有问题想要使用Less/Sass/PostCss增强css编程性,但是运行环境不能直接支持想要使用模块化的方式提高项目的可维护性,但是运行环境不能直接支持部署上线前需要手动压缩代码及资源文件、部署过程需要手动上传代码到服务器多人协作开发,无法硬性同一大家代码风格,从仓库pull回来的代码质量无法保证部分开发功能开发时需要等待后端服务接口提前完原创 2021-07-05 20:17:08 · 1229 阅读 · 0 评论