详解webpack babel的配置
时间:2019-04-12
本文章向大家介绍详解webpack babel的配置,主要包括详解webpack babel的配置使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
Babel是什么
Babel是一个编译JavaScript的平台,它的强大之处表现在可以通过编译帮你达到:
- 使用下一代的javascript(ES6,ES7,……)代码,即使当前浏览器没有完成支持;
- 使用基于JavvScript进行扩展语言,比如React的JSX;
npm i babel-core babel-preset-env babel-loader babel-plugin-transform-runtime babel-preset-stage-2 -D
关于babel的使用
首先 babel-preset-es2015 已经废弃,你可以使用 babel-preset-env 来代替它,后者比前者更好的更方便,这里不在赘述。
babel-polyfill VS babel-runtime VS babel-plugin-transform-runtime
- 首先 babel-polyfill 是对所有的API进行全局设置。并且会污染全局变量。
- babel-runtime 需要对你需要的API,如:Object.assign()。会先require()
- babel-plugin-transform-runtime 最推荐。它不需要require()也不会全局污染,并且,更厉害的是它是按需打包,全自动。
开始
/**** webpack.config.js ****/ // 在规则中增加 { test: /\.js$/, use: 'babel-loader', // 只处理src目录下面的。 // 你也可以配置一条规则处理node_modules下面的。 // 我记得swiper不知道哪一版本的直接把原来为编译的es6的语法塞给我,导致浏览器不兼容。 include:[resolve('../src')] } /**** .babelrc ****/ // presets字段设定转码规则 { "presets": [ ["env", { "modules": false, // 需要支持的环境,可选入: chrome, edge, 也可以node:6.5 ,node:current...... "targets": { "browsers": ["> 1%", "last 2 versions", "not ie <= 8"] } }], "stage-2" ], // babel-transform-plugin转码预设不起作用的内容如:Object.assign()等等 "plugins": ["transform-runtime"] }
presets能够解决哪些语法。 package
babel-plugin-transform-runtime能够解决哪些语法。 package
其他。 更多
最后:babel看上去好像要配置很多,其实经过官方的一顿简化之后需要的并没有那么繁琐。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
- Java基础-20(01)总结,递归,IO流
- 一个Oracle bug的手工修复(r6笔记第59天)
- 由drop datafile导致的oracle bug(r6笔记第56天)
- Java中static关键字的作用
- Java基础-20(02)总结,递归,IO流
- Hive四种数据导入方式
- 34c3 部分Web Writeup
- 原来Oracle也不喜欢“蜀黍"(r6笔记第54天)
- Java基础19(01)总结IO流,异常try…catch,throws,File类
- 使用shell生成orabbix自动化配置脚本(r6笔记第53天)
- 现在 tensorflow 和 mxnet 很火,是否还有必要学习 scikit-learn 等框架?
- 数据的标准化与中心化以及R语言中的scale详解
- Java基础19(02)总结IO流,异常try…catch,throws,File类
- HTML5 — header
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Python单元测试及unittest框架用法实例解析
- Tensorflow中批量读取数据的案列分析及TFRecord文件的打包与读取
- YII框架实现自定义第三方扩展操作示例
- 在Tensorflow中实现leakyRelu操作详解(高效)
- Django def clean()函数对表单中的数据进行验证操作
- Python3爬虫中Splash的知识总结
- Laravel框架自定义公共函数的引入操作示例
- PHP PDOStatement::setFetchMode讲解
- Python QTimer实现多线程及QSS应用过程解析
- PHP count()函数讲解
- Laravel中9个不经常用的小技巧汇总
- PHP simplexml_load_string()函数实例讲解
- php文件操作之文件写入字符串、数组的方法分析
- php xhprof使用实例详解
- PHP获取远程http或ftp文件的md5值的方法