VueCLI3培训 · CAP开发文档

# 前端构建 ## 1 培训简介 ### 1.1 内容了解vue前端构建，如何生成生产环境下的前端代码（如何出包、生成自定义控件、自定义按钮的运行端等）。 ### 1.2 目标 1.了解构建的功能，知道哪些东西能放入到构建中去做。 2.了解脚手架cli3的基础功能。 3.了解代理，能够本地前后端分离开发。 ## 2 Webpack ### 2.1 Webpack基本概念 Webpack 本质上是一个打包工具，它会根据代码的内容解析模块依赖，帮助我们把多个模块的代码打包。下面是Webpack官网给的一个说明图。 <img src='https://img-blog.csdn.net/20180523213934131'> 如上图，webpack 会把项目中使用到的多个代码模块（可以是不同文件类型），打包构建成项目运行仅需要的几个静态文件（如.js、.css等）。 ### 2.2 详细说明 Webpack 是一个前端资源加载和打包工具。所谓的模块就是在平时的前端开发中，用到一些静态资源，如JavaScript、CSS、图片等文件，webpack就将这些静态资源文件称之为模块。 webpack支持AMD和CommonJS，以及其他的一些模块系统，并且兼容多种JS书写规范，它能对静态资源进行统一的管理以及打包发布。 Webpack受到大多数前端开发者的喜爱，因为它能够编译打包CSS，做CSS预处理，对JS的方言进行编译，打包图片，代码压缩，混淆等等。与其他的构建工具相比，Webpack具有如下的一些优势： **1.对 CommonJS 、 AMD 、UMD 、ES6 的语法做了兼容； *2.对 js、css、图片等资源文件都支持打包； 3.串联式模块加载器以及插件机制，让其具有更好的灵活性和扩展性，例如提供对 CoffeeScript、ES6的支持； 4.有独立的配置文件 webpack.config.js； *5.可以将代码切割成不同的 chunk，实现按需加载，降低了初始化时间； 6.支持 SourceUrls 和 SourceMaps，易于调试； *7.具有强大的 Plugin 接口，大多是内部插件，使用起来比较灵活; 8.webpack 使用异步 IO 并具有多级缓存。这使得 webpack 很快且在增量编译上更加快。 PS: 一、CommonJS是一种后端js规范，是nodeJs遵循的一种编写js模块的规范，（是由nodejs将其发扬光大的），同时也开启了js全栈的大门。此处主要用于webpack配置。 1、定义模块根据CommonJS规范，一个单独的文件就是一个模块。每一个模块都是一个单独的作用域，也就是说，在该模块内部定义的变量，无法被其他模块读取，除非定义为global对象的属性 2、模块输出：模块只有一个出口，module.exports对象，我们需要把模块希望输出的内容放入该对象 3、加载模块：加载模块使用require方法，该方法读取一个文件并执行，返回文件内部的module.exports对象 ```JS // foobar.js //私有变量 var test = 123; //公有方法 function foobar () { this.foo = function () { // do someing ... } this.bar = function () { //do someing ... } } //exports对象上的方法和变量是公有的 var foobar = new foobar(); exports.foobar = foobar; // test.js //require方法默认读取js文件，所以可以省略js后缀 var test = require('./boobar').foobar; test.bar(); ``` 二、 AMD 全称Asynchronous Module Definition 由于不是JavaScript原生支持，使用AMD规范进行页面开发需要用到对应的库函数，也就是大名鼎鼎RequireJS，AMD是 RequireJS 在推广过程中对模块定义的规范化的产出 requireJS主要解决两个问题 1、多个js文件可能有依赖关系，被依赖的文件需要早于依赖它的文件加载到浏览器 2、js加载的时候浏览器会停止页面渲染，加载文件越多，页面失去响应时间越长 requireJS的例子 ```js // 定义模块 myModule.js define(['dependency'], function(){ var name = 'Byron'; function printName(){ console.log(name); } return { printName: printName }; }); // 加载模块 require(['myModule'], function (my){ 　 my.printName(); }); ``` UMD：Universal Module Definition（通用模块规范）由于CommonJS和AMD都十分流行，但似乎缺少一个统一的规范。于是，UMD(通用模块规范)出现了，它可以同时支持这两种风格。虽然这个模式的写法比较难看，但是，它同时兼容了AMD和CommonJS，而且还支持老式的全局变量规范。是由社区想出来的一种整合了CommonJS和AMD两个模块定义规范的方法 UMD = AMD + CommonJS 总结： 1.一切皆模块（核心）正如js文件可以是一个“模块（module）”一样，其他的（如css、image或html）文件也可视作模块。因此，你可以require(‘myJSfile.js’)亦可以require(‘myCSSfile.css’)。这意味着我们可以将事物（业务）分割成更小的易于管理的片段，从而达到重复利用等的目的。 2.按需加载（性能优化）传统的模块打包工具（module bundlers）最终将所有的模块编译生成一个庞大的bundle.js文件。但是在真实的app里边，“bundle.js”文件可能有10M到15M之大可能会导致应用一直处于加载中状态。因此Webpack使用许多特性来分割代码然后生成多个“bundle”文件，而且异步加载部分代码以实现按需加载。 webpack 优化 https://www.jianshu.com/p/d2152789759d ### 2.3 简单入口配置 #### 入口每个应用程序都有自己的入口文件，而Webpack构建的项目的默认的入口文件就是“./src/main.js” 。入口使用 entry 字段来进行配置，可以是个字符串或数组或者是对象；如果是数组，数组中的所有文件会打包生成一个filename文件；如果是对象，可以将不同的文件构建成不同的文件。例如： #### loader webpack 中提供一种处理多种文件格式的机制，便是使用 loader。我们可以把 loader 理解为是一个转换器，负责把某种文件格式的内容转换成 webpack 可以支持打包的模块。在webpack中JavaScript，CSS，LESS，TypeScript，JSX，CoffeeScript，图片等静态文件都是模块，不同模块的加载是通过模块加载器（webpack-loader）来统一管理的当我们需要使用不同的 loader 来解析处理不同类型的文件时，我们可以在 module.rules 字段下来配置相关的规则。例如使用 Babel 来处理 .js 文件。 #### plugin 在 webpack 的构建流程中，plugin 用于处理更多其他的一些构建任务。可以这么理解，模块代码转换的工作由 loader 来处理，除此之外的其他任何工作都可以交由 plugin 来完成。 webpack提供了“丰富的组件”来满足我们不同的需求，当然也可以自行实现一个组件来满足特定的需求。在webpack中，可以通过 plugins 字段来添加新的 plugin 。输出 ```js module.exports = { entry: './src/index.js' } // 使用数组来对多个文件进行打包 module.exports = { entry: { main: [ './src/foo.js', './src/bar.js' ] }, rules: [ // loader { test: /\.jsx?/, // 匹配文件路径的正则表达式，通常我们都是匹配文件类型后缀 include: [ path.resolve(__dirname, 'src') // 指定哪些路径下的文件需要经过 loader 处理 ], use: 'babel-loader', // 指定使用的 loader }, ], plugins: [ new UglifyPlugin() //新的plugin ], // ... output: { path: path.resolve(__dirname, 'dist'), filename: 'bundle.js', }, } ``` 注：中文官网路径 https://www.webpackjs.com/ ## 3 vue 简化配置，cli3 脚手架为了减少webpack的配置，cli3脚手架对webpack再次封装，简化了vue的webpack配置。实际原理就是把复杂的webpack配置给出了一套完整的适用于vue工程的默认配置。如果有修改，只需要进行微调即可。 1.工程目录参考demo工程。 2.css支持配置.browserslistrc ··· > 1% last 7 versions not ie <= 8 last 10 Chrome versions last 5 Firefox versions Safari >= 6 ··· 3.vue.config.js是一个可选的配置文件，cli3已经存在了默认配置，我们只需要通过vue.config.js来微调配置即可。 ```js { productionSourceMap: false, // 如果你不需要生产环境的 source map，可以将其设置为 false 以加速生产环境构建 assetsDir: "static", // dist下的静态资源目录 publicPath: "./", configureWebpack: { plugins: [ new DistInitPlugin() ], output: { filename: `static/js/[name].min.js?t=${version}`, chunkFilename: `static/js/[name].min.js?t=${version}` }, resolve: { alias: alias } }, outputDir: 'dist', devServer: devServer, pages: { index: 'src/main.js' // 入口 } } ``` #### productionSourceMap Type: boolean Default: true 如果你不需要生产环境的 source map，可以将其设置为 false 以加速生产环境构建。 #### publicPath Type: string Default: '/' 部署应用包时的基本 URL。Vue CLI 会假设你的应用是被部署在一个域名的根路径上，例如 https://www.my-app.com/。如果应用被部署在一个子路径上，你就需要用这个选项指定这个子路径。例如，如果你的应用被部署在 https://www.my-app.com/my-app/，则设置 publicPath 为 /my-app/。这个值也可以被设置为空字符串 ('') 或是相对路径 ('./')，这样所有的资源都会被链接为相对路径，这样打出来的包可以被部署在任意路径，也可以用在类似 Cordova hybrid 应用的文件系统中。 #### outputDir Type: string Default: 'dist' 当运行 vue-cli-service build 时生成的生产环境构建文件的目录。注意目标目录在构建之前会被清除 (构建时传入 --no-clean 可关闭该行为)。 #### configureWebpack 配置输出细节、构建过程、等细节化调整。 #### devServer.proxy 如果你的前端应用和后端 API 服务器没有运行在同一个主机上，你需要在开发环境下将 API 请求代理到 API 服务器。这个问题可以通过 vue.config.js 中的 devServer.proxy 选项来配置。 devServer.proxy 可以是一个指向开发环境 API 服务器的字符串下面就是本地代理到服务器 const proxySite = 'http://192.168.225.70:88' // 主干 ··· { proxy: { '/seeyon': { target: proxySite, changeOrigin: false, pathRewrite: { '^/seeyon': '/seeyon' } } }, port: 8000 } ··· 官网链接 https://cli.vuejs.org/zh/config/#vue-config-js ### 自定义命令 package.json 中的scripts，可以自己组合命名执行。 ### vue-cli-service build 如何构建库用法：vue-cli-service build [options] [entry|pattern] 选项： --dest 指定输出目录 (默认值：dist) --target app | lib | wc | wc-async (默认值：app) --name 库或 Web Components 模式下的名字 (默认值：package.json 中的 "name" 字段或入口文件名)