liujun2son

该文章是在 node编写cli命令行(二) 的基础上继续编写的1.编写 addcom 指令编写一个 addcom 指令，例如当执行：vue-temp-cli addcom HelloWorld -d /src/view/main 时，会在/src/view/main目录下新建一个 HelloWorld 组件1.添加模板文件新建一个 template 文件夹lib |--index.jstemplate |-- mockjs `-- src |-- base

该文章是在 node编写cli命令行(一) 的基础上继续编写的1.编写 create 指令编写一个新建vue项目的 create 指令，例如当执行：vue-temp-cli create myVue 时，会新建一个项目名称为myVue 的 Vue 项目1.编写 create 指令1.修改index.js文件在第3步添加新建项目的 create 指令#!/usr/bin/env nodeconsole.log('vue-temp-cli')var program = require('com

node编写cli命令行(一)前端日常开发中，会遇见各种各样的cli，比如一行命令帮你打包的 webpack，一行命令帮你生成vue项目模板的vue-cli，还有创建react项目的create-react-app等等。那么这些脚手架是什么编写的？下面演示一下如何制作一个vue-temp-cli 脚手架。1.先编写node脚本1.新建一个vue-temp-cli 文件夹`-- vue-temp-cli |-- index.js `-- lib2.在改文件夹下新建一个index.j

1.什么是 vue-cli 插件？Vue CLI 使用了一套基于插件的架构。如果你查阅一个新创建项目的 package.json，就会发现依赖都是以 @vue/cli-plugin- 开头的。插件可以修改 webpack 的内部配置，也可以向 vue-cli-service 注入命令。在项目创建的过程中，绝大部分列出的特性都是通过插件来实现的。基于插件的架构使得 Vue CLI 灵活且可扩展。...

1.发布一个npm包1.npm 是什么？npm是随同NodeJS一起安装的包管理工具，能解决NodeJS代码部署上的很多问题，常见的使用场景有以下几种：允许用户从npm服务器下载别人编写的第三方包到本地使用。允许用户从npm服务器下载并安装别人编写的命令行程序到本地使用。允许用户将自己编写的包或命令行程序上传到npm服务器供别人使用。由于新版的Nodejs已经集成了npm，所以之前...

1.Jenkins部署前端项目在使用Jenkins部署前端项目时需要搭建好 JenKins 的自动化部署环境。1）Linux服务器上安装好了JDK软件，并配好了环境变量2）Linux服务器上安装好 Jenkins 软件，并安装了 JenKins 推荐安装的插件3）Linux服务器上安装好了Node软件，并配好了环境变量（npm 需要设置淘宝镜像）# 设置淘宝镜像npm config s...

1.Jenkins简介Jenkins是一个开源软件项目，是基于Java开发的一种持续集成工具，用于监控持续重复的工作，旨在提供一个开放易用的软件平台，使软件的持续集成变成可能。持续集成是一种软件开发实践，即团队开发成员经常集成他们的工作，通常每个成员至少集成一次，也就意味着每天可能会发生多次集成。每次集成都通过**自动化的构建（拉取代码，编译，发布，自动化测试）**来验证，从而尽快地发现集成错...

1.PluginWebpack 通过 Plugin 机制让其更加灵活，以适应各种应用场景。在 Webpack 运行的生命周期中会广播出许多事件，Plugin 可以监听这些事件。除此之外 Plugin 还可以广播自定义事件和监听自定义广播（例如，多个Plugin插件之间的通讯就可以通过定义自定义广播事件）。通过 Webpack 提供的 API 可以在构建的合适时机去改变输出的结果。1)一个最基...

1.LoaderLoader 就像是一个翻译员，能把源文件经过转化后输出新的结果，并且一个文件还可以链式的经过多个翻译员翻译。以下面处理 CSS 文件为例：CSS 源代码会先交给 css-loader 处理，找出 CSS 中依赖的资源、压缩 CSS 等；把 css-loader 输出的 CSS 交给 style-loader 处理，转换成通过脚本加载的 JavaScript 代码( ...

1.HappyPack在用Webpack构建项目时有大量文件需要解析和处理，构建过程是文件读写和计算密集型的操作（特别是当文件数量变多后），Webpack 构建慢的问题会显得严重。运行在 Node.js 之上的 Webpack 是单线程模型的，也就是说 Webpack 需要处理的任务需要一件件挨着做，不能多个事情一起做。文件读写和计算操作是无法避免的，那能不能让 Webpack 同一时刻处理...

1.动态链接库DLLWebpack构建时接入动态链接库的思想后，会大大提升构建速度。 原因在于包含大量复用模块的动态链接库只需要编译一次，在之后的构建过程中被动态链接库包含的模块将不会在重新编译，而是直接使用动态链接库中的代码。 由于动态链接库中大多数包含的是常用的第三方模块，例如 react、react-dom，只要不升级这些模块的版本，动态链接库就不用重新编译。而Externals 用来...

Externals 配置项用来告诉 Webpack 要构建的代码中使用了哪些不用被打包的模块，也就是说这些模版是外部环境提供的，Webpack 在打包时可以忽略它们。1.有些 JavaScript 运行环境可能内置了一些全局变量或者模块，例如在你的 HTML BODY标签里通过以下代码：<script src="https://cdn.bootcss.com/jquery/3.4.1/j...

前面的已经介绍过如何用webpack 打包一个项目，细心的人会发现，打包后想要项目运行起来必须要把打包后的项目上传到服务器中，或者静态的项目也可以在本地直接用浏览器打开。但在实际开发中可能会需要实时预览界面效果，那么这个时候就需要创建一个本地的HTTP服务器来实现实时预览项目。然而官方提供的开发工具 DevServer 也可以很方便地做到项目的实时预览, 修改文件后自动刷新，Source Map...

Webpack4 配置 ResolveWebpack在启动后会从webpack.config.js 配置文件中的enter属性指定的入口模块出发找出所有依赖的模块，Resolve 的作用就是：配置 Webpack 如何寻找模块所对应的文件。resolve 属性的值是一个对象。该对象常用的属性有： modules、extensions、alias、...， 其中modules是配置寻找模块的根目录...

1.Webpack4 配置 PluginsPlugin 用于扩展 Webpack 功能，可以通过在构建流程里注入钩子实现，然而各种各样的 Plugin 几乎让 Webpack 可以做任何构建相关的事情。loader vs plugins 区别 :loader 用于加载某些资源文件，它只专注于转化文件（transform）这个领域，loader运行在webpack打包之前。plugins ...

TypeScript 是 JavaScript 的一个超集，主要提供了类型检查系统和对 ES6 语法的支持，但不支持新的 API。 目前没有任何环境支持运行原生的 TypeScript 代码，必须通过构建把它转换成 JavaScript 代码后才能运行。TypeScript 官方提供了能把 TypeScript 转换成 JavaScript 的编译器:typescript 。 你需要在当前项目根...

1.ES6兼容介绍ECMAScript 6.0 是2015年发布的下一代 JavaScript 语言标准，它引入了新的语法和 API 来提升开发效率。虽然目前部分浏览器和 Node.js 已经支持 ES6，但由于它们对 ES6 所有的标准支持不全，这导致在开发中不敢全面地使用 ES6。通常我们需要把采用 ES6 编写的代码转换成目前已经支持良好的 ES5 代码，这包含2件事：把新的 ES...

1.配置PostCss LoaderPostCSS 也是一个CSS 预处理工具，和 SCSS 不同的地方在于它通过插件机制可以灵活的扩展其支持的特性，而不是像 SCSS 那样语法是固定的。PostCSS 的用处非常多，包括给 CSS 自动加前缀、使用下一代 CSS 语法等，目前越来越多的人开始用它，它很可能会成为 CSS 预处理器的最终赢家。PostCSS 和 CSS 的关系就像 Babe...

1.配置 scss LoaderSCSS 可以让你用更灵活的方式写 CSS。 它是一种 CSS 预处理器，语法和 CSS 相似，但加入了变量、逻辑、等编程元素。SCSS 又叫 SASS，区别在于 SASS 语法类似 Ruby，而 SCSS 语法类似 CSS，对于熟悉 CSS 的前端工程师来说会更喜欢 SCSS。使用 SCSS 可以提升编码效率，但是必须把 SCSS 源代码编译成可以直接在浏览器...

1.Modulemodule 配置如何处理模块, 它的值是一个对象，常用的值有 noParse 和 rules 。其中 noParse 是用来指定哪些资源不需要解析，提高编译性能；rules 是用来定义多个规则，这些规则用来匹配对应的模块，然后给对应的模块应用指定的loader,rules 接收的是一个数组，数组存放的是 rule 对象;rule 对象常用的属性：test, use, i...

Webpack4 配置 Outputoutput 属性告诉 webpack 在哪里输出它所创建的 bundles，以及如何命名这些文件，默认值为 ./dist。基本上，整个应用程序结构，都会被编译到你指定的输出路径的文件夹中。你可以通过在配置中指定一个 output 字段，来配置这些处理过程。output 是一个 object，里面包含一系列配置项，下面分别介绍它们。简单案例：( webpa...

Webpack4 配置 Entryentry是配置模块的入口，可抽象成输入，Webpack 执行构建的第一步将从入口开始搜寻及递归解析出所有入口依赖的模块。entry 配置是必填的，若不填则将导致 Webpack 报错退出。简单的配置代码：( 在 webpack.config.js 文件下 配置 )module.exports = { // 1.JavaScript 执行入口文件...

1.Webpack安装在用 Webpack 执行构建任务时需要通过 webpack 可执行文件去启动构建任务，所以需要安装 webpack 可执行文件。 ( 例如：webpack --config webpack.config.js )在安装 Webpack工具前请确保你的系统安装了5.0.0及以上版本的 Node.js。因为webpack在执行打包压缩等时是依赖node.js的，没有no...

1.WebpackWebpack 是一个现代 JavaScript 应用程序静态模块打包工具(module bundler)，在 Webpack 里一切文件皆模块(例如：JavaScript、CSS、SCSS、图片、模板，在 Webpack 眼中都是一个个模块)，通过 Loader 转换文件，通过 Plugin 注入钩子，最后输出由多个模块组合成的文件（Chunk）。Webpack 专注于构建模...