您现在的位置是:首页 > 正文

Babel处理es6语法

2024-01-30 22:42:53阅读 0

npm install --save-dev babel-loader @babel/core

npm install @babel/preset-env --save-dev // 语法转义

npm install --save @babel/polyfill  // 往低版本浏览器中添加缺失的js对象和方法

module: {
    rules: [
      {
        test: /\.m?js$/,
        exclude: /node_modules/, // 第三方的不做转义
        use: {
          loader: "babel-loader", // babel-loader并不能将es6转成ES5,所以还需要下方的插件
          options: {
            presets: ['@babel/preset-env']// 语法转义,但是只有这些还不够,这里只是转义,还需要将一些低版本的浏览器缺失的js方法和对象都添加到低版本浏览器中
          }
        }
      }
    ]
  }

import "@babel/polyfill"; 在js文件中引入, 但是这样直接引入过大,有时候不需要这么多的配置,所以需要 

module: {
    rules: [
      {
        test: /\.m?js$/,
        exclude: /node_modules/, // 第三方的不做转义
        use: {
          loader: "babel-loader", // babel-loader并不能将es6转成ES5,所以还需要下方的插件
          options: {
            presets: [['@babel/preset-env'], {
                useBuiltIns: 'usage' // 通过这个配置来优化,只添加自己需要的内容到低版本浏览器
            }]
          }
        }
      }
    ]
  }

presets还有其他的配置项 如果是业务类型的代码使用presets即可

module: {
    rules: [
      {
        test: /\.m?js$/,
        exclude: /node_modules/, // 第三方的不做转义
        use: {
          loader: "babel-loader", // babel-loader并不能将es6转成ES5,所以还需要下方的插件
          options: {
            presets: [['@babel/preset-env', {
                "targets": {
                   "chrome": "67", // 浏览器版本大于67就不需要做babel了
                },
                "useBuiltIns": "usage", // 通过这个配置来优化,只添加自己需要的内容到低版本浏览器
            }]]
          }
        }
      }
    ]
  }

 npm install --save-dev @babel/plugin-transform-runtime

npm install --save @babel/runtime

npm install --save @babel/runtime-corejs2

如果是插件库类型的代码使用plugins runtime即可, 因为在import "@babel/polyfill";会污染全局环境

module: {
    rules: [
      {
        test: /\.m?js$/,
        exclude: /node_modules/, // 第三方的不做转义
        use: {
          loader: "babel-loader", // babel-loader并不能将es6转成ES5,所以还需要下方的插件
          options: {
            "plugins": [
                [
                  "@babel/plugin-transform-runtime",
                  {
                    "corejs": 2,
                    "helpers": true,
                    "regenerator": true,
                    "version": "7.0.0-beta.0"
                    }
                ]]
          }
        }
      }
    ]
  }

 如果一直配置babel的内容 options中的内容会特别多,所以需要建立.babelrc文件

在Babel执行编译的过程中,会从项目的根目录下的 .babelrc文件中读取配置。.babelrc是一个json格式的文件。
在.babelrc配置文件中,主要是对预设(presets) 和 插件(plugins) 进行配置。.babelrc配置文件一般为如下:

{
  "plugins": [
                [
                  "@babel/plugin-transform-runtime",
                  {
                    "corejs": 2,
                    "helpers": true,
                    "regenerator": true,
                    "version": "7.0.0-beta.0"
                    }
                ]]
   presets: [
        [
            '@babel/preset-env', {
            "targets": {
                chrome": "67", // 浏览器版本大于67就不需要做babel了
            },
            "useBuiltIns": "usage", // 通过这个配置来优化,只添加自己需要的内容到低版本浏览器
            }
        ],
        "@babel/preset-react"
    ]
}

全量

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const webpack = require('webpack');

module.exports = {
	mode: 'development',
	devtool: 'cheap-module-eval-source-map',
	entry: {
		main: './src/index.js'
	},
	devServer: {
		contentBase: './dist',
		open: true,
		port: 8080,
		hot: true,
		hotOnly: true
	},
	module: {
		rules: [{ 
			test: /\.js$/, 
			exclude: /node_modules/, 
			loader: 'babel-loader',
		}, {
			test: /\.(jpg|png|gif)$/,
			use: {
				loader: 'url-loader',
				options: {
					name: '[name]_[hash].[ext]',
					outputPath: 'images/',
					limit: 10240
				}
			} 
		}, {
			test: /\.(eot|ttf|svg)$/,
			use: {
				loader: 'file-loader'
			} 
		}, {
			test: /\.scss$/,
			use: [
				'style-loader', 
				{
					loader: 'css-loader',
					options: {
						importLoaders: 2
					}
				},
				'sass-loader',
				'postcss-loader'
			]
		}, {
			test: /\.css$/,
			use: [
				'style-loader',
				'css-loader',
				'postcss-loader'
			]
		}]
	},
	plugins: [
		new HtmlWebpackPlugin({
			template: 'src/index.html'
		}), 
		new CleanWebpackPlugin(['dist']),
		new webpack.HotModuleReplacementPlugin()
	],
	optimization: {
		usedExports: true
	},
	output: {
		filename: '[name].js',
		path: path.resolve(__dirname, 'dist')
	}
}

网站文章

  • c#中如何截取Windows消息来触发自定义事件

    概要 在c#windows开发中,我们常常会遇到拦截windows消息,来触发某个特定任务的问题。 由于目前使用c#的开发人员非常多,而且大多数c#程序员都不是从Windwos c++转过来的对windows消息机制不怎么了解,遇到这类问题还是挺棘手的,我们公司有个同事问,就写这个小实例,帮助那些遇到此类问题的兄弟姐妹。 实现方式目前有两种: 1 使用Control类的虚方法WndP...

    2024-01-30 22:42:44
  • 计算机nls数据丢失损坏无法启动,系统开机出现由于NLS数据丢失或损坏

    计算机nls数据丢失损坏无法启动,系统开机出现由于NLS数据丢失或损坏

    最近有网友遇见Win7系统开机报错:由于NLS数据丢失或损坏,因此Windows无法加的问题不知道怎么解决询问,开始也不着调如何解决,但是参考了大神的方案之后给出了解决方法: 具体解决方法:方法一: ...

    2024-01-30 22:42:37
  • Hadoop-Yarn的框架原理(二)

    Hadoop-Yarn的框架原理(二)

    1、Yarn生产环境核心参数 2、Yarn生产环境核心参数配置案例 需求:从1G数据中,统计每个单词出现次数。服务器3台,每台配置4G内存,4核CPU,4线程。 The class to use as the resource scheduler. yarn.resourcemanager.scheduler.cla

    2024-01-30 22:42:08
  • django在html中显示下拉列表,Django如何从下拉列表中动态显示选定值的表/行数据...

    又是我,Django菜鸟。在我试图通过一个html表从addpy表单的dropdowm中选择一个值来显示相关的行/信息。在我收到了一份员工模型的表格。我从一个来自employee model的LOV中...

    2024-01-30 22:41:59
  • 多线程作业及答案

    多线程作业 一、填空题 1.处于运行状态的线程在某些情况下,如执行了sleep(睡眠)方法,或等待I/O设备等资源,将让出CPU并暂时停止自己的运行,进入_________状态。 2.处于新建状态的线程被启动后,将进入线程队列排队等待CPU,此时它已具备了运行条件,一旦轮到享用CPU资源就可以获得执行机会。上述线程是处于 状态。 3.一个正在执行的线程可能被人为地中断,让...

    2024-01-30 22:41:51
  • 【C/C++】内存管理(一):shared_ptr

    【C/C++】内存管理(一):shared_ptr

    智能指针是的一部分,这个头文件主要负责C++的动态内存管理。C++的动态内存管理是通过new/delete实现,这其实在使用的时候很麻烦。所谓智能指针其实是一些模板类,它们负责自动管理一个指针的内存,...

    2024-01-30 22:41:22
  • 最近,华为应用市场上线了一个服务

    最近,华为应用市场上线了一个服务

    阅读本文大概需要 2.2 分钟。华为应用市场 AppGallery Connect 服务 4 月 18 日正式上线,意在将华为在全球化、质量、安全、软件开发等领域长期构建...

    2024-01-30 22:41:14
  • 前端面试背背佳,背一背,面试效果更佳!

    前端面试背背佳,背一背,面试效果更佳!

    前端面试背背佳,背一背,面试效果更佳!

    2024-01-30 22:41:08
  • Redis7实战加面试题-高阶篇(手写Redis分布式锁)

    Redis7实战加面试题-高阶篇(手写Redis分布式锁)

    1.synchronized,单机版oK,上分布式死翘翘2.nginx分布式微服务单机锁不行3.取消单机锁,上redis分布式锁setnx只加了锁,没有释放锁,出异常的话,可能无法释放锁,必须要在代码...

    2024-01-30 22:41:00
  • 《麻省理工学院公开课:人工智能》笔记二

    《麻省理工学院公开课:人工智能》笔记二

    《03 推理:目标树与基于规则的专家系统》视频链接【Tips】首先解释一下什么是基于规则的专家系统?专家系统是人工智能的主要研究领域之一,是基于行业规则进行业务处理的计算机程序。这些规则来源于行业知识,用于描述特定条件下所要执行的动作,并且定义了相关动作对于数据的影响。因此,专家系统可以利用其推理能力得出结论或者执行相关分析任务。在专家系统中,解决问题所需的知识,作为一个规则集合存储在知识...

    2024-01-30 22:40:31