关于webpackbabel的信息

本篇文章给大家谈谈webpackbabel，以及对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。

本文目录一览：

• 1、webpack babel 怎么将Object.assign() 转成es5语法
• 2、Webpack干货系列 - Webpack5 怎么集成Babel？
• 3、webpack与babel关系与区别
• 4、webpack配置bable

webpack babel 怎么将Object.assign() 转成es5语法

习惯了WebStorm的话..我就假设题主会用Node.js和npm啦～

一句话总结：用WebStorm自带的File

Watcher功能+Babel实现自动转换ECMAScript

6代码为ES5代码

我是这么配置的..就先新建一个Empty

Project，然后在src目录下新建了一个main.js；

//

这一步不是必须的

只是刚上手的话

从空项目开始自己配置会少很多干扰

Then..进入设置，把JavaScript

language

version改成ECMAScript

6；

再Then..写一中帆闷段ES6代码

'use

strict';

//

node直接运行ES6代码时，如使用了ES6的一些关键字，比如let，就需要严格模式，否则会报错

//

这是没有严格模式卖弯时候的错误提示

//

SyntaxError:

Block-scoped

declarations

(let,

const,

function,

class)

not

yet

supported

outside

strict

mode

function*

fibs()

{//

Generator

Function

let

a

=

0;

let

b

=

1;

while

(true)

{

yield

a;

//

[a,

b]

=

[b,

a

+

b];

b

=

a

+

b;

a

=

b

-

a;

}

}

let

[first,

second,

third,

fourth,

fifth,

sixth]

=

fibs();

console.log(first,

second,

third,

fourth,

fifth,

sixth);

现在IDE会出现一个File

watcher提示条

先别点Add

watcher！我们要先去装babel～

首先在根目录新建一个package.json

{

"name":

"test-project",

"version":

"1.0.0"

}

然后轿戚打开IDE的Terminal，安装babel-cli

npm

install

--save-dev

babel-cli

Good!

现在可以去点Add

watcher啦，点完之后会弹出一个框，其中大部分设置IDE都帮你搞定了

下面第三行，Program那一项，填

$ProjectFileDir$/node_modules/.bin/babel

然后点OK，这个时候你就会发现左边多出来一个main-compiled.js文件啦

但是还没搞定！现在只是搞定了自动转换的功能，系统默认把ES6

compile成了ES6..（你应该会发现compile出来的东西跟原来的一样..Generator函数并没有被转换成ES5的格式）

所以我们需要安装Babel的preset以正确识别ES6代码；

和刚才一样，在npm安装babel的ES6的preset

npm

install

--save-dev

babel-preset-es2015

在根目录下新建一个.babelrc文件（就是babel在当前项目的配置文件），写上

{

"presets":

[

"es2015"

]

}

OK搞定！保存再回去看一下main-compiled.js

应该就变成这个样子啦，现在你在main.js里直接写ES6代码，IDE都会自动compile成ES5的代码在这里啦～

注意：想直接用Node.js运行ES6代码还是有些问题..因为这段代码用的ES6的解构赋值Node.js还未完全支持，需要在运行的时候加入一些tags（以开启Node.js的相关试验特性），具体可以参考Node.js官网对ES6的说明：ECMAScript

2015

(ES6)。

Webpack干货系列 - Webpack5 怎么集成Babel？

Babel 对于前端开发来说是不可缺少的一部分，用于将 ES6 或更高版本语法编写的代码转换为向后兼容的 JavaScript 语法。关于 Babel 的详细介绍，参考《Babel》一文。本文详细介绍如何在 webpack 5 中集成 Babel。

webpack 使用 loader 的方式集成 babel，安装 babel-loader 有关的依赖：

在根路径下创建 babel 的配置文件： babel.config.js

上面仅配迟禅卜置了预设（智能预设，可以编译 ES6 的语法）

修改 webpack.config.js，添加babel-loader来处理JS文件：

exclude 属性表示排除，及满足 exclude 正则表袭梁达式的文件不使用这个loader进行处理。

在配置babel-loader之前，可以在码穗打包后的 bundle.js 文件中看到箭头函数等 ES6 的语法。配置后重新执行 yarn build 打包，查看 bundle.js 文件，里面 ES6 的语法都转为了 ES5，说明 babel 配置生效。

[img]

webpack与babel关系与区别

.babelrc / babel.config.js

webpack.config.js （ module.rules 允许你在和余 webpack 配置中指定多个袜亩 loader）

参考 webpack，Babel，唤好滚babel-loader的关系

webpack配置bable

1.babel-loader是webpack 与 babel的通信桥梁，不会做把es6转成es5的⼯作，这部分⼯作需要⽤到

@babel/preset-env来做

2.@babel/preset-env⾥包含了es，6，7，8转es5的转换规则

通过上⾯的⼏罩吵脊步 还不够，默认的Babel只⽀持let等⼀些基础的特性转换，Promise等⼀些还有转换过

来，这时候需要借助@babel/polyfill，把es的新特性都装进物渗碰晌来，来弥补低版本浏览器中缺失的特性

以全局变量的⽅式注⼊进来的。windows.Promise，它会造成全局对象的污染

babelrc⽂件：

新建.babelrc⽂件，把options部分移⼊到该⽂件中，就可以了

关于webpackbabel和的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。