视频学习笔记05

视频学习笔记

vue模块化开发学习

为什么使用模块化开发

在网页开发早期，JavaScript作为一种脚本语言，做一些简单的表单验证或动画实现，代码很少
随着ajax异步请求的出现，慢慢形成了前后端的分离
客户端需要完成的事情越来越多，代码量也会增加
为了应对代码量的剧增，会将代码组织在多个js文件中进行维护
但是仍然会出现问题，比如全局变量同名问题
这种代码编写方式对js文件的依赖顺序几乎是强制性的
对于重名问题，可以使用匿名函数来解决，在匿名函数内部定义一个对象，给对象添加各种需要暴露到外面的属性和方法，将对象返回，并定义接收。CommonJS使用module.exports = {}导出，使用require来导入。ES6使用export来导出，用import {} from ""来导入。
在引用js文件时，可以在script标签中添加type="module"来使各个文件形成模块化。但是用module会出现跨域错误， Chrome会出现报错，不是不支持加载模块，而是ES6模块遵循同源策略，解决办法就是打开本地服务器，让各个文件同源即可，在vscode下载live server，然后open with live server

使用webpack

如果js文件使用模块化，直接在浏览器中是无法显示的，浏览器并不能识别，且引用很多js代码不方便管理，使用webpack对多个js文件进行打包，它支持我们代码中写模块化，对代码进行处理，打包指令为webpack src/main.js dist/bundle.js,main.js是项目入口文件，dist为存放之后打包的文件
但是运行时会报错：

运行webpack ./src/main.js ./dist/bundle.js时报错：
webpack : 无法加载文件 D:\node js\node_global\webpack.ps1，因为在此系统上禁止运行脚本。有关详细信息，请参阅 https:/go.mi
crosoft.com/fwlink/?LinkID=135170 中的 about_Execution_Policies。
所在位置 行:1 字符: 1
+ webpack ./src/main.js ./dist/dundle.js
+ ~~~~~~~
    + CategoryInfo          : SecurityError: (:) []，PSSecurityException
    + FullyQualifiedErrorId : UnauthorizedAccess

解决办法为：
（1）以管理员身份运行vs code
（2）在终端执行：get-ExecutionPolicy，显示Restricted（表示状态是禁止的）
（3）在终端执行：set-ExecutionPolicy RemoteSigned
（4）在终端执行：get-ExecutionPolicy，显示RemoteSigne

webpack的配置

建立webpack.config.js文件

//webpack.config.js文件
const path = require('path')
module.exports = {
    entry: './src/main.js',
    output: {
        path: path.resolve(__dirname,'dist'),
        filename: 'bundle.js'
    },
}

其中entry为入口文件位置，output为打包文件位置（必须要绝对路径），path为动态获取路径，依赖于node相关包，所以使用npm init初始化配置package.json文件，如果还有依赖一些东西，可以使用npm install，配置完成就可以使用webpack在终端进行打包，在package.json文件中配置完build就可以使用npm run build打包文件

//package.json文件
{
  "name": "meetwebpack",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack" 
   // 配置，敲npm run build代替webpack
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "css-loader": "^3.5.1",
    "webpack": "^3.6.0"
  }
}

如果这个项目使用的webpack和全局版本不一致导致打包出现问题的，可以局部安装webpack，局部安装命令为npm install webpack@3.6.0 --save-dev，–save-dev是开发时依赖，项目打包后不需要继续使用到的，通过命令node_modules/.bin/webpack进行打包；也可以在package.json的scripts中定义自己的执行脚本，package.json中的scripts脚本在执行时，会按照一定的顺序寻找对应的命令，首先会寻找本地的node_modules/.bin路径中对应的命令，没有找到会使用全局环境变量,配置完就可以直接使用npm run build用本地webpack安装
补充：在终端敲webpack都是使用全局安装的webpack，全局安装webpack命令为npm webpack@3.6.0 -g