首页 > 其他 > 详细

ES6运行的三种方式

时间:2021-01-10 22:20:07      阅读:38      评论:0      收藏:0      [点我收藏+]

第一种:浏览器直接显示(Babel浏览器脚本)

<head>
    <script src="https://cdn.bootcdn.net/ajax/libs/babel-standalone/6.26.0/babel.js" type="text/javascript"></script> 
    <!-- <script src="js/babel.js"></script> -->
</head>
<body>
    <script type="text/babel">
         ...
    </script>
</body>
 
第二种:在线转换(然后将转换后的代码直接放到html文件中的script脚本中)-未来的方法是用node.js和Webpack转换
 
转换网址:babeljs.io/repl
技术分享图片

 

 技术分享图片

 

 

第三种:Babel(node.js)工具把ES6转换成ES5,然后用node.js运行ES5

安装node,网址:https://nodejs.org/en/

技术分享图片

node安装成功后验证方式:

 

技术分享图片

 

 技术分享图片

 

 

安装git,网址:https://git-scm.com/download/win/

git安装成功后验证方式: 

技术分享图片

 

 

安装cnpm,安装的命令:npm install -g cnpm --registry=https://registry.npm.taobao.org

技术分享图片

 

 cnpm安装成功后验证方式:

技术分享图片

 

 最后,在对应的项目下,安装babel相应包以及工具:

a.安装babel-preset-latest:

cnpm install -D  babel-preset-latest

b.安装babel-preset-react:

cnpm install -D  babel-preset-react

c.安装babel-preset-stage-2:

cnpm install -D  babel-preset-stage-2

 

全部安装完成后,创建.babelrc文件并输入以下内容:

{
    "presets": [
        "latest",
        "react",
        "stage-2"
    ],
    "plugins": []
}

 

d.安装Babel工具 Babel-cli

cnpm install -g babel-cli

==================分割线===================

上述完成以后,就可以在命令窗口中执行以下命令:

node 文件名.js:这种情况会直接在命令窗口中输出转换为ES5的内容;

还可以输出到一个文件中,命令为:babel 文件名.js -o 文件名-bundle.js,

然后,用命令node 文件名-bundle.js就可以在命令窗口中输出运行结果

ES6运行的三种方式

原文:https://www.cnblogs.com/Friday1/p/14259032.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!