Vue.js前端模块化

最新推荐文章于 2022-06-09 19:34:30 发布

企鹅宝儿

最新推荐文章于 2022-06-09 19:34:30 发布

阅读量464

点赞数

文章标签： vue

本文链接：https://blog.csdn.net/Leesure_CSDN/article/details/106872215

版权

前端模块化

常见的模块化规范：CommonJS, AMD, CMD 也有ES6的Modules

var moduleA= (function(){
  var obj={};
  obj.name='module';
  obj.flag=true;
  obj.myFun=function(info){
    console.log(info);
  }
  return obj;
})()

if(moduleA.flag){
  moduleA.myFun("调用模块A中的方法")
}

CommonJS模块化的两个核心：导入和导出

CommonJS的导入
注意module中是exports

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

CommonJS的导出

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

export的基本使用

let name='lee';
let age =18;
let height=160;
//用于导出对象
export{name,age,height}
//导出变量
export var num1=1000;
//导出函数
export function num1(a,b){
	return a+b;
}
//导出类
export class Person{
	constructor(name,age){
		this.name=name;
		this.age = age;
	}
	run(){
		//方法
	}
}

使用export指令导出了模块对外提供的接口可以使用import命令来接在对应的模块了
首先是需要在HTML代码中引入两个js文件，并且设置类型为module

import 导入的基本使用

//html
<script src='info.js' type='module'></scrpit>
//导入的名称必须和xxx.js导出的名称一致，否则会报错
import {name.age,height} from "./xxx.js"

export default 某些情况下，一个模块包含某个功能，我们并不希望给这个功能命名，而是让导入的人自己命名，这个时候就要用export default

//info.js
export default function(){
	console.log("default function")
}
//main.js
import myFun from './info.js'

但是需要注意的是，同一个js文件中，不可以有多个export default语句

Webpack

从本质上讲，webpack是现代JavaScript应用的静态模块打包工具，webpack更加强调模块化开发管理

webpack安装

webpack模块打包，为了能够正常运行，必须依赖node环境，node环境中必须安装各种依赖包才能正常执行各种代码。所以node中的npm工具就是管理node中各种包文件的(node packages manager)

安装webpack首先需要安装Node.js ,Node.js自带了软件包管理工具npm，安装版本最好>8.9
全局安装webpack ，这里指定版本号

npm install webpack@3.6.0 -g

局部安装，到相应的文件目录下，–save-dev是开发时依赖，项目打包后不需要继续使用

cd 项目根目录
npm install webpack@3.6.0 --save-dev

webpack的基本使用过程

用webpack 打包的指令

cd 项目根目录
webpack  <打包模块>.main.js   <输出目录>.xxxjs

webpack配置
文件名称：webpack.config.js


//引入path
//npm init --生成package.json
//npm install --安装package.json中指定的依赖
//npm run build
const path = require('path')

module.exports={
  entry:'./src/main.js',
  //不建议这样写
  //output:'./dist/build.js'
  output:{
    path:path.resolve(__dirname,'dist'),
    filename:'build.js'
  }
}

package.json

{
  "name": "meetwebpack",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack"   //<==自己配置
  },
  "author": "",
  "license": "ISC",
  
  "devDependencies": {
    "webpack": "^3.6.0"
  }
}

局部安装webpack并使用局部webpack

npm install webpack@3..6.0 --save-dev
node_modulles/.bin/webpack

loader

loader是webpack非常核心的概念，webpack主要是用来处理项目中的js代码，并且webpack会自动处理好js之间的相关依赖，但是在开发中我们也需要将less转换成css,或者将jsx，vue转换成js文件等等，对于webpack本身来说，这些功能是不支持的，但是将webpack扩展对应的loader就可以了

loader的使用过程

通过npm安装需要使用的loader
在webpack.config.js中的modules关键字下进行配置
不同的loader处理不同的文件，如
webpack 使用css文件配置
css-loader只负责加载css文件加载，不负责解析文件，如果需要解析css文件，需要额外安装一个loader style-loader，将模块到处作为样式放入Dom文件中

//通过npm安装需要的css-loader
npm install --save-dev css-loader
//安装
npm install --save-dev style-loader

配置

module: {
    rules: [
      {
        test: /\.css$/i,
        //使用多个loader是从右向左读，所以后添加的loader应该放在数组最前面
        use: [ 'style-loader','css-loader'],
      },
    ],
  },

webpack-less文件的处理 less-loader
注意: 如果安装的less-loader版本过高，会报错，需要调低less-loader的版本
less--Module build failed: TypeError: loaderContext.getResolve is not a function需要指定安装的less-loader版本

//指定安装版本
npm install less-loader@4.0.1 --save-dev
//安装
npm install less-loader  less --save-dev
//配置
{
        test: /\.less$/,
        use: [
          {
            loader: 'style-loader',
          },{
            loader: 'css-loader',
          },{
            loader: 'less-loader',
          }
        ]
      }

图片文件的处理 url-loader
引入url-loader

npm install --save-dev url-loader
//配置
 {
        test: /\.(png|jpg|gif|jpeg)$/i,
        use: [
          {
            loader: 'url-loader',
            options: {
            //当加载的图片，小于limit时， 会将图片编译成base64字符串形式
            //当加载的图片大于limit时候， 会使用file-loader来解析图片，因此需要额外安装file-loader
              limit: 13000,
              /*指定打包的时候图片的名称，
            即：创建img文件夹.按照原本的名称命名
            +8位hash值，使用原来文件的后缀名称
            */
  			name:'img/[name].[hash:8].[ext]'
            },
          },
        ],
      },

file-loader
安装好了file-loader之后，webpack会将图片打包到输出文件夹中，并将文件名重新命名，使用随机哈希数命名，但是这样做会引起一个问题，就是项目启动后，系统会由于没有配置图片的绝对路径而在浏览器中报错，找不到指定的文件，所以此时要在webpack.config.js中添加一个publicPath配置

 output:{
    path:path.resolve(__dirname,'dist'),
    filename:'build.js',
    //
    publicPath:'dist/'
  },

webpack ES6 转 ES5 babel-loader
如果将ES6转换成ES5，需要用到的是babel,在webpack中，直接使用babel对应的loader就可以了.

npm install --save-dev babel-loader@7 babel-core babel-preset-es2015
//配置webpack.config.js文件
{
	
      test: /\.m?js$/,
      exclude: /(node_modules|bower_components)/,
      use: {
        loader: 'babel-loader',
        options: {
          presets: ['@babel/preset-env']
        }
      }
    }

webpack配置Vue

第一步

npm install vue --save

第二步：在main.js中引入Vue对象

//引入Vue
import Vue from 'vue'
const app  = new Vue({
  el:'#app',
  data:{
    message:'hello'
  }
})

安装Vue.js的依赖不用添加-dev，因为-dev是开发时依赖，Vue在构建是会创建两个版本的代码，

runtime-only , 在该代码中不允许有任何template出现
runtime-compiler ，在代码中可以有template 因为compiler是可以用于编译template

所以在运行的时候会报错,错误信息如下：

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.

解决方案：在webpack.config.js中添加配置

resolve:{
    //别名,vue指向一个具体的文件，该文件包含了template
    alias:{
      'vue$':'vue/dist/vue.esm.js'
    }
  }

在这里插入图片描述
SPA（single page web application）通过路由跳转vue-router

el和template的区别
如果我们自定义组件，就需要修改index.html页面来修改组件，但是在实际开发中，我们并不希望手动频繁修改index.html页面，此时可以将在Vue对象中添加template属性，

const app  = new Vue({
  el:'#app',
  template:`<div></div>`,
  data:{
    message:'hello'
  }
})

在Vue中如果同时存在el和template,在编译的时候，template就会将el所挂载的标签替换掉。但是问题来了，直接在template中写代码层次不清，再次优化抽离模板,使用组件化编程

import Vue from 'vue'
const App = {
  template:`
  <div>
    <h3>{{message}}</h3>
    <button @click='btnClick'>按钮</button>
    <h3>{{name}}</h3>
  </div>
  `,
  data() {
    return {
      message:'hello webpack',
      name:'lee'
    }
  },
  methods: {
    btnClick(){
      console.log("test");
    }
  },
} 
const app  = new Vue({
  el:'#app',
  template: '<App></App>',
  components:{
    App
  }
})

如果将App对象单独存放在一个js文件中，然后在main,js中导入该文件，就可以很大程度上降低模块的耦合度
同时也可以分离出一个组件文件，文件名称叫Vue Component ，然后在main.js文件中导入该文件，但是需要在使用该功能前，安装loader

npm install vue-loader vue-template-compiler --save-dev
//修改webpack.config.js文件
 {
	test: /\.vue$ /,
	use: ['vue-loader']
}

vue-loader的版本如果>=13.0.0版本，就需要配置额外的插件

//webpack.config.js配置
const VueLoaderPlugin = require('vue-loader/lib/plugin')

//....其他配置
plugins: [
    // 请确保引入这个插件！
    new VueLoaderPlugin()
  ]

插件介绍

打包文件添加上版权信息 BannerPlugin，属于webpack自带的插件，只需要导入即可

//webpack.config.js
const webpack = require('webpack');

plugins: [
    // 请确保引入这个插件！
    new webpack.BannerPlugin('最终版权归leesure所有')
  ]

打包html的插件

现有的项目中，index.html是存放在项目的根目录下的，在真实的项目发布过过程中，发布的是dist文件夹的内容，而dist在打包的时候并没有index.html文件，所以我们需要将index.html文件也放入index.html文件打包的dist文件夹中，此时就需要 HtmlWebpackPlugin插件。
HtmlWebpackPlugin插件的作用

自动生成index.html文件
将打包的js文件，自动通过script标签插入到body中

安装插件的步骤
npm安装

npm install html-webpack-plugin --save-dev
//修稿webpack.config.js文件中plugins部分的内容
const HtmlWebpackPlugin = require('html-webpack-plugin');
plugins: [
    new HtmlWebpackPlugin()
  ]

注意安装版本的问题，如果安装的版本过高，就会报错:

Cannot read property 'make' of undefined

需要将版本降低到3.2.0！！！
需要将版本降低到3.2.0！！！
需要将版本降低到3.2.0！！！

安装成功以后，会发现新生成的html文件中，并没有添加<div id='App'></div>的标签，同时srcipt引入的的路径不需要添加上dist/路径，所以要对插件做进一步修改

//将webpack.config.js中的publicPath注释掉
publicPath: 'dist/'
//指定plugin生成html文件的模板
new HtmlWebpackPlugin({
      template:'index.html'//传入参数
    })

到此，问题解决.

压缩js的插件

在项目发布之前，我们需要将js文件进行压缩，需要使用第三方插件uglifyjs-webpack-plugin并且指定版本号位1.1.1和CLI2保持一致

npm install uglifyjs-webpack-plugin@@1.1.1 --save-dev
//修改webpack.config,js文件使用插件
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
plugins: [
    new UglifyJsPlugin()
  ]

webpack-dev-server搭建本地服务器

webpack提供了一个可选的本地开发服务器，基于node.js搭建，内部使用express框架，可是实现浏览器自动刷新显示修改后的效果，不需要每次修改完页面后都要手动run build一次
使用该本地服务器开发，需要安装一个模块

//此处指明了版本号
npm install --save-dev webpack-dev-server@2.9.1

如果版本过高，则需要安装webpack-cli ,高版本的webpack-dev-server和webpack-cli是分离的
devServer是作为webpack中的一个选项，可以设置如下属性，

contentBase: 为哪一个文件夹提供本地服务
inline : 页面实时刷新
historyApiFallback ：在SPA页面中，依赖HTML5的history模式

webpack.config.js的配置如下

devServer:{
	contentBase:'./dist',
	inline: true
}
//同时需要另外添加一个scripts,--open表示直接打开浏览器
//package.json
"dev":"webpack-dev-server --open"

webpack配置文件的分离

开发时的配置文件可能和实际发布时候的配置文件可能有点差异，所以要做配置文件的分离，在文件的根目录下建立build文件，然后建立三个文件夹

base.config.js //基本配置文件，存放开发配置和发布配置的公共部分
prod.config.js // 存放发布配置的特殊部分
dev.config.js // 存放开放配置的特殊部分

然后再package.json中修改script配置，指定启动的配置文件

"build": "webpack --config ./build/prod.config.js",
"dev": "webpack-dev-server --open --config ./build/dev.config.js"