webpack.config.js====配置babel

Dear 丶 2022-01-06 04:09 304阅读 0赞

参考：https://www.jianshu.com/p/9808f550c6a9
    1. 安装依赖
    babel-loader: 负责 es6 语法转化
    babel-preset-env: 包含 es6、7 等版本的语法转化规则
    babel-polyfill: es6 内置方法和函数转化垫片
    babel-plugin-transform-runtime: 避免 polyfill 污染全局变量

cnpm install --save-dev babel-core babel-loader babel-plugin-transform-runtime babel-preset-env cnpm install --save-dev babel-polyfill babel-runtime

2. 创建一个单独的babel配置文件  .babelrc，配置如下

{ "presets": [ [ "env", { "targets": { "browsers": ["last 2 versions"] } } ] ], "plugins": ["transform-runtime"] }

3. webpack.config.js中的配置

//配置babel
     { test: /\.js$/, exclude: /(node_modules)/, loader: 'babel-loader' }

4. 使用：

babel的引入方式
    　　1.require("babel-polyfill");
    　　2.import "babel-polyfill";
    　　在webpack项目中一般使用下面的方式
    　　3.module.exports = {
        
    　　　　entry: ["babel-polyfill", "./app/js"]
    　　};
    在 index.js中使用：

import "babel-polyfill"; let arr = [1, 2, 4]; let arrB = arr.map(item => item * 2); console.log("可以使用ES6语法："+arrB.includes(8));

5. 注意：

babel-loader:8.X版本报错的问题（建议直接使用7.1.5版本）
    cnpm uninstall --save-dev babel-loader@7.1.5
    参考：https://www.cnblogs.com/soyxiaobi/p/9554565.html

转载于:https://www.cnblogs.com/songxia/p/10314420.html

发表评论取消回复

表情：

评论列表（有 0 条评论，304人围观）

还没有评论，来说两句吧...

相关阅读

相关 babel原理_Babel运行原理

前言之前翻博客园的时候,看到有人朋友分享阿里巴巴的面试题,其中有一道题就是关于ES6转ES5 原理的,当时我看到感觉到自己离去阿里巴巴的路还很远啊,像我们大部分做开发的时

朴灿烈づ我的快乐病毒、/ 2022年12月31日 15:21/ 0 赞/ 234 阅读

相关 Babel

Babel是什么 Babel是转码器，把ES6代码转换成ES5代码，因为写的代码是ES6代码，但是ES6代码浏览器兼容性很差，如果使用ES5代码浏览器兼容性很好，编写ES

不念不忘少年蓝@/ 2022年12月09日 04:53/ 0 赞/ 185 阅读

相关 Babel入门配置

1. babel环境搭建和基本配置高级语法通过.babelrc文件中的presets下的@babel/preset-env解决,如果用react就是添加@babel/p

墨蓝/ 2022年11月25日 00:54/ 0 赞/ 199 阅读

相关 express配置babel

[原文地址：老树新芽，在ES6下使用Express][ES6_Express] 要让Express在ES6下跑起来就不得不用转码器Babel了。首先新建一个在某目录下新建一个

小灰灰/ 2022年06月10日 01:37/ 0 赞/ 218 阅读

相关 webpack中babel的配置

目的：webpack，默认只能解析一部分的ES6的语法，我们需要安装babel插件，来辅助webpack解析语法。第一步：安装插件 1-1：（cnpm i ba

比眉伴天荒/ 2022年05月15日 11:35/ 0 赞/ 262 阅读

相关 babel

最新更新时间：2019年2月1日14:18:12 [`《猛戳-查看我的博客地图-总有你意想不到的惊喜》`][-_-] > 本文内容：babel相关知识概述

ゝ一世哀愁。/ 2022年03月21日 11:53/ 0 赞/ 251 阅读

相关 es6笔记二babel配置

低版本的；浏览器不认识es6用babel来编译，使用方法：一、如下，这种方法不好，受限制比较严重i7不兼容，响应速度慢，代码多的话 ![watermark_type_Zm

谁践踏了优雅/ 2022年02月04日 00:07/ 0 赞/ 247 阅读

相关 webpack.config.js====配置babel

参考：https://www.jianshu.com/p/9808f550c6a9 1. 安装依赖 babel-loader: 负责 es6 语法转化

Dear 丶/ 2022年01月06日 04:09/ 0 赞/ 305 阅读

相关 babel

babel 版本 `babel-loader@7`需要`babel-core babel-preset-env` `babel-loader@8`需要`@babel/c

电玩女神/ 2021年12月15日 00:43/ 0 赞/ 298 阅读

相关 Babel babel-transform-runtime和babel-polyfill一些理解

明确Babel作用: Babel的转换分为两部分syntax语法(let, const等)和api(Promise,Set,Symbol,Array.from

阳光穿透心脏的1/2处/ 2021年07月24日 16:43/ 0 赞/ 495 阅读