Vue--ES6模块化和webpack打包

模块化的分类

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模块化是浏览器端和服务器端通用的规范.

在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

设置默认导入/导出

A.默认导出

  export default {
   
        成员A,
        成员B,
        .......
    },如下：
    let num = 100;
    export default{
   
        num
    }

B.默认导入
import 接收名称 from “模块标识符”，如下：

   import test from "./test.js"

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

设置按需导入/导出

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"

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

直接导入并执行代码
import “./test2.js”;

webpack的概念

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

webpack的基本使用

A.创建项目目录并初始化
创建项目，并打开项目所在目录的终端，输入命令：
npm init -y
B.创建首页及js文件
在项目目录中创建index.html页面，并初始化页面结构：在页面中摆放一个ul，ul里面放置几个li
在项目目录中创建js文件夹，并在文件夹中创建index.js文件
C.安装jQuery
打开项目目录终端，输入命令:
npm install jquery -S 注意是jquery而不是jQuery
D.导入jQuery
打开index.js文件，编写代码导入jQuery并实现功能：

    import $ from "jquery";
    $(function(){
   
        $("li:odd").css("background","cyan");
        $("li:odd").css("background","pink");
    })

注意：此时项目运行会有错误，因为import $ from “jquery”;这句代码属于ES6的新语法代码，在浏览器中可能会存在兼容性问题
所以我们需要webpack来帮助我们解决这个问题。

安装webpack

1).打开项目目录终端，输入命令:
npm install webpack webpack-cli -D
2).然后在项目根目录中，创建一个 webpack.config.js 的配置文件用来配置webpack
在 webpa