在webpack中配置babel-loader
来源:互联网 发布:excel筛选数据求和 编辑:程序博客网 时间:2024/06/05 18:51
安装
- 安装:npm i -D babel-core babel-loader babel-plugin-transform-runtime
- 安装:npm i -D babel-preset-es2015 babel-preset-stage-0
- 安装:npm i -S babel-runtime
说明:
babel-core
把 js 代码分析成 ast (抽象语法树, 是源代码的抽象语法结构的树状表现形式),方便各个插件分析语法进行相应的处理。有些新语法在低版本 js 中是不存在的,如箭头函数,rest 参数,函数默认值等,这种语言层面的不兼容只能通过将代码转为 ast,再通过
语法转换器
分析其语法后转为低版本 js。
babel-preset-*
babel-plugin-* 代表了一系列的转码插件
有了 babel-plugin 系列,可以按需配置自己想要的特性,若是想搭个 es6 环境,一个个地配置各个插件,我猜你会疯掉。babel-preset 系列就可以满足我们的需求,babel-preset 系列打包了一组插件,类似于餐厅的套餐。如 babel-preset-es2015 打包了 es6 的特性,babel-preset-stage-0 打包处于 strawman 阶段的语法
babel-runtime
babel-runtime 在代码中中直接引入 helper 函数,意味着不能共享,造成最终打包出来的文件里有很多重复的 helper 代码。所以,babel 又开发了 babel-plugin-transform-runtime,这个模块会将我们的代码重写,如将 Promise 重写成 _Promise(只是打比方),然后引入_Promise helper 函数。这样就避免了重复打包代码和手动引入模块的痛苦。
使用
第一步
/* webpack.config.js */module: { rules: [ // exclude 排除,不需要编译的目录,提高编译速度 {test: /\.js$/, use: 'babel-loader', exclude: /node_modules/} ]}
第二步
在项目根目录中新建.babelrc配置文件
// 将来babel-loader运行的时候,会检查这个配置文件,并读取相关的语法和插件配置{ "presets": ["es2015", "stage-0"], "plugins": ["transform-runtime"]}
babel-polyfill 和 transform-runtime
作用:
实现浏览器对不支持API的兼容(兼容旧环境、填补)
安装
- 命令: npm i -S babel-polyfill
- 命令:npm i -D babel-plugin-transform-runtime 和 npm i -S babel-runtime
区别:
polyfill 污染全局环境、支持实例方法
runtime 不污染全局环境、不支持实例方法
阅读全文
0 0
- 在webpack中配置babel-loader
- webpack中的babel-loader
- webpack-使用babel-loader转化ES6代码
- 在React+Babel+Webpack环境中使用ESLint
- webpack +Reactjs +babel 加载器配置
- Material-UI + React + Babel + Webpack 环境配置
- Material-UI + React + Babel + Webpack 环境配置
- webpack中的loader的配置
- webpack postcss-loader autoprefixer 配置
- Webpack 3.x 在CSS和Template中使用file-loader及解决image-webpack-loader 优化图片问题
- webpack中imports-loader,exports-loader,expose-loader的区别
- 配置React的Babel 6和Webpack 2环境
- 在webpack.config.js中配置jquery
- reactjs、webpack、babel、eslint
- webpack 各种babel 转码
- webpack和babel结合
- webpack+babel常见问题
- webpack+babel+react搭建
- 修真院_JAVA_TASK_1_part_2
- java项目——大数据量的处理 标签: 大数据内存存储
- 探讨JVM的JIT 编译器
- Deepin/Ubuntu下安装Django
- 快速幂
- 在webpack中配置babel-loader
- STM32F1和F4实现RS485简单通信
- spring自带的定时任务功能,基于注解和xml配置
- RSelenium包抓取链家网(下:数据存储与容错管理)
- 使用Eclipse在Windows下搭建Redis项目+简单测试
- 算法第15周Find K-th Smallest Pair Distance[hard]
- 机器学习---支持向量机(SVM)算法(下)
- CSDN积分攻略
- json转对象列表