Vue2.x模块化开发知识点总结

模块化开发

常见的 模块化的规范

CommonJS AMD CMD 也有 ES6的 Modules

CommonJS

需要底层支撑

commonJS的导出：

module.exports = {
   
    flag:true,
    test(a,b){
   
        return a+b
    },
    demo(a,b){
   
        return a*b
    }
}

commonJS的导入：

let {
   test,demo,flag} = require('moduleA');
//等同于
let _mA = require('moduleA');
let test = _mA.test;
let demo = _mA.demo;
let flag = _mA.flag;

ES6的 Modules

export指令用于导出变量，比如下面的代码:

首先需要在页面引入 js 文件的时候 给一个 type 属性，值为 module，本身script标签具备跨域请求，不受同源策略影响，但由于添加了type =module 请求方式改为了 file:// 文件请求，受到同源策略的影响

1.导出方式一：

 // info.js
 export let name = 'why'
 export let age = 18 
 export let height = 1.88

上面的代码还有另一种写法：

2.导出方式二：

// info.js
let name = 'why'
let age = 18 
let height = 1.88

export {
   name, age, height}

3.可以导出函数、类：

export function mul(num1,num2){
   
    return num1 + num2
}

4.export default 注意！！！ 只能一个导出为这个，否则import导入时候会产生错乱

var count = 88
export default count

import alger from "./main"
console.log(alger);

导入的三种方式：

// 导入  //对象 括号不能去
import {
   name, age, height} from '文件地址'     

// 当导出为  export   default  
import 自己起的名字 from '文件地址'

// 以这种方式导入的时候 起的名字是alger  ，因此这个模块中要想使用导入的数据需要添加  alger前缀
import * as alger from './main.js'
// 只有这个特殊一些，其他的直接可以拿到原来的变量，default 则是把导出的变量用自己起的名字代替了
// 这里导入的是'./main.js' 导出的所有变量  包括 default, 都包含着自己命名的这个对象中

webpack开始

• 认识webpack
• webpack 的安装
• webpack 的起步
• webpack 的配置
• loader的使用
• webpack中配置Vue
• plugin的使用
• 搭建本地服务器

认识webpack

从本质上来将，webpack是现代的javascript应用的静态模块打包工具

从 模块 打包来解释

前端模块化：

• 目前使用前端模块化的一些方案：AMD、CMD、CommenJS 、ES6
• 在ES6之前，我们想进行模块化开发，就必须借助于其他的工具，让我们可以进行模块化开发
• 并且在通过模块化开发完成了项目后，还需要处理模块之间的各种依赖，并且将其进行整合打包
• 而webpack其中一个核心就是让我们可以进行模块化开发，并且会帮助我们处理模块间的依赖关系
• 而且不仅仅是JavaScript 文件，我们的CSS、图片、json文件等等在webpack中都可以被当做模块化来使用

打包

• 理解了webpack可以帮助我们进行模块化，并且处理模块间的各种复杂关系后，打包的概念就非常好理解了
• 就是讲webpack中的各种资源模块进行整合并称一个或多个包

webpack和node之间关系

webpack模块化打包工具，为了可以正常运行，必须依赖node环境，node环境为了可以正常的执行很多代码，必须其中包括各种依赖的包，npm工具（node packges manager）

安装node

安装webpack 首先需要安装Node.js，Node.js自带了软件包管理工具npm

查看自己的node 版本： node -v

全局安装webpack (这里我先指定版本3.6.0，因为vue cli2依赖该版本)

npm install webpack@3.6.0 -g

局部安装 webpack（后续才需要）

• –save-dev 是开发时的依赖，项目打包后不需要继续使用的

vscode打包报错解决方案

在通过vs code 运行webpack进行打包时，报错webpack : 无法加载文件 D:\nodejs\node_global\webpack.ps1，因为在此系统上禁止运行脚本。
解决方案：

以管理员身份运行vs code
执行：get-ExecutionPolicy，显示Restricted，表示状态是禁止的
执行：set-ExecutionPolicy RemoteSigned
这时再执行get-ExecutionPolicy，就显示RemoteSigned
此时发现再进行打包就没有问题了

webpack基本使用

webpack ./src/main.js ./dist/bundel.js

由于每次打包都要执行这样的代码 ，太过于麻烦，因此我们需要对webpack 进行一些配置

webpack 配置

可以在项目根目录创建一个webpack.config.js文件，对webpack进行一些配置

const path = require('path')

module.exports = {
   
  entry: './src/main.js',
  output: {
   
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundel.js'
  },
}

1.官方推荐 output出口需要传个对象，对象中的属性 path,filename. 其中 path需要传一个绝对路径。

2.而我们并不希望这个路径被写死。 此需要用到 node中的 path模块， 当用到node模块时 可以先执行 npm init 初始化下，得到 package.json 文件。

3.然后导入node 的path模块

const path = require('path')

4.调用 path.resolve（） 函数，该函数传递两个参数，会将两个参数进行拼接。 第一个参数传递 __dirname, 注意两个下划线，第二个参数传递当前文件目录 下的目标文件

5.然后直接执行 webpack 即可 按照 webpack.config.js 配置文件中的配置项 进行配置

package.js 配置

1.原本我们已经通过 webpack.config.js 配置， 只需要运行webpack 就会自动进行 src 下的 main.js打包到 dist文件下的 bundel.js

2.package.js文件中"scripts" 对象下存储的都是 运行 npm run … 的快捷方式 。 我们如果在这个对象下 定义 "build": "webpack" 则运行npm run build 会自动运行 webpack, 也就是进行打包

注意！！！！ package.json中的script的脚本在执行时，会按照一定的顺序寻找命令对应的位置

• 首先，会寻找本地的node_modules/bin路径中对应的命令
• 如果没有找到，会去全局的环境变量中寻找
• 如何执行我们的build指令呢 npm run build

也就是说在cmd中直接使用webpack命令 则一定会使用全局配置的webpack,然而使用脚本命令，则会优先使用局部配置的webpack,这也是配置脚本运行的一个原因

关于全局webpack 和 本地webpack

1.由于每个项目都有自己依赖的webpack版本，所以不是所有项目都可以运行全局的webpack进行打包，因此我们需要在本地也安装相应版本的webpack.

2.安装本地webpack 执行命令npm install webpack@3.6.0 --save-dev 此时 package.js文件下的devDependencies 中就有了安装的webpack信息了。 【devDependencies 中 develop的缩写，翻译：开发，dependencies 翻译：依赖】

配置css样式文件

0.在引入css样式的入口文件中需要导入，css不需要变量接收，因此直接使用commenJS中的语法 ，require('./src/css/normal.css')

1.本身webpack没有办法对css类型的文件进行解析打包。

2.需要依赖其他的loader 来配置，官网上看了后发现需要用到 css-loader 因此需要 通过 npm来安装

3.执行命令 npm install --save-dev css-loader 安装完毕后再 package.json 文件中的开发依赖可以看到这个loader,

4.安装结束后，需要在webpack 配置文件中进行配置，打开webpack.config.js 之前我们配置了 入口，出口，现在需要配置module,如下：

module:{
   
    rules:[{
   
    	test: /\.csss$/,
    	use: ['style-loader', 'css-loader']
    }]
}

5.不难发现rules 是定义一些模块规则的， test是匹配这些文件，模块的，当匹配到的时候，则会依据use，执行里面相应的包。

6.注意此处的css-loader是用来解析css 文件的，你并不能将该css文件绑定到相应的DOM上，所以此时又需要使用 style-loader

7.因此我们需要安装 npm install --save-dev style-loader , 安装后依然是在use中配置，style-loader 应该是css文件解析结束后再调用，因此需要现在css-loader前面，因为 use中执行顺序是 从右到左

配置less样式文件

方法与配置css基本一致

安装： npm install --save-dev less-loader less

配置： 在 webpack.config.js 中进行配置

	{
   
        test: /\.less$/,
        use: [{
   
          loader: "style-loader" // creates style nodes from JS strings
        }, {
   
          loader: "css-loader" // translates CSS into CommonJS
        }, {
   
          loader: "less-loader" // compiles Less to CSS
        }]
      }

配置图片文件

一：配置 url-loader

1. 安装依赖 npm install --save-dev url-loader

2. 配置 webpack.config.js 环境

   {
        
       test: /\.(png|jpg|gif|jpeg)$/,
       use: [{
        
          loader: 'url-loader',
           options: {
        
             limit: 8192
            }
       }]
   }
   

   一般 limit 限制大小 为 8k ，小于8k webpack会将其打包为 base64的图片,但是大于 8k的话 就不能这样处理了，进行打包的话会报错，提醒找不到 file-loader 整个模块，因此我们需要安装，file-loader

二：配置 file-loader

1.安装依赖 npm install --save-dev file-loader

2.不需要单独对file-loader 进行配置 ，配置的进行直接在url-loader中

3.此时再打包，默认大于 limit 的文件会直接调用 file-loader

4.默认情况下 是使用原来的扩展名，使用hash值作为文件名，直接打包在打包文件下。

5.此时我们需要在webpack.config.js的出口 配置上 publicPath:'dist/' 将输出解析文件的目录改为 dist ，url 相对于 HTML 页面

图片文件处理—修改文件名称

我们发现webpack自动帮助我们生成了一个非常长的名字

• 这是一个32位hash值，目的是防止名字重复
• 但是，真是开发中，我们可能对打包的图片名字有一定的要求
• 比如，将所有图片放在一个文件夹中，跟上图片原来的名称，同时也要防止重复 写法 img/name.hash:8.ext

所以我们可以在options中添加上如下选项：

• img:文件要打包到的文件夹
• name:获取图片原来的名字，放在该位置
• hash:8 为了防止图片名称冲突，依然使用hash，但是我们只保留8位
• ext:使用图片原来的扩展名

但是，我们发现图片并没有显示出来，这是因为图片使用的路径不正确

• 默认情况下，webpack会将生产的路径直接返回给使用者
• 但是，我们整个程序打包在dist文件下的，所以这里我们需要在路径下再添加一个dist

因此 最终我们只需要在 url-loader 配置的 limit下配置一个 name: 'img/[name].[hash:8].[ext]' 中括号说明是变量，hash:8说明截取hash前八位， .ext说明使用默认的扩展名

ES6语法处理

webpack打包的js文件，写的ES6语法并没有转化为ES5,那么就意味着可能一些ES6还不支持的浏览器没有办法很好的运行我们的代码

此时我们需要使用babel

• webpack中，我们直接使用babel对应的loader就可以了

• npm install --save-dev babel-loader@7 babel-core babel-preset-es2015
  

配置webpack.config.js文件

{
   
     test: /\.js$/,
     exclude: /(node_modules|bower_components)/,
     use: {
   
       loader: 'babel-loader',
       options: {
   
         presets: ['es2015']
       }
     }
   }

重新打包，查看bundle.js 文件，发现es6语法 改为了es5

如何模块化使用Vue

1.安装 Vue 因为Vue不仅仅是开发时候我们需要使用，运行的时候也需要使用，因此npm安装的时候 不再是-dev 而是 npm install --save vue

2.在 main.js 中通过import Vue from 'vue'进行导入 ,因为vue内部导出的方式是 export default vue , 因此可以这样导入，注意大小写

3.打包发现报错You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.

4.出现的原因，Vue构建最终发布版本的时候，构建了两类版本

• runtime-only 代码中不可以有任何template
• runtime-compiler 代码中，可以有template,因为有compiler可以用于 编译 【compiler 编译】

5.不难看出错误信息，简单翻译：你是用的是 runtime-only 进行构建Vue,template 不可以使用。

6.解决方式，进行webpack的配置

resolve:{
   
    alias:{
   
        // 此处是使用了 vue的 esm的一个版本，这个版本有template 语法
        'vue$': 'vue/dist/vue.esm.js'
    }
}

vue实例下的 el属性 和 temp