关于如何配置bable

在项目开发时，有时需要配置bable，记录一下，以便后续用到：
项目要配置bable，需要先配置webpack

npm i -D webpack webpack-cli

参考：

使用Babel
@babel/plugin-transform-runtime

通过yarn

yarn add babel-loader @babel/core @babel/preset-env @bable/plugin-transform-runtime -D
# 由于@bable/plugin-transform-runtime依赖于@bable/runtime，所以需要在生产环境下安装
yarn add @bable/runtime -S

或者npm:

npm i babel-loader @babel/core @babel/preset-env @bable/plugin-transform-runtime -D
npm i @bable/runtime -S

配置：babel.config.js或者.babelrc

这里使用.babelrc

{"presets":["@babel/preset-env"],"plugins":["@babel/plugin-transform-runtime"]
}

// webpack.config.js
{module:{rules:[{test:/\.js$/,exclude: /node_modules/, use:['babel-loader']}]}
}

关于如何配置bable相关推荐

webpack 转换 ES6高级语法 bable插件 module rules
// 在webpack中只能处理一部分es6语法一些高级的ES6或者ES7 webpack处理不了借助第三方loader处理会将结果打包到main.js // loader 通过Bable可以转 ...
Ant Design离线使用Icon图标资源
使用环境:开发环境内网 node + React + antd 第一种方法:[推荐] 第一种方法[原创]: 想在网上找到的第二种方法,试验一下可以.但是我不想失去按需加在css的功能,所以自己 ...
Mobx-basic(快速上手)莞式教程
Mobx-basic(快速上手)莞式教程之前写过一篇redux的教程可以参考redux的教程本篇讲通过通俗易懂的方式让你快速上手mobx 的基本使用,虽然已经可以满足大部分开发中的需求但是详细 ...
bable.config.js配置element
按需引入时,官方文档要求配置写成 { "presets": [["es2015", { "modules": false }]], &quo ...
react 用html插件,React配置过程中用到的插件汇总
●react插件 ●react-dom插件 ●react-router插件 ●react-redux插件 ●babel插件 ●webpack插件 ●loader插件 ●jquery插件 ●moment ...
Bable实现由ES6转译为ES5
Babel是一个广泛使用的转码器,可以将ES6代码转译为ES5代码,从而在现有环境下执行. 举例说明: 转译前(ES6格式)代码如下: let User = { name : '张三', age : ...
webpack4 入门配置研究
1. 全局安装 npm install webpack webpack-cli webpack-dev-server -g 1.1)输密文的密码(电脑开机) 1.2)安装成功 2. 输入命令mkdir ...
babel 用法及其 .babelrc 的配置详解，想做前端架构，拒绝一知半解...
Babel 官方介绍:将 ECMAScript 2015 及其版本以后的 javascript 代码转为旧版本浏览器或者是环境中向后兼容版本的 javascript 代码. 简而言之,就是把不兼容的 ...
webpack 配置 react-pro
1.首先执行 npm init ,生成package.json文件, package.json文件中包含项目名称,描述,作者等等信息: 在package.json中配置信息,除了这些之外,还要配 ...
webpack之配置es6转换成es5
webpack之配置es6转换成es5 为什么要将代码中的es6语法转换成es5语法呢?这是因为有些浏览器无法识别es6语法.而webpack在不借助babel的情况下,只能对js进行打包处理,无法将 ...

关于如何配置bable

关于如何配置bable相关推荐

最新文章

热门文章