前端技术babel的安装与使用

babel安装

• 安装依赖包

cnpm install --save-dev @babel/core @babel/cli @babel/preset-env @babel/node
cnpm install --save @babel/polyfill

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

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

• 创建index.js

console.log("ok")

• 运行index.js

npx babel-node index.js

02 默认导出和默认导入

• 默认导出语法

//默认导出语法只能使用唯一的一次
export default{
     }

let a = 10
let c = 20
let d = 30
function show() {
     
}
export default {
     
    a,c,show
}

• 默认导入语法

import 接收名称 from '模块标识符'

import m2 from './m2.js'
console.log(m2)

03 按需导出和按需导入

• 按需导出

export let s1 = 10

export let s1 = 10
export let s2 = 'ccc'
export function say() {
     

}

• 按需导入

import {
     s1} from '模块标识符'

import {
     s1,s2 as ss2,say} from "./m3";

console.log(s1)
console.log(ss2)
console.log(say)

04 直接导入并执行模块代码

//m4.js
for (let i = 0;i<10;i++){
     
    console.log(i)
}

//index04.js
import  "./m4";

04 webpack

1. 创建隔行变色项目

• 新建空白目录，运行npm init -y命令，初始化报管理配置文件package.json
• 新建src源代码目录
• 新建src->index.html首页
• 初始化首页基本的结构
• 运行npm install jquery -s命令，安装jQuery
• 通过模块化的形式，实现列表隔行变色效果

2. webpack的安装

• 运行npm install webpack webpack-cli -D命令，安装webpack相关的包
• 在项目根目录中，创建名为webpack.config.js的webpack配置文件
• 在webpack的配置文件中，初始化如下基本配置：

module.exports={
     
    //mode指定构建模式 production development
    mode:'development'
}

• 在package.json配置文件中的script节点下，新增dev脚本如下：

"script":{
     
    //script节点下的脚本，可以通过npm run执行
    "dev":"webpack"
}

• 在终端中运行npm run dev命令，启动webpack进行项目打包

3. 配置打包的入口和出口

• 默认打包入口和出口
  • 入口为src->index.js
  • 出口为dist->main.js
• 配置打包入口和出口

//在webpack.config.js中新增配置信息
//导入操作路径的模块
const path = require('path')

module.exports={
     
    //mode指定构建模式
    // mode:'development'
    mode:'production',
    //打包入口文件的路径
    entry:path.join(__dirname,'./src/index.js'),
    output:{
     
        //输出文件的存放路径
        path:path.join(__dirname,'./dist'),
        //输出文件名称
        filename:'bundle.js'
    }
}

4. 自动打包功能

• 解决的问题

  • 修改完index.js文件后需要重新执行npm run dev重新生成转换后的js

• 步骤

  • 运行npm install webpack-dev-server -D命令，安装支持项目自动打包的工具
  • 修改package.json->scripts中的dev命令

  "scripts":{
         
      //script节点下的脚本，可以通过npm run执行
      "dev":"webpack-dev-server"
  }
  

  • 将src->index.html中，script脚本引用路径修改为/bundle.js
  • 运行npm run dev命令，重新打包
  • 在浏览器中访问，查看自动打包效果

• 注意

  • webpack-dev-server会启动一个实时打包的http服务器
  • webpack-dev-server打包生成的输出文件，默认放到了项目根目录中，而且是虚拟的、看不见的

5. 配置html-webpack-plugin生成预览页面

• 运行npm install html-webpack-plugin -D命令，安装生成预览页面的插件

• 修改webpack.config.js文件的头部区域，添加如下配置信息：

  //导入生成预览页面的插件，得到一个构造函数
  const HtmlWebpackPlugin = require('html-webpack-plugin')
  const htmlPlugin = new HtmlWebpackPlugin({
         
    //源文件
    template:'./src/index.html',
    //生成文件（存在内存中，目录中不显示）
    filename:'index.html'
  })
  

• 修改webpack.config.js文件中向外暴露的配置对象，新增如下配置节点：

  module.exports={
         
      //插件列表
      plugins:[htmlPlugin]
  }
  

6. 配置打包相关参数

• 解决的问题

  • 需要复制地址打开浏览器访问

• 修改package.json的配置

  //package.json中的配置
  //--open 打包完成后自动打开浏览器页面
  //--host 配置IP地址
  //--port 配置端口
  "script":{
  "dev":"webpack-dev-server --open --host 127.0.0.1 --port 8888" 
  }
  

7. 加载器

• 打包css文件

  • 运行npm i style-loader css-loader -D命令，安装处理css文件的loader
  • 在webpack.config.js的module->rules数组中，添加loader规则如下：

  //所有第三方文件模块的匹配规则
  module:{
         
      rules:[
          //test表示匹配的文件类型  use表示对应要调用的loader
          {
         test:/\.css$/,use:['style-loader','css-loader']}
      ]
  }
  

  • 注意
    • use数组中指定的loader顺序是固定的
    • 多个loader的调用顺序是：从后往前调用

• 打包less文件

  • 运行npm i less-loader less -D命令，安装处理less文件的loader
  • 在webpack.config.js的module->rules数组中，添加loader规则如下：

  //所有第三方文件模块的匹配规则
  module:{
         
      rules:[
          //test表示匹配的文件类型  use表示对应要调用的loader
          {
         test:/\.less$/,use:['style-loader','css-loader','less-loader']}
      ]
  }
  

• 打包scss文件

  • 运行npm i sass-loader node-sass -D命令，安装处理scss文件的loader（中文路径会安装失败）
  • 在webpack.config.js的module->rules数组中，添加loader规则如下：

  //所有第三方文件模块的匹配规则
  module:{
         
      rules:[
          //test表示匹配的文件类型  use表示对应要调用的loader
          {
         test:/\.scss$/,use:['style-loader','css-loader','sass-loader']}
      ]
  }
  

8.配置postCSS自动添加css的兼容前缀

• 解决的问题

• 浏览器前缀自动添加

• 步骤

  • 运行npm i postcss-loader autoprefixer -D命令
  • 在

  //导入自动添加前缀的插件
  const autoprefixer = require('autoprefixer')
  module.exports={
         
      //挂载插件
      plugins:[autoprefixer]
  }
  

  • 在webpack.config.js的module->rules数组中，添加loader规则如下：

  //所有第三方文件模块的匹配规则
  module:{
         
      rules:[
          //test表示匹配的文件类型  use表示对应要调用的loader
          {
         test:/\.css$/,use:['style-loader','css-loader','postcss-loader']}
      ]
  }
  

9.打包样式中的图片和字体文件

• 运行npm i url-loader file-loader -D命令

• 在webpack.config.js的module->rules数组中，添加loader规则如下：

  //所有第三方文件模块的匹配规则
  module:{
         
      rules:[
          //test表示匹配的文件类型  use表示对应要调用的loader
          {
         
              test:/\.jpg|png|gif|bmp|ttf|eot|svg|woff|woff2$/,
              use:'url-loader?limit=10284988'
          }
      ]
  }
  

• 图片大小小于limit会被转化为base64，大于或等于不会转换为base64

10.打包ES6高级js语法

• 安装babel转换器相关的包：npm i babel-loader @babel/core @babel/runtime -D

• 安装babel语法插件相关的包：npm i @babel/preset-env @babel/plugin-transform-runtime @babel/plugin-proposal-class-properties -D

• 在项目根目录中，创建babel配置文件babel.config.js并初始化基本配置如下：

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

• 在webpack.config.js的modules->rules数组中，添加loader规则如下：

  //exclude为排除项，表示babel-loader不需要处理node_modules中的js文件
  {
         test:/\.js$/,use:'babel-loader',exclude:/node_modules/}
  

11.Vue单文件组件加载器

• 运行npm i vue-loader vue-template-compiler -D命令

• 在webpack.config.js配置文件中，添加vue-loader的配置项如下：

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

12.webpack中使用Vue

• 运行npm i vue -S安装vue

• 在src->index.js入口文件中，通过import Vue from 'vue'来导入vue构造函数

• 创建vue的实例对象，并指定要控制的el区域

• 通过render函数渲染App根组件

  //导入Vue构造函数
  import Vue from 'vue'
  //导入App根组件
  import App from './components/App.vue'
  
  const vm = new Vue({
         
      //指定要控制的el区域
      el:"#app",
      //通过render函数渲染App根组件
      render:h=>h(App)
  })
  

13.webpack简单打包发布

• 修改package.json文件配置打包命令

  //在package.json文件中配置webpack打包命令
  "scripts":{
         
      "build":"webpack -p"
  }
  

Vue脚手架

1.安装

npm install -g @vue/cli
vue -V

2. 创建Vue项目

//1. 基于交互式命令行的方式，创建新版vue项目
vue create my-project

//2. 基于图形化界面的方式，创建新版vue项目
vue ui

//3. 基于2.x旧模板，创建旧版vue项目
npm install -g @vue/cli-init
vue init webpack my-project

• 命令行创建步骤

Vue CLI v4.2.2
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Linter
? Use history mode for router? (Requires proper server setup for index fallback in
production) No
? Pick a linter / formatter config: Standard
? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> t
o invert selection)Lint on save
? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config f
iles
? Save this as a preset for future projects? Yes
? Save preset as: vueSetting

cd my-project
npm run serve

3. 自定义配置

• 方式一：在package.json中添加如下信息，实现修改端口并自动打开网页

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

• 方式二（推荐）：通过单独的配置文件配置项目
  • 根目录创建vue.config.js
  • 添加如下配置

    module.exports = {
             
      "devServer": {
             
        "port": 8888,
          "open": true
      }
    }
    

4. Element-UI的使用

• 命令行安装
  • 安装依赖包npm i element-ui -S
  • 在main.js导入Element-UI相关资源

  //导入组件库
  import ElementUI from 'element-ui'
  //导入样式
  import 'element-ui/lib/theme-chalk/index.css'
  //配置Vue插件
  Vue.use(ElementUI)
  

  • 在App.vue中导入Element-UI组件

  <el-row>
    <el-button>默认按钮el-button>
    <el-button type="primary">主要按钮el-button>
    <el-button type="success">成功按钮el-button>
    <el-button type="info">信息按钮el-button>
    <el-button type="warning">警告按钮el-button>
    <el-button type="danger">危险按钮el-button>
  el-row>