vue基础--06

1.模块化的分类

A.浏览器端的模块化

1).AMD(Asynchronous Module Definition,异步模块定义) 代表产品为：Require.js

2).CMD(Common Module Definition,通用模块定义) 代表产品为：Sea.js

B.服务器端的模块化

服务器端的模块化规范是使用CommonJS规范：

1).使用require引入其他模块或者包

2).使用exports或者module.exports导出模块成员

3).一个文件就是一个模块，都拥有独立的作用域

C.ES6模块化

ES6模块化规范中定义：

1).每一个js文件都是独立的模块

2).导入模块成员使用import关键字

3).暴露模块成员使用export关键字

小结：推荐使用ES6模块化，因为AMD，CMD局限使用与浏览器端，而CommonJS在服务器端使用。 ES6模块化是浏览器端和服务器端通用的规范.

2.在NodeJS中安装babel

A.安装babel 打开终端，输入命令：npm install --save-dev @babel/core @babel/cli @babel/preset-env @babel/node

安装完毕之后，再次输入命令安装：npm install --save @babel/polyfill 

B.创建babel.config.js 在项目目录中创建babel.config.js文件。

编辑js文件中的代码如下：

const presets = [ ["@babel/env",{

targets:{ edge:"17", firefox:"60", chrome:"67", safari:"11.1" } }] ]

//暴露 module.exports = { presets }

C.创建index.js文件

在项目目录中创建index.js文件作为入口文件

在index.js中输入需要执行的js代码，例如： console.log("ok");

D.使用npx执行文件 打开终端，输入命令：npx babel-node ./index.js

3.设置默认导入/导出

A.默认导出 export default { 成员A, 成员B, ....... },

如下： let num = 100;

export default{ num }

B.默认导入 import 接收名称 from "模块标识符"，如下： import test from "./test.js"

注意：在一个模块中，只允许使用export default向外默认暴露一次成员，千万不要写多个export default。 如果在一个模块中没有向外暴露成员，其他模块引入该模块时将会得到一个空对象

4.设置按需导入/导出

A.按需导出 export let num = 998;

export let myName = "jack";

export function fn = function()

{ console.log("fn") }

B.按需导入 import { num,fn as printFn ,myName } from "./test.js"

//同时导入默认导出的成员以及按需导入的成员

import test,{ num,fn as printFn ,myName } from "./test.js"

注意：一个模块中既可以按需导入也可以默认导入，一个模块中既可以按需导出也可以默认导出

5.直接导入并执行代码

import "./test2.js";

总结：

6.webpack的概念

webpack是一个流行的前端项目构建工具，可以解决目前web开发的困境。 webpack提供了模块化支持，代码压缩混淆，解决js兼容问题，性能优化等特性，提高了开发效率和项目的可维护性

1.