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的更多相关文章

  1. react项目实践——(1)使用webpack创建项目

    1. 新建文件夹,命名为项目名称——myapp,并打开myapp文件夹. mkdir webpack-demo && cd webpack-demo 2. 在./myapp中打开命令行 ...

  2. Umi + Dva + Antd的React项目实践

    记录一下最近项目所用到的技术React + Dva + Antd + umi ,以免忘记.之前没有用过它们其中一个,也是慢慢摸索,了解数据整个流程. 先了解下概念 React 不多说,3大框架之一: ...

  3. react项目实践——(4)依赖安装与配置

    1. 修改package.json,添加需要安装的包 { "name": "myapp", "version": "1.0.0&q ...

  4. react项目实践——(2)webpack-dev-serve

    webpack-dev-server是一个小型的静态文件服务器,为webpack打包的资源文件提供Web服务.并且提供自动刷新和Hot Module Replacement(模块热替换:前端代码变动后 ...

  5. React项目的最佳实践

    项目代码 从零开始简书项目 ​ 从我第一次接触vue这个框架已经过了快一年的时间,陪伴我从前端小白到前端工程师,前端时间也是使用了 ts+vue这样的组合写代码,明显感觉vue与ts似乎没有产生比较好 ...

  6. React项目 - 几种CSS实践

    前言团队在使用react时,不断探索,使用了很多不同的css实现方式,此篇blog总结了,react项目中常见的几种css解决方案:inline-style/radium/style-componen ...

  7. 转 : CSS Modules详解及React中实践

    https://zhuanlan.zhihu.com/p/20495964 CSS 是前端领域中进化最慢的一块.由于 ES2015/2016 的快速普及和 Babel/Webpack 等工具的迅猛发展 ...

  8. 从零开始搭建一个react项目

    Nav logo 120 发现 关注 消息 4 搜索 从零开始搭建一个react项目 96 瘦人假噜噜 2017.04.23 23:29* 字数 6330 阅读 32892评论 31喜欢 36 项目地 ...

  9. 使用 Dawn 构建 React 项目

    开发一个 React 项目,通常避免不了要去配置 Webpack 和 babel 之类,以支持 commonjs 或 es 模块及各种 es 新语法,及及进行 jsx 语法的转义.当然也可以用 cre ...

随机推荐

  1. bc -l 对于 %取模计算出错

    https://yq.aliyun.com/articles/279384 expr % expr    The  result of the expression is the "rema ...

  2. Spring boot(三) springboot 定时任务

    这个不多说,springboot 定时任务非常简单就可以实现了. 30s运行一次 , @Scheduled(cron="0,30 * * * * ?") 通过这个控制定时时间 cr ...

  3. P2P网络借贷系统简要解读

    P2P网络借贷系统的核心功能其实很简单,就是若干投资者(借款人)集体把钱贷给贷款人,到期后,贷款人把利息和本金按时还给借款人.平台的主要作用是"撮合",收取一定的服务费和管理费. ...

  4. 互联网支付的"二清"介绍

    所谓"二清"公司,是针对"一清"机构而言. 的"一清"和"二清"一般属于POS收单业务范畴,"一清" ...

  5. MinGW和MSYS项目是在一起的(翻译官网)

    翻译MinGW官网的首页,首页描述了MinGW和MSYS的基本情况. Home of the MinGW and MSYS Projects(我才知道,MinGW和MSYS项目是在一起的 -_-!) ...

  6. Android 节日短信送祝福(功能篇:1-数据库操作类与自定义ContentProvider)

    首先,还是展示一下部分目录结构:  在节日短信送祝福的功能实现方面,为了能够方便直观展示实现过程,小编我以Java文件为基础,一个一个来展示,免得到时候这个java文件写点,一下又跳到另外一个java ...

  7. 【40.17%】【codeforces 569B】Inventory

    time limit per test1 second memory limit per test256 megabytes inputstandard input outputstandard ou ...

  8. Android JNI编程(三)——C语言指针的初步认识、指针变量、互换两个数、函数返回多个值

    版权声明:本文出自阿钟的博客,转载请注明出处:http://blog.csdn.net/a_zhon/. 目录(?)[+] 一.什么是指针? 简单来说: 指针就是内存地址      内存地址就是指针. ...

  9. layer弹框在实际项目中的一些应用

    官方介绍:layer至今仍作为layui的代表作,受众广泛并非偶然,而是这五年多的坚持,不断完善和维护.不断建设和提升社区服务,使得猿们纷纷自发传播,乃至于成为今天的Layui最强劲的源动力.目前,l ...

  10. 简单易用的动画animations

    _tableView_selc.frame=CGRectMake(20, , 20,20); [UIView animateWithDuration:0.3f animations:^{ _table ...