随笔分类 - 工程化及相关工具使用
摘要：实现控制台输入输出 实现文件读写操作 全原生实现一个简单的脚手架工具 实现vue-cli2源码 一、实现控制台输入输出 关于控制台的输入输出依然是基于node进程管理对象process，在process上有三个基于流的对象分别是：标准输入流（stdin）、标准输出流（stdout）、标准错误（std
阅读全文
摘要：了解NPM安装模块时与项目配置文件中的bin配置发生了什么 了解nodejs在控制台中的运行环境及上下文 基于自定义命令集工具集成Yeoman 一、NPM模块安装内幕与nodejs控制台运行环境 1.1NPM模块安装内幕 当我们使用npm install 安装NPM模块时你会思考它到底发生了什么吗？
阅读全文
摘要：什么是脚手架？ Yeoman是什么？ 实现自定义脚手架 基于Yeoman实现Vue-cli 一、什么是脚手架？ 手脚架从功能上来讲就是创建项目初始文件，这其中包括生成功能模块配置、自动安装依赖、自动生成标准化（结构的）文件，提高项目创建速度降低手动操作可能发生的低级错误。 关于手脚架在周俊鹏的《前端
阅读全文
摘要：1.vs code： 安装两个插件： sass easy sass 2.webstorm： 安装Ruby:http://www.ruby-lang.org/zh_cn/ 我的是win10 x64系统，地址在这里：https://rubyinstaller.org/downloads/ 其他根据系统相
阅读全文
摘要：browserslist简介与基本应用 如何配置browserslist browserslist配置如何作用于项目 一、browserslist简介与基本应用 1.1browserslist是什么？ browserslist是用来配置项目的目标浏览器和nodejs版本范围，也就是通常说的兼容哪些浏
阅读全文
摘要：一、Node.Js的Typings工具可以用于Visual Studio Code的代码补全 1.vscode 的默认只有es原声api带有自动补全的功能，现在V1.9的版本默认已经支持NodeJS的智能补全。2.如果想获取jquery，nodejs，Requirejs，express等更多的提示扩
阅读全文
摘要：Git下载与安装 创建git版本库 时光穿梭机（版本回退） 时光穿梭机（工作区与暂存区） Git分支开启多人协作 Git config与配置别名、打标签、忽略文件 GitHub远程仓库 GitLab搭建私有库 一、Git下载与安装 下载windows系统版本地址：https://git-scm.co
阅读全文
摘要：webpack4打包配置babel7转码ES6 Module语法与API的使用 import() Module加载实现原理 Commonjs规范的模块与ES6模块的差异 ES6模块与Nodejs模块相互加载 模块循环加载 一、webpack4打包配置babel7转码ES6 1.webpack.con
阅读全文
摘要：ES6简介 Babel转码器 Nodejs中使用ES6 WebPack中使用ES6及Babel转码插件 一、ES6简介与转码 1.1一个常见的问题，ECMAScript和JavaScript到底是什么关系？ 1996年11月，JavaScript的创造者——Netscape公司，决定将JavaScr
阅读全文
摘要：vue-cli安装、创建项目 基于vue-cli创建的项目进行开发 使用vue-cli图形化界面搭建项目 插件与工具 一、vue-cli简介、安装、创建项目 Vue-cli是基于Vue.js进行快速开发的完整系统，提供： 通过@vue/cli搭建交互式的项目脚手架。 通过@vue/cli + @vu
阅读全文
摘要：生成环境与开发环境打包配置 使用package.json配置npm run开启不同的打包配置 。。。webpack基本使用最后一篇博客 在上一篇博客中详细的演示了webpack开启本地服务和热更新，这个超级爽的技能你有没有发现问题呢？反正我是发现了，那就是只适合开发环境下使用，生成环境打包显然不合适
阅读全文
摘要：第一个webpack本地服务 webpack本地服务相关的一些操作指令与应用 一、第一个webpack本地服务 需要下载安装的加载器和插件： 一定要注意先在全局安装webpack-dev-server，然后再在局部工作区间安装。然后测试代码非常简单，只需要一个html默认生成结构，css给body设
阅读全文
摘要：抽离图片文件打包到指定路径下 压缩抽离的图片资源 配置生成html中的图片路径 一、准备测试环境 首先需要准备打包插件（这里打包文件还不是用来处理图片文件的）： 通过上面的注释，可以看到上面的打包配置还不能处理图片资源，所以在测试上面的打包插件配置是否成功的情况下暂时不要在css中出现引用图片路径的
阅读全文
摘要：webpack打包js代码与提取公共js代码分析 webpack提取公共js代码示例 一、分析 webpack默认打包js代码时，是将从入口js模块开始，将入口js模块所依赖的js以及模块逐层依赖的模块，全部以入口js模块为主体全部打包至生成的对应js文件中。即使是多个js入口依赖链模块依赖了同一个
阅读全文
摘要：html-webpack-plugin clean-webpack-plugin 一、html-webpack-plugin 由于打包时生成的css样式文件和js脚本文件会采用hash值作为文件命名的一部分，每一次调试打包结果都需要手动修改名称，这种做法就违背了webpack的自动化打包的初衷，而且
阅读全文
摘要：PostCss是什么？ PostCSS在webpack中的基本应用 一、PostCss是什么？ 如果有深入学习PostCss需求的话可以参考大漠的资料：https://www.w3cplus.com/blog/tags/516.html 大概来说postcss是一个用来处理css的系统程序，它不是c
阅读全文
摘要：webpack抽取CSS文件 CSSTreeShaking 一、webpack抽取CSS文件 抽取CSS文件的插件：mini-css-extract-plugin 详细参考：https://www.npmjs.com/package/mini-css-extract-plugin 但是前提还是需要下
阅读全文
摘要：webpack自身实现词法分析的JSTreeShaking webpack-depp-scope-plugin插件实现作用域分析的JSTreeShaking 一、webpack词法分析的JSTreeShaking示例 示例测试的文件结构： 主入口文件index.js： 依赖文件demo.js:注意依
阅读全文
摘要：安装webpack webpack核心概念：入口、输出、加载器、插件、模块、模式 一、安装webpack 1.安装webpack之前需要安装nodejs环境，在使用nodejs环境自带的包管理工具npm进行下载，由于网络环境问题，建议安装先安装淘宝的镜像cnpm来实现下载。 由于webpack从3版
阅读全文
摘要：less的安装与基本使用 less的语法及特性 一、本地使用less的方法 Less （Leaner Style Sheets 的缩写） 是一门向后兼容的 CSS 扩展语言。是一种动态样式语言，属于css预处理语言的一种。 下载后找到less.js：less.js-2.5.3\dist\less.j
阅读全文
