分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 运营维护

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

发布时间:2023-09-06 02:31责任编辑:傅花花关键词:js配置webpack
参考: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-envcnpm 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

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

原文地址:https://www.cnblogs.com/songxia/p/10314420.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved