6、ES6模块化和webpack打包

ES6模块化

1. 安装babel包

   yarn add @babel/core @babel/cli @babel/preset-env @babel/node

2. 安装@babel/polyfill依赖包

   yarn add @babel/polyfill

3. 根目录创建文件babel.config.js

   const presets = [
     [
       "@babel/env",
       {
         targets: {
           edge: "17",
           firefox: "60",
           chrome: "67",
           safari: "11.1",
         },
       },
     ],
   ];
   
   module.exports = { presets };

4. 运行命令

   npx babel-node file

导入模块

import $ from "jquery"

按需导入与导出

import { name } from 'file.js'

大括号内的名称需要与导出文件导出的名称一致。

直接执行导入的文件

import 'file.js'

WebPack基本使用

1. 安装webpack包

   yarn add webpack webpack-cli -D

2. 创建webpack的配置文件并配置文件

   module.exports = {
     // 编译模式
     mode: "development",
   };

3. 在package新增脚本

   {
     "scripts":{
       "dev":"webpack"
     }
   }

4. 运行

   yarn run dev

webpack打包的入口和出口

在4.x版本中默认约定入口文件为src/index.js，出口文件为/dist/main.js

module.exports = {
    // 入口文件
    entry: path.join(__dirname, "./src/index.js"),
    // 输出文件
    output: {
        path: path.join(__dirname, "./dist"), // 输出文件存放路径
        filename: "bundle.js", // 输出文件的名称
    },
};

配置自动打包

1. 安装插件

   yarn add webpack-dev-server -D

2. 修改package.json中的命令

   "scripts":{
       "dev":"webpack-dev-server"
   },

3. 运行命令

   yarn run dev

这个插件会启动一个服务器，打包生成文件放到了根目录，所以需要将引入的js路径修改为/bundle.js

此插件可能存兼容问题导致无法使用

配置预览页面

1. 安装插件

   yarn add html-webpack-plugin -D

2. 配置插件

   const HtmlWebpackPlugin = require("html-webpack-plugin");
   const htmlPlugin = new HtmlWebpackPlugin({
     template: "./src/index.html",
     filename: "index.html",
   });
   module.exports = {
     plugins: [htmlPlugin],
   };

此时打开http://localhost:8080/页面即可看到效果

自动打包相关配置

在运行webpack-dev-server时可以添加参数：

• --open

  打包完成后自动打开浏览器页面

• --host

  配置IP地址

• --port

  配置端口号

所以在package.json中就可以修改为如下内容：

"scripts": {
    "dev": "webpack-dev-server --open --host 127.0.0.1 --port 8888"
},

加载器-loader

简单来说就是将一切浏览器不支持的语言，处理成浏览器可以支持的。

Loader 的工作方式 是从右向左执行，链式地按照顺序进行编译。 loader 链中的第一个返回值给下一个 loader，在最后一个 loader，返回所预期的结果。

loader 可以是同步或异步函数，也可使用 options 对象去接受配置参数。

处理css文件

1. 安装插件

   yarn add style-loader css-loader -D

2. 编写规则

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

   • test

     为正则匹配，用于匹配文件名

   • use

     表示使用的loader

打包less文件

1. 安装插件

   yarn add less-loader less -D

2. 配置插件

   module: {
       rules: [
           {
               test: /\.less/,
               use: ["style-loader", "css-loader", "less-loader"],
           },
       ],
   },

打包scss文件

1. 安装插件

   yarn add sass-loader node-sass -D

2. 配置插件

   module: {
       rules: [
           {
               test: /\.scss/,
               use: ["style-loader", "css-loader", "scss-loader"],
           },
       ],
   },

自动添加兼容性前缀

1. 安装插件

   yarn add postcss-loader autoprefixer -D

2. 创建postcss.config.js文件，并初始化

   const autoprefixer = require("autoprefixer");
   
   module.exports = {
     plugins: [autoprefixer],
   };

3. 在webpack.config.js中，修改css的loader，新增一个postcss-loader

   module: {
       rules: [
           {
               test: /\.css/,
               use: ["style-loader", "css-loader", "postcss-loader"],
           },
       ],
   },

打包图片和字体

1. 安装插件

   yarn add url-loader file-loader -D

2. 配置插件

   module: {
       rules: [
           {
               test: /\.jpg|png|gif|bmp|ttf|eot|svg|woff|woff2$/,
               use: "url-loader?limit=16940",
           },
       ],
   },

   ?表示参数，当图片小于16940时会自动转换成base64。

babel转换

1. 安装插件

   安装转换器相关的包

   yarn add babel-loader @babel/core @babel/runtime -D

   安装插件相关的包

   yarn add @babel/preset-env @babel/plugin-transform-runtime @babel/plugin-proposal-class-properties -D

2. 创建babel.config.js配置文件，并初始化

   module.exports = {
     presets: ["@babel/preset-env"],
     plugins: [
       "@babel/plugin-transform-runtime",
       "@babel/plugin-proposal-class-properties",
     ],
   };

3. 配置webpack.config.js

   module: {
       rules: [
           {
               test: /\.js$/,
               use: "babel-loader",
               exclude: /node_modules/, // 不需要处理这个目录下的文件
           },
       ],
   },

打包VUE单文件

1. 安装插件

   yarn add vue-loader vue-template-compiler -D

2. 配置webpack.config.js文件

   const VueLoaderPlugin = require("vue-loader/lib/plugin");
   module: {
       rules: [
           {
               test: /\.vue$/,
               use: "vue-loader",
           },
       ],
   },
   plugins: [new VueLoaderPlugin()]

VUE单文件组件

每一个vue单文件都是以后缀名为.vue命名的。vue单文件组件中包含三部分区域

• template

  组件的模板区域

• script

  业务逻辑区域

• style

  样式区域

<template>
<div>
    <h1>这是App根组件</h1>
</div>
</template>

<script>
    export default {
        data() {
            return {}

        }
    }
</script>

<style scoped>
    h1 {
        color: red
    }
</style>>

在webpack项目中使用vue

1. 安装插件

   yarn add vue -S

2. 在入口文件中导入包

   import Vue from 'vue'

3. 创建vue实例对象并通过render函数渲染App根组件

   import App from "./components/App.vue";
   import Vue from "vue";
   const vm = new Vue({
     el: "#app",
     render: (h) => h(App),
   });

打包与发布

1. 在package.json中新增一个指令

   "scripts": {
       "build": "webpack -p"
   },

2. 运行yarn run build命令

   运行此命令后webpack就会读取配置文件，并按照配置文件进行打包

VUE脚手架

1. 全局安装脚手架

   npm install -g @vue/cli

2. 查看版本

   vue --version

   

利用脚手架创建项目

新版-基于交互式命令创建

vue create my-project

项目名称不能包含特殊字符以及中文

进入项目目录，运行对应的命令即可启动项目。

新版-基于图形化页面创建

vue ui

在面板上按照需求创建即可。

旧版-基于2.x的旧模板创建

npm install -g @vue/cli-init
vue init webpack my-project

找到提示进行安装即可。

脚手架的自定义配置

第一种方式

编辑package.json文件，新增vue的配置。

"vue":{
    "devServer":{
      "port":8888,
      "open":true
    }
  }

第二种方式

创建有个vue.config.js文件，并写入相关配置

module.exports = {
  devServer: {
    open: true,
    port: 8878
  }
};

Element-UI

官方地址：https://element.eleme.cn/#/zh-CN

基本使用

1. 安装依赖包

   yarn add element-ui -S

2. 导入相关资源

   // 手动配置Element-ui
   import ElementUI from "element-ui";
   import "element-ui/lib/theme-chalk/index.css";
   
   Vue.use(ElementUI);

如果编辑器设置了自动保存格式化，并且import引入资源被格式化为双引号出现如下报错：

可以尝试将编辑器的自动格式化使用ESLint