前端技术babel的安装与使用

最新推荐文章于 2024-05-07 19:42:38 发布

namehao465

最新推荐文章于 2024-05-07 19:42:38 发布

阅读量1.3k

点赞数

分类专栏：前端技术文章标签：前端 babel

本文链接：https://blog.csdn.net/namehao465/article/details/107115045

版权

前端技术专栏收录该内容

2 篇文章 0 订阅

订阅专栏

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>

namehao465

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
前端技术babel的安装与使用

babel安装安装依赖包cnpm install --save-dev @babel/core @babel/cli @babel/preset-env @babel/nodecnpm install --save @babel/polyfill根目录创建文件babel.config.jsconst presets = [ ["@babel/env",{ targets:{ edge:"17",
复制链接

扫一扫