![](https://img-blog.csdnimg.cn/20201014180756918.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端工程化
文章平均质量分 57
问也去
GIS开发工程师,欢迎交流学习
展开
-
ESmodule规范入门
ESM基本特性自动采用严格模式,忽略“use strict" <script type="module"> console.log(this) //undefine </script>每个ESM模块都是单独的私有作用域 <script type="module"> var a = 10 </script> <script type="module"> conso原创 2022-04-18 12:15:58 · 689 阅读 · 0 评论 -
前端模块化的演变
模块化可以说是目前前端最重要的开发范式之一,模块化是一种思想,这种思想,在不同的前端开发阶段,其实现的方式也各不相同文件划分方式起初前端通过文件划分的方式来实现模块化,如分别定义a.js文件和b.js文件,每个文件中有相关的逻辑的变量,然后在html中统一引入这种方式有很大的缺陷首先就是全局变量的问题,引入的各个文件都将把各自的变量挂载到全局,各个文件间的变量命名也可能会有冲突,而且各个文件之间可能会有依赖关系,难以管理。命名空间方式这种方式对文件划分的方式进行了改进,针对每一个文.原创 2022-04-15 17:04:59 · 582 阅读 · 0 评论 -
创建自己的脚手架命令工具
vue脚手架有自己的模板管理工具;vue-cli,我们也可以自己写一款自己的模板管理脚手架,通过使用自己的命令,安装相应的模板初始化项目npm初始化一个空项目创建bin/cli.js文件#! /usr/bin/env node//测试console.log('sx')创建lib/index.js文件为入口文件修改package.json{ "name": "sx", "version": "1.0.0", "description": "", "main": .原创 2022-03-30 10:47:41 · 168 阅读 · 0 评论 -
如何用gulp实现一个项目的打包构建
项目目录结构如下gulp-demo├─ .gitignore├─ gulpfile.js├─ LICENSE├─ package.json├─ public│ └─ favicon.ico├─ README.md└─ src ├─ about.html ├─ assets │ ├─ fonts │ │ ├─ pages.eot │ │ ├─ pages.svg │ │ ├─ pages.ttf │ │ └─ pages.wo.原创 2022-03-08 10:55:25 · 493 阅读 · 0 评论 -
gulp的基本使用
● 安装:yarn add gulp --dev● 根目录创建gulpfile.js作为gulp的入口文件○ 文件中导出函数作为任务○ 任务为异步操作○ 执行完调用传入的回调告诉gulp任务结束exports.foo = done=>{ //执行的操作 console.log('foo') //调用回调,结束任务 done()}○ 执行yarn gulp foo即可调用任务● 串行任务和并行任务○ 可以通过串行和并行决定多个任务是依次执行还是并列执行const原创 2022-03-08 10:44:56 · 268 阅读 · 0 评论 -
grunt的基本使用
● 新建一个项目● 初始化● 安装模块:yarn add grunt● 根目录创建入口文件:gruntfile.js● 注册任务foomodule.exports = grunt =>{ grunt.registerTask('foo',()=>{ console.log('foo') })}● 执行任务:yarn grunt foo● default任务为默认任务,第二个参数可以是提示,直接运行yarn grunt即可 grunt.regis原创 2022-03-04 09:11:51 · 667 阅读 · 0 评论 -
前端自动化构建入门
前端三剑客可以使我们构建出想要的网页,但是这种流程并不完美,比如css的样式书写方式引用复杂,重用率低,以至于有人更青睐于less、sass等样式编写风格,但是浏览器并不能直接解析sass,这就需要前端构建工具将我们的源代码重新构建成浏览器能解析的方式sass官方有自己的源码解析工具,能将用户编写的sass转译成css,从而让浏览器使用安装 yarn add sass --dev安装好之后node_modules文件夹中的.bin目录里就有了sass.cmd程序调用该程序,即可将sass文.原创 2022-03-02 16:03:57 · 492 阅读 · 0 评论 -
模拟脚手架工作原理
我们发现,不管是yoeman还是plop,都是通过用户输入的结果,创建相关类型的项目结果,而这些也可以通过Node进行模拟实现新建项目文件 simulation-scaffold初始化项目:yarn init -y在package.json中添加入口文件:在里面添加一行:` “bin”:“cli.js”,然后创建cli.js文件,编写入口文件内容测试:在cli.js中写入console.log('sx')通过yarn link 映射到全局通过输入项目名:simulation-sc.原创 2022-03-01 21:06:54 · 469 阅读 · 0 评论 -
使用plop创建自己的项目
安装plop开发依赖:yarn add plop --dev添加入口文件在项目根目录下创建:plopfile.js文件,文件需要导出一个plop函数,函数中包含配置项module.exports = plop =>{ //项目名称 plop.setGenerator('component',{ //项目描述 description:'create a component', //接收用户操作 prompts.原创 2022-02-26 09:52:47 · 129 阅读 · 0 评论 -
通过yeoman搭建自己的脚手架工具
yeoman使用安装:yarn global add yoyeoman是一个脚手架工具,通过它可以创建相关类型的项目,如:创建一个node项目:安装相关node项目对应的generator:yarn global add generator-node运行:yo node即可创建一个项目搭建脚手架创建一个脚手架模板目录:generator-sample初始化:yarn init安装模块基类:yarn add yeoman-generator创建入口文件在该目录下新建 ap原创 2022-02-25 16:19:08 · 584 阅读 · 0 评论