资讯

精准传达 • 有效沟通

从品牌网站建设到网络营销策划,从策略到执行的一站式服务

Babel解决ES6不能被所有浏览器解析问题

一、简介

1.ES6的某些高级语法在浏览器环境甚至是Node.js环境中无法执行。
2.Babel是一个广泛使用的转码器,可以将ES6代码转为ES5代码,从而在现有环境执行执行。

创新互联公司专注于江城企业网站建设,响应式网站设计,商城网站开发。江城网站建设公司,为江城等地区提供建站服务。全流程按需网站建设,专业设计,全程项目跟踪,创新互联公司专业和态度为您提供的服务

二、安装Babel

Babel提供babel-cli工具,用于命令行转码
安装:npm i -g babel-cli
检查安装:babel --version

三、Babel的使用

1)安装Node.js环境:https://nodejs.org/zh-cn/
2)进入项目,初始化项目:npm init -y
3)创建文件 src/example.js
4)安装转码器,在项目中安装:npm i --save-dev babel-preset-env 或 npm i --save-dev babel-preset-es2015
5)创建文件并配置:.babelrc {"presets":["env","es2015"],"plugins":[]}
注:Babel的配置文件是.babelrc,存放在项目的根目录下,该文件用来设置转码规则和插件。

四、文件转化

  1. 文件:
    babel src/index.js -o dist/index.js
    注:-o(--out-file):输出的意思
  2. 文件夹:
    babel src -d dist
    注:-d(--out-dir):指定输入目录
  3. 实时监控:
    babel src -w -d dist
    注:-w:watch监控

五、自定义脚本

1)改写package.json

{
  // ...
  "scripts":{
    // ...
    "build": "babel src\\index.js -o dist\\index.js"
  },
}

2)转码时,执行下面命令
mkdir dist
npm run build


本文标题:Babel解决ES6不能被所有浏览器解析问题
文章转载:http://www.cdkjz.cn/article/dsojhpe.html
多年建站经验

多一份参考,总有益处

联系快上网,免费获得专属《策划方案》及报价

咨询相关问题或预约面谈,可以通过以下方式与我们联系

大客户专线   成都:13518219792   座机:028-86922220