利用babel将ES6代码转化成ES5代码
<p style="margin: 10px auto; color: rgb(0, 0, 0); font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 14px;"><span style="background-color: white;">ES6转化为ES5的工具有很多,下面介绍babel来转化ES6代码;</span></p><p style="margin: 10px auto; color: rgb(0, 0, 0); font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 14px;"><span style="background-color: white;">在npm环境下:cd 到项目目录;</span></p><p style="margin: 10px auto; color: rgb(0, 0, 0); font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 14px;"><span style="background-color: white;">npm init -y</span></p><p style="margin: 10px auto; color: rgb(0, 0, 0); font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 14px;"><span style="background-color: white;"><span style="color: rgb(153, 204, 0);">npm install babel-cli -g</span> (先全局安装babel-cli);</span></p><p style="margin: 10px auto; color: rgb(0, 0, 0); font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 14px;"><span style="background-color: white;"><span style="color: rgb(153, 204, 0);">npm install</span><span style="color: rgb(153, 51, 102);"> babel-cli</span> <span style="color: rgb(255, 153, 0);">babel-preset-es2015 --save-dev<span style="color: rgb(0, 0, 0);">(本地安装这两个);</span></span></span></p><p style="margin: 10px auto; color: rgb(0, 0, 0); font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 14px;"><span style="color: rgb(255, 153, 0);"><span style="color: rgb(0, 0, 0); background-color: white;">项目目录:</span></span></p><p style="margin: 10px auto; color: rgb(0, 0, 0); font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 14px;"><span style="color: rgb(255, 153, 0);"><span style="color: rgb(0, 0, 0); background-color: white;"><img src="https://images2017.cnblogs.com/blog/1127706/201712/1127706-20171214154924717-1223006913.png" alt="" style="border: 0px; max-width: 900px; height: auto;"></span></span></p><p style="margin: 10px auto; color: rgb(0, 0, 0); font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 14px;"><span style="background-color: white;"> </span></p><p style="margin: 10px auto; color: rgb(0, 0, 0); font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 14px;"><span style="background-color: white;">其中.babelrc文件内容为:</span></p><div class="cnblogs_code" style="margin-top: 5px; margin-bottom: 5px; padding: 5px; border: 1px solid rgb(204, 204, 204); overflow: auto; color: rgb(0, 0, 0); font-family: "Courier New" !important; font-size: 12px !important;"><div class="cnblogs_code_toolbar" style="margin-top: 5px;"><span class="cnblogs_code_copy" style="padding-right: 5px; line-height: 1.5 !important; background-color: white;"><a title="复制代码" style="color: black; text-decoration-line: underline; border: none !important;"><img src="https://common.cnblogs.com/images/copycode.gif" alt="复制代码" style="max-width: 900px; height: auto;"></a></span></div><pre style="white-space: pre-wrap; font-family: "Courier New" !important;"><span style="background-color: white;"><span style="line-height: 1.5 !important;">{</span>"presets"<span style="line-height: 1.5 !important;">: [
</span>"es2015"<span style="line-height: 1.5 !important;">
],
</span>"plugins"<span style="line-height: 1.5 !important;">: [
]
}</span></span></pre><div class="cnblogs_code_toolbar" style="margin-top: 5px;"><span class="cnblogs_code_copy" style="padding-right: 5px; line-height: 1.5 !important; background-color: white;"><a title="复制代码" style="color: black; text-decoration-line: underline; border: none !important;"><img src="https://common.cnblogs.com/images/copycode.gif" alt="复制代码" style="max-width: 900px; height: auto;"></a></span></div></div><p style="margin: 10px auto; color: rgb(0, 0, 0); font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 14px;"><span style="background-color: white;">index.html文件为:</span></p><div class="cnblogs_code" style="margin-top: 5px; margin-bottom: 5px; padding: 5px; border: 1px solid rgb(204, 204, 204); overflow: auto; color: rgb(0, 0, 0); font-family: "Courier New" !important; font-size: 12px !important;"><div class="cnblogs_code_toolbar" style="margin-top: 5px;"><span class="cnblogs_code_copy" style="padding-right: 5px; line-height: 1.5 !important; background-color: white;"><a title="复制代码" style="color: black; text-decoration-line: underline; border: none !important;"><img src="https://common.cnblogs.com/images/copycode.gif" alt="复制代码" style="max-width: 900px; height: auto;"></a></span></div><pre style="white-space: pre-wrap; font-family: "Courier New" !important;"><span style="background-color: white;"><span style="color: rgb(0, 0, 255); line-height: 1.5 !important;"><!</span><span style="color: rgb(255, 0, 255); line-height: 1.5 !important;">DOCTYPE html</span><span style="color: rgb(0, 0, 255); line-height: 1.5 !important;">></span>
<span style="color: rgb(0, 0, 255); line-height: 1.5 !important;"><</span><span style="color: rgb(128, 0, 0); line-height: 1.5 !important;">html </span><span style="color: rgb(255, 0, 0); line-height: 1.5 !important;">lang</span><span style="color: rgb(0, 0, 255); line-height: 1.5 !important;">="en"</span><span style="color: rgb(0, 0, 255); line-height: 1.5 !important;">></span>
<span style="color: rgb(0, 0, 255); line-height: 1.5 !important;"><</span><span style="color: rgb(128, 0, 0); line-height: 1.5 !important;">head</span><span style="color: rgb(0, 0, 255); line-height: 1.5 !important;">></span>
<span style="color: rgb(0, 0, 255); line-height: 1.5 !important;"><</span><span style="color: rgb(128, 0, 0); line-height: 1.5 !important;">meta </span><span style="color: rgb(255, 0, 0); line-height: 1.5 !important;">charset</span><span style="color: rgb(0, 0, 255); line-height: 1.5 !important;">="UTF-8"</span><span style="color: rgb(0, 0, 255); line-height: 1.5 !important;">></span>
<span style="color: rgb(0, 0, 255); line-height: 1.5 !important;"><</span><span style="color: rgb(128, 0, 0); line-height: 1.5 !important;">meta </span><span style="color: rgb(255, 0, 0); line-height: 1.5 !important;">name</span><span style="color: rgb(0, 0, 255); line-height: 1.5 !important;">="viewport"</span><span style="color: rgb(255, 0, 0); line-height: 1.5 !important;"> content</span><span style="color: rgb(0, 0, 255); line-height: 1.5 !important;">="width=device-width, initial-scale=1.0"</span><span style="color: rgb(0, 0, 255); line-height: 1.5 !important;">></span>
<span style="color: rgb(0, 0, 255); line-height: 1.5 !important;"><</span><span style="color: rgb(128, 0, 0); line-height: 1.5 !important;">meta </span><span style="color: rgb(255, 0, 0); line-height: 1.5 !important;">http-equiv</span><span style="color: rgb(0, 0, 255); line-height: 1.5 !important;">="X-UA-Compatible"</span><span style="color: rgb(255, 0, 0); line-height: 1.5 !important;"> content</span><span style="color: rgb(0, 0, 255); line-height: 1.5 !important;">="ie=edge"</span><span style="color: rgb(0, 0, 255); line-height: 1.5 !important;">></span>
<span style="color: rgb(0, 0, 255); line-height: 1.5 !important;"><</span><span style="color: rgb(128, 0, 0); line-height: 1.5 !important;">title</span><span style="color: rgb(0, 0, 255); line-height: 1.5 !important;">></span>转化test<span style="color: rgb(0, 0, 255); line-height: 1.5 !important;"></</span><span style="color: rgb(128, 0, 0); line-height: 1.5 !important;">title</span><span style="color: rgb(0, 0, 255); line-height: 1.5 !important;">></span>
<span style="color: rgb(0, 0, 255); line-height: 1.5 !important;"><</span><span style="color: rgb(128, 0, 0); line-height: 1.5 !important;">script </span><span style="color: rgb(255, 0, 0); line-height: 1.5 !important;">src</span><span style="color: rgb(0, 0, 255); line-height: 1.5 !important;">="dist/index.js"</span><span style="color: rgb(0, 0, 255); line-height: 1.5 !important;">></</span><span style="color: rgb(128, 0, 0); line-height: 1.5 !important;">script</span><span style="color: rgb(0, 0, 255); line-height: 1.5 !important;">></span>
<span style="color: rgb(0, 0, 255); line-height: 1.5 !important;"></</span><span style="color: rgb(128, 0, 0); line-height: 1.5 !important;">head</span><span style="color: rgb(0, 0, 255); line-height: 1.5 !important;">></span>
<span style="color: rgb(0, 0, 255); line-height: 1.5 !important;"><</span><span style="color: rgb(128, 0, 0); line-height: 1.5 !important;">body</span><span style="color: rgb(0, 0, 255); line-height: 1.5 !important;">></span>
<span style="color: rgb(0, 0, 255); line-height: 1.5 !important;"><</span><span style="color: rgb(128, 0, 0); line-height: 1.5 !important;">h3</span><span style="color: rgb(0, 0, 255); line-height: 1.5 !important;">></span>hello ECMA SCRIPT 6<span style="color: rgb(0, 0, 255); line-height: 1.5 !important;"></</span><span style="color: rgb(128, 0, 0); line-height: 1.5 !important;">h3</span><span style="color: rgb(0, 0, 255); line-height: 1.5 !important;">></span>
<span style="color: rgb(0, 0, 255); line-height: 1.5 !important;"></</span><span style="color: rgb(128, 0, 0); line-height: 1.5 !important;">body</span><span style="color: rgb(0, 0, 255); line-height: 1.5 !important;">></span>
<span style="color: rgb(0, 0, 255); line-height: 1.5 !important;"></</span><span style="color: rgb(128, 0, 0); line-height: 1.5 !important;">html</span><span style="color: rgb(0, 0, 255); line-height: 1.5 !important;">></span></span></pre><div class="cnblogs_code_toolbar" style="margin-top: 5px;"><span class="cnblogs_code_copy" style="padding-right: 5px; line-height: 1.5 !important; background-color: white;"><a title="复制代码" style="color: black; text-decoration-line: underline; border: none !important;"><img src="https://common.cnblogs.com/images/copycode.gif" alt="复制代码" style="max-width: 900px; height: auto;"></a></span></div></div><p style="margin: 10px auto; color: rgb(0, 0, 0); font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 14px;"><span style="background-color: white;">./src/index.js 内容为;</span></p><div class="cnblogs_code" style="margin-top: 5px; margin-bottom: 5px; padding: 5px; border: 1px solid rgb(204, 204, 204); overflow: auto; color: rgb(0, 0, 0); font-family: "Courier New" !important; font-size: 12px !important;"><pre style="white-space: pre-wrap; font-family: "Courier New" !important;"><span style="background-color: white;">let name = "liuliu"<span style="line-height: 1.5 !important;">;
console.log(name);</span></span></pre></div><p style="margin: 10px auto; color: rgb(0, 0, 0); font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 14px;"><span style="background-color: white;">let是es6的语法;简单测试一下;</span></p><p style="margin: 10px auto; color: rgb(0, 0, 0); font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 14px;"><span style="background-color: white;">最后:<span style="color: rgb(255, 102, 0);"> babel src/index.js -o dist/index.js <span style="color: rgb(0, 0, 0);"><strong> (不要省略o,不然结果直接会在终端输出,不会生成文件)</strong></span></span></span></p><p style="margin: 10px auto; color: rgb(0, 0, 0); font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 14px;"><span style="background-color: white;">可以看到.dist/index.js被转化的结果;</span></p><p style="margin: 10px auto; color: rgb(0, 0, 0); font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 14px;"><span style="color: rgb(255, 102, 0); background-color: white;"><span style="color: rgb(0, 0, 0);">浏览器打开后也会看到变量输出</span>;</span></p><p style="margin: 10px auto; color: rgb(0, 0, 0); font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 14px;"><span style="background-color: white;"> </span></p><p style="margin: 10px auto; color: rgb(0, 0, 0); font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 14px;"><span style="background-color: white;">一般使用如webpack等构件工具都依赖项都会有babel;这里只是不用自动构件工具做平时测试使用或单一的引用到项目;</span></p><p></p>
页:
[1]