ES6运行的三种方式


第一种:浏览器直接显示(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就可以在命令窗口中输出运行结果


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM