webpack 4.x使用babel8.x编译es6及新API

最新推荐文章于 2021-08-18 08:42:00 发布

置顶二月三十 . o O

最新推荐文章于 2021-08-18 08:42:00 发布

阅读量1.1k

点赞数

分类专栏： webpack 文章标签： webpack babel es6

本文链接：https://blog.csdn.net/qq_32935485/article/details/90721095

版权

webpack 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

webpack 4.x使用babel 8.x编译es6以及新语法

1、初始化项目
2、webpack安装及初始化
3、babel
- - - 安装babel
    - - 插件用途：
        根目录创建babel.config.js文件
        webpack.config.js配置
        安装@babel/polyfill和@babel/plugiin-transfrom-runtime
        修改babel.config.js文件
- 配置文件详情预览

1、初始化项目

如图：（所有文件为空白或者初始化）
执行命令：npm init
在这里插入图片描述

2、webpack安装及初始化

1）安装命令：npm install -D webpack webpack-cli

安装完成提示：
+ webpack@4.32.2
+ webpack-cli@3.3.2

2）在js文件夹下创建index.js文件

//index.js

console.log("恭喜你打印了index.js文件的内容");

3）配置webpack.config.js

const path = require("path");

module.exports = {
	entry:"./src/js/index.js",
	
	output:{
		path:path.resolve(__dirname,"dist"),
		filename:"bundle.js"
	}
}

4）配置package.json

在这里插入图片描述
5）终端执行：npm run build
然后把index.html引入dist下的bundle.js文件，并执行index.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>webpackdemo</title>
	</head>
	<body>
		
		<script src="dist/bundle.js"></script>
	</body>
</html>

浏览器成功提示：
在这里插入图片描述

3、babel

安装babel

1）安装babel-loader：npm install babel-loader
2）安装babel相关的插件：npm install --save-dev @babel/core @babel/cli @babel/preset-env

插件用途：

1）@babel/core：@babel/core是babel的核心存在，babel的核心API都存在这个模块里面，比如：transform。@babel/preset-env是一个只能预设，允许你使用最新的js。

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

//babel.config.js
const presets = [
	["@babel/preset-env", {
		"useBuiltIns": "usage", // 在每个文件中使用polyfill时，为polyfill添加特定导入。利用捆绑器只加载一次相同的polyfill。
		"modules": false, // 启用将ES6模块语法转换为其他模块类型，设置为false不会转换模块。
	}]
];

module.exports = {
	presets
};

webpack.config.js配置

//webpack.config.js
const path = require("path");

module.exports = {
	entry: "./src/js/index.js",

	output: {
		path: path.resolve(__dirname, "dist"),
		filename: "bundle.js"
	},

	module: {
		rules: [{
			test: /\.js$/,
			loader: 'babel-loader',
			exclude: /node_modules/
		}]
	}
}

到了这一步执行npm run build，在index.html下添加es6的语法，然后IE9浏览器打开index.html，浏览器是不会报错了，因为babel已经把es6的语法编译成es5语法了，但是babel只是转换es6新语法，不会转换新的API，如：Set，Map，Promise等，那么就要使用到@babel/polyfill和@babel/plugin-transfrom-runtime两个东西，由于@babel/polyfill添加到全局范围，所以@babel/plugin-transfrom-runtime是防止@babel/polyfill全局污染。

安装@babel/polyfill和@babel/plugiin-transfrom-runtime

1）安装命令：npm install --save @babel/polyfill

npm install --save @babel/plugin-tranfrom-runtime

修改babel.config.js文件

//babel.config.js
const presets = [
	["@babel/preset-env", {
		"useBuiltIns": "usage", // 在每个文件中使用polyfill时，为polyfill添加特定导入。利用捆绑器只加载一次相同的polyfill。
		"modules": false, // 启用将ES6模块语法转换为其他模块类型，设置为false不会转换模块。
		"targets": {
			"browsers": "last 2 versions, not ie <= 9"
		}
	}]
];

const plugins = [
	["@babel/plugin-transform-runtime", {
		"helpers": false
	}]
];

module.exports = {
	presets,
	plugins
};

到了这一步就可以在js文件下的index.js写新的API了，如：Set,Map等。

配置文件详情预览

1）webpack.config.js

//webpack.config.js
const path = require("path");

module.exports = {
	entry: "./src/js/index.js",

	output: {
		path: path.resolve(__dirname, "dist"),
		filename: "bundle.js"
	},

	module: {
		rules: [{
			test: /\.js$/,
			loader: 'babel-loader',
			exclude: /node_modules/
		}]
	}
}

2）package.json

{
  "name": "webpackdemo",
  "version": "1.0.0",
  "description": "",
  "main": "webpack.config.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --mode production"
  },
  "keywords": [
    "webpack"
  ],
  "author": "lv",
  "license": "ISC",
  "devDependencies": {
    "@babel/cli": "^7.4.4",
    "@babel/core": "^7.4.5",
    "@babel/plugin-transform-runtime": "^7.4.4",
    "@babel/polyfill": "^7.4.4",
    "@babel/preset-env": "^7.4.5",
    "babel-loader": "^8.0.6",
    "webpack": "^4.32.2",
    "webpack-cli": "^3.3.2"
  },
  "dependencies": {}
}

3）babel.config.js

//babel.config.js
const presets = [
	["@babel/preset-env", {
		"useBuiltIns": "usage", // 在每个文件中使用polyfill时，为polyfill添加特定导入。利用捆绑器只加载一次相同的polyfill。
		"modules": false, // 启用将ES6模块语法转换为其他模块类型，设置为false不会转换模块。
		"targets": {
			"browsers": "last 2 versions, not ie <= 9"
		}
	}]
];

const plugins = [
	["@babel/plugin-transform-runtime", {
		"helpers": false
	}]
];

module.exports = {
	presets,
	plugins
};

4）项目的目录列表
在这里插入图片描述
友情链接：前端网