react项目实践——(3)babel
1. babel
Babel是一个广泛使用的转码器,可以将ES6代码转为ES5代码,从而在现有环境执行。
(1)安装
npm install --save-dev babel-core babel-eslint babel-loader babel-polyfill
babel-core :如果某些代码需要调用Babel的API进行转码,就要使用
babel-core
模块。
babel-eslint :允许使用ESLint来检查所有有效的Babel代码。
安装后,修改.eslintrc:
{
"parser": "babel-eslint",
"rules": {
"strict": 0
}
}
babel-loader:允许使用Babel和webpack转换JavaScript文件。
安装后,将babel-loader添加到模块列表中,修改webpack.config.js,添加:
module: {
rules: [
{
test: /\.jsx?$/,
loader: require.resolve('babel-loader'),
exclude: /node-modules/
}
]
}
babel-polyfill :Babel默认只转换新的JavaScript句法(syntax),而不转换新的API,比如Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise等全局对象,以及一些定义在全局对象上的方法(比如
Object.assign
)都不会转码。举例来说,ES6在
Array
对象上新增了Array.from
方法。Babel就不会转码这个方法。如果想让这个方法运行,必须使用babel-polyfill
,为当前环境提供一个垫片。安装后,脚本头部引入:
import 'babel-polyfill';// 或者require('babel-polyfill');
(2)配置
修改webpack.config.js :
module.exports = {
...
module: {
rules: [
{
test: /\.jsx?$/,
loader: require.resolve('babel-loader'),
exclude: /node-modules/
}
]
}
};
完成后,运行 npm start ,可成功打开浏览器,并无编译错误。
若编译时报错
这是因为babel-core和babel-loader版本不匹配造成的,可运行
npm install --save-dev @babel/core @babel/cli
重新安装babel-core7.x,或修改package.json内容,修改为匹配的版本号,
然后运行 npm i 重新安装。
react项目实践——(3)babel的更多相关文章
- react项目实践——(1)使用webpack创建项目
1. 新建文件夹,命名为项目名称——myapp,并打开myapp文件夹. mkdir webpack-demo && cd webpack-demo 2. 在./myapp中打开命令行 ...
- Umi + Dva + Antd的React项目实践
记录一下最近项目所用到的技术React + Dva + Antd + umi ,以免忘记.之前没有用过它们其中一个,也是慢慢摸索,了解数据整个流程. 先了解下概念 React 不多说,3大框架之一: ...
- react项目实践——(4)依赖安装与配置
1. 修改package.json,添加需要安装的包 { "name": "myapp", "version": "1.0.0&q ...
- react项目实践——(2)webpack-dev-serve
webpack-dev-server是一个小型的静态文件服务器,为webpack打包的资源文件提供Web服务.并且提供自动刷新和Hot Module Replacement(模块热替换:前端代码变动后 ...
- React项目的最佳实践
项目代码 从零开始简书项目 从我第一次接触vue这个框架已经过了快一年的时间,陪伴我从前端小白到前端工程师,前端时间也是使用了 ts+vue这样的组合写代码,明显感觉vue与ts似乎没有产生比较好 ...
- React项目 - 几种CSS实践
前言团队在使用react时,不断探索,使用了很多不同的css实现方式,此篇blog总结了,react项目中常见的几种css解决方案:inline-style/radium/style-componen ...
- 转 : CSS Modules详解及React中实践
https://zhuanlan.zhihu.com/p/20495964 CSS 是前端领域中进化最慢的一块.由于 ES2015/2016 的快速普及和 Babel/Webpack 等工具的迅猛发展 ...
- 从零开始搭建一个react项目
Nav logo 120 发现 关注 消息 4 搜索 从零开始搭建一个react项目 96 瘦人假噜噜 2017.04.23 23:29* 字数 6330 阅读 32892评论 31喜欢 36 项目地 ...
- 使用 Dawn 构建 React 项目
开发一个 React 项目,通常避免不了要去配置 Webpack 和 babel 之类,以支持 commonjs 或 es 模块及各种 es 新语法,及及进行 jsx 语法的转义.当然也可以用 cre ...
随机推荐
- bc -l 对于 %取模计算出错
https://yq.aliyun.com/articles/279384 expr % expr The result of the expression is the "rema ...
- Spring boot(三) springboot 定时任务
这个不多说,springboot 定时任务非常简单就可以实现了. 30s运行一次 , @Scheduled(cron="0,30 * * * * ?") 通过这个控制定时时间 cr ...
- P2P网络借贷系统简要解读
P2P网络借贷系统的核心功能其实很简单,就是若干投资者(借款人)集体把钱贷给贷款人,到期后,贷款人把利息和本金按时还给借款人.平台的主要作用是"撮合",收取一定的服务费和管理费. ...
- 互联网支付的"二清"介绍
所谓"二清"公司,是针对"一清"机构而言. 的"一清"和"二清"一般属于POS收单业务范畴,"一清" ...
- MinGW和MSYS项目是在一起的(翻译官网)
翻译MinGW官网的首页,首页描述了MinGW和MSYS的基本情况. Home of the MinGW and MSYS Projects(我才知道,MinGW和MSYS项目是在一起的 -_-!) ...
- Android 节日短信送祝福(功能篇:1-数据库操作类与自定义ContentProvider)
首先,还是展示一下部分目录结构: 在节日短信送祝福的功能实现方面,为了能够方便直观展示实现过程,小编我以Java文件为基础,一个一个来展示,免得到时候这个java文件写点,一下又跳到另外一个java ...
- 【40.17%】【codeforces 569B】Inventory
time limit per test1 second memory limit per test256 megabytes inputstandard input outputstandard ou ...
- Android JNI编程(三)——C语言指针的初步认识、指针变量、互换两个数、函数返回多个值
版权声明:本文出自阿钟的博客,转载请注明出处:http://blog.csdn.net/a_zhon/. 目录(?)[+] 一.什么是指针? 简单来说: 指针就是内存地址 内存地址就是指针. ...
- layer弹框在实际项目中的一些应用
官方介绍:layer至今仍作为layui的代表作,受众广泛并非偶然,而是这五年多的坚持,不断完善和维护.不断建设和提升社区服务,使得猿们纷纷自发传播,乃至于成为今天的Layui最强劲的源动力.目前,l ...
- 简单易用的动画animations
_tableView_selc.frame=CGRectMake(20, , 20,20); [UIView animateWithDuration:0.3f animations:^{ _table ...