当前位置: 首页>前端>正文

es lucene语法 es语法到几了

JavaScript版本

  1. ECMAScript
    ECMAScript 是跨多个平台的许多厂商实施的不断发展的标准,JavaScript是其实现(同时也好有其他实现,不过JavaScript是主流)
  2. ES5发布
    在2009年,在Java的神奇崛起之前。JavaScript第五版(es5)正式发布
  3. ES6发布
    时隔六年,2015年JavaScript第六版(es6)发布,此后,由于前端占据的地位越加重要,es标准组织不断完善标准,此后每隔一年就会出一个新版的JavaScript
  4. 这几年es版本如下
    JavaScript第五版es5es2009
    JavaScript第六版es6es2015
    JavaScript第七版es7es2016
    JavaScript第八版es8es2017
    JavaScript第九版es9es2018 【还未正式发布】
    各版本试用地址:https://www.babeljs.cn/repl/
  5. Es标准实现基本流程:
    五个阶段
    Strawman(Stage0,稻草人)
    表示有机会写入标准
    Proposal(Stage1,提议)
    讨论实现方法和可能存在的挑战
    Draft(Stage2,草案)
    明确地用正式文档语言描述语法和语义,
    Candidate(Stage3,候选)
    需要实现和用户的反馈来做细微的改进,准备好进入 ECMAScript 标准。
    Finished(Stage4,完成)
    意味着已经在标准中了
    注意
    Stage 0,1,2表示还处于细胞状态,Stage 3 则是意味着很大程度能进入标准,Stage 4则表示正式进入标准
  6. JavaScript引擎中的实现进程
    ES2015 是语言的一次重大更新,也是自2009年ES5标准确定后的第一个重大更新,目前主流的JavaScript引擎中的实现进展在这里。
  7. 各版本区别
    JavaScript中主体还是在es5版本,然后es6增加了一部分, 至于es7,8,9只是在es6基础上加了少量特性,而且浏览器能够完全支持的就只有es5,连es6都有少部分是无法支持的,至于es7,8,9就是各浏览器厂商看情况实现了。
  8. babel
    为此,我们要学习并正常的使用新版本es的语法就必须要依赖语法转换工具
    这里我们选择流行的babel

Babel

Babel 是一个 JavaScript 编译器
Babel默认只转换新的JavaScript句法(syntax),而不转换新的API.(不转换新的API.的意思是:对极少部分浏览器无法支持的api,转换之后的也无法正常的使用,比如:import,export)

通俗理解:

Babel能将浏览器暂时不支持的新式语法(并不是全部)转换为可支持语法形式,如:把不识别的es6转换为es5

es lucene语法 es语法到几了,es lucene语法 es语法到几了_es lucene语法,第1张

Babel的安装与使用

①在浏览器中进行转译

在你的es6+版本的js代码前引入一个babel.js文件即可,可下载到本地使用,也可直接使用cdn形式引入,如:

<div id="output"></div>
<!-- 加载 Babel -->
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

<!-- 你的脚本代码 -->
<script type="text/babel">	//关键代码
const getMessage = () => "Hello World";
//把转换后的函数显示在网页中
document.getElementById('output').innerHTML = getMessage;  
</script>

这种方式类似与在网页中引入less.js文件去转义less文件一样,是在执行的过程中进行转换的

参考地址: https://www.babeljs.cn/docs/setup#installation

②在命令行中进行转译

1. 全局安装babel的命令行工具:

cnpm install babel-cli -g

es lucene语法 es语法到几了,es lucene语法 es语法到几了_json_02,第2张

2. 安装完成后通过命令 babel --version 查看是否安装成功

babel --version

es lucene语法 es语法到几了,es lucene语法 es语法到几了_babel详解_03,第3张

3. 执行命令,安装babel-preset-env到本地

cnpm install babel-preset-env --save-dev

es lucene语法 es语法到几了,es lucene语法 es语法到几了_babel的使用与安装_04,第4张

4. 在项目根目录下创建 .babelrc 文件,文件中的内容如下

{
 "presets": ["env"]
}

es lucene语法 es语法到几了,es lucene语法 es语法到几了_babel详解_05,第5张

es lucene语法 es语法到几了,es lucene语法 es语法到几了_babel详解_06,第6张

因为在windows系统中,不允许直接右键建立没有文件名的文件,所以创建 .babelrc 文件有两个方式,第一个是直接通过编辑器创建,第二个是直接通过cmd命令行创建

以下是cmd命令行创建方式:

type nul>.babelrc

5. 创建js文件,书写es6+语法

es lucene语法 es语法到几了,es lucene语法 es语法到几了_json_07,第7张

6. 执行命令将es6转换为es5

  • 文件到文件:babel js文件路径 -o 转译后生成的文件路径
  • 文件到文件夹:babel js文件路径 -d 转译后生成的文件夹路径
  • 文件夹到文件夹:babel 文件夹 -d 转译后生成的文件夹路径

在package.json文件的脚本中配置转义命令

  1. 创建项目目录babelTtest
  2. 在根目录下创建一个package.json文件,可以手动填写,也可以通过命令cnpm init --yes自动生成(也可以不显式的创建,执行下面命令后会自动的创建package.Json文件)
cnpm init --yes
  1. 在当前目录执行x下列命令,以便于安装babel-cli命令行工具(此为开发依赖)
cnpm install babel-cli babel-preset-env --save-dev
  1. 创建 .babelrc 文件,如下
{
 "presets": ["env"]
}
  1. 在你的 package.json 中添加一个 “scripts” 属性并将 babel 命令放在它的 build 属性中,如下(src等目录名根据你自己实际情况写):
"scripts": {
     "build": "babel src -d lib"
   },
  1. 运行以下命令,开始转译
npm run build



https://www.xamrdz.com/web/2d61926553.html

相关文章: