脚本宝典收集整理的这篇文章主要介绍了

babel的使用(一)

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。
<p><code></p> <h1 id="articleHeader0">Babel 入门</h1> <p><a href="http://www.ruanyifeng.com/blog/2016/01/babel.html" rel="nofollow noreferrer" target="_blank">http://www.ruanyifeng.com/blo...</a></p> <h1 id="articleHeader1">Babel <a href="http://www.js-code.com/tag/package" title="package" target="_blank">package</a>s</h1> <p><a href="https://github.com/babel/babel/tree/master/packages" rel="nofollow noreferrer" target="_blank">https://github.com/babel/babe...</a></p> <h1 id="articleHeader2">谈谈Babel v6的新特性及未来定位</h1> <p><a href="http://www.open-open.com/lib/view/open1454818643901.html" rel="nofollow noreferrer" target="_blank">http://www.open-open.com/lib/...</a></p> <h1 id="articleHeader3">Babel 在线转换</h1> <p><a href="https://babeljs.io/repl/" rel="nofollow noreferrer" target="_blank">https://babeljs.io/repl/</a></p> <h1 id="articleHeader4">Babel 使用指南</h1> <p><a href="http://guoyongfeng.github.io/idoc/html/React%E8%AF%BE%E7%A8%8B%E4%B8%93%E9%A2%98/Babel%E4%BD%BF%E7%94%A8%E6%8C%87%E5%8D%97.html" rel="nofollow noreferrer" target="_blank">http://guoyongfeng.github.io/...</a></p> <h2 id="articleHeader5">1. Babel core 浏览器环境</h2> <p>安装: npm <a href="http://www.js-code.com/tag/in" title="in" target="_blank">in</a>st<a href="http://www.js-code.com/tag/all" title="all" target="_blank">all</a> --save-dev <a href="http://www.js-code.com/tag/babel" title="babel" target="_blank">babel</a>-core@5</p> <h2 id="articleHeader6">2. 命令行转码<a href="http://www.js-code.com/tag/babel" title="babel" target="_blank">babel</a>-cli</h2> <p>安装: npm <a href="http://www.js-code.com/tag/in" title="in" target="_blank">in</a>st<a href="http://www.js-code.com/tag/all" title="all" target="_blank">all</a> --save-dev <a href="http://www.js-code.com/tag/babel" title="浏览关于“babel”的文章" target="_blank" class="tag_link">babel</a>-cli</p> <p>改写<a href="http://www.js-code.com/tag/package" title="package" target="_blank">package</a>.json</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="{ // ... &quot;devDependencies&quot;: { &quot;babel-cli&quot;: &quot;^6.0.0&quot; }, &quot;scripts&quot;: { &quot;build&quot;: &quot;babel src -d lib&quot; }, } " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs clojure"><code>{ // ... <span class="hljs-string">"devDependencies"</span>: { <span class="hljs-string">"babel-cli"</span>: <span class="hljs-string">"^6.0.0"</span> }, <span class="hljs-string">"scripts"</span>: { <span class="hljs-string">"build"</span>: <span class="hljs-string">"babel src -d lib"</span> }, } </code></pre> <p>转码的时候,就执行下面的命令。</p> <p>npm run build</p> <h2 id="articleHeader7">实例</h2> <h3 id="articleHeader8"><a href="http://www.js-code.com/tag/package" title="浏览关于“package”的文章" target="_blank" class="tag_link">package</a>.json</h3> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="{ &quot;name&quot;: &quot;es6-sec&quot;, &quot;version&quot;: &quot;1.0.0&quot;, &quot;description&quot;: &quot;&quot;, &quot;repository&quot;: &quot;&quot;, &quot;license&quot;: &quot;&quot;, &quot;readme&quot;: &quot;&quot;, &quot;scripts&quot;: { &quot;build&quot;: &quot;babel src -d asset&quot; }, &quot;devDependencies&quot;: { &quot;babel-cli&quot;: &quot;^6.18.0&quot;, &quot;babel-preset-es2015&quot;: &quot;^6.18.0&quot; } } " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs json"><code>{ <span class="hljs-attr">"<a href="http://www.js-code.com/tag/name" title="浏览关于“name”的文章" target="_blank" class="tag_link">name</a>"</span>: <span class="hljs-string">"<a href="http://www.js-code.com/tag/es6" title="浏览关于“es6”的文章" target="_blank" class="tag_link">es6</a>-sec"</span>, <span class="hljs-attr">"version"</span>: <span class="hljs-string">"1.0.0"</span>, <span class="hljs-attr">"description"</span>: <span class="hljs-string">""</span>, <span class="hljs-attr">"repository"</span>: <span class="hljs-string">""</span>, <span class="hljs-attr">"license"</span>: <span class="hljs-string">""</span>, <span class="hljs-attr">"readme"</span>: <span class="hljs-string">""</span>, <span class="hljs-attr">"scripts"</span>: { <span class="hljs-attr">"build"</span>: <span class="hljs-string">"babel src -d asset"</span> }, <span class="hljs-attr">"devDependencies"</span>: { <span class="hljs-attr">"babel-cli"</span>: <span class="hljs-string">"^6.18.0"</span>, <span class="hljs-attr">"babel-p<a href="http://www.js-code.com/tag/reset" title="浏览关于“reset”的文章" target="_blank" class="tag_link">reset</a>-es2015"</span>: <span class="hljs-string">"^6.18.0"</span> } } </code></pre> <h3 id="articleHeader9">.babelrc</h3> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="{ &quot;presets&quot;: [&quot;es2015&quot;], &quot;plugins&quot;: [] } " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs json"><code>{ <span class="hljs-attr">"presets"</span>: [<span class="hljs-string">"es2015"</span>], <span class="hljs-attr">"<a href="http://www.js-code.com/tag/plugin" title="浏览关于“plugin”的文章" target="_blank" class="tag_link">plugin</a>s"</span>: [] } </code></pre> <h3 id="articleHeader10">js</h3> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="// 变量,常量 function test() { let a = 10; const b = 20; console.log(a); console.log(b); } test(); // 数组的解构赋值 function example() { return [1, 2, 3]; } var [a, b, c] = example(); console.log('a:' + a); console.log('b:' + b); console.log('c:' + c); // 对象的解构赋值 function examples() { return { foo: 1, baz: 2 }; } var {foo, baz} = examples(); console.log('foo:' + foo); console.log(baz); var input = [1, 2, 3]; input.map(item => item + 1);</p> <p>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs javascript"><code><span class="hljs-comment">// 变量,常量</span> <span class="hljs-function"><span class="hljs-keyword"><a href="http://www.js-code.com/tag/function" title="浏览关于“function”的文章" target="_blank" class="tag_link">function</a></span> <span class="hljs-title">test</span>(<span class="hljs-params"></span>) </span>{ <span class="hljs-keyword"><a href="http://www.js-code.com/tag/let" title="浏览关于“let”的文章" target="_blank" class="tag_link">let</a></span> a = <span class="hljs-number">10</span>; <span class="hljs-keyword"><a href="http://www.js-code.com/tag/const" title="浏览关于“const”的文章" target="_blank" class="tag_link">const</a></span> b = <span class="hljs-number">20</span>; <span class="hljs-built_in">console</span>.log(a); <span class="hljs-built_in">console</span>.log(b); } test(); <span class="hljs-comment">// <a href="http://www.js-code.com/tag/%e6%95%b0%e7%bb%84" title="浏览关于“数组”的文章" target="_blank" class="tag_link">数组</a>的<a href="http://www.js-code.com/tag/%e8%a7%a3%e6%9e%84%e8%b5%8b%e5%80%bc" title="浏览关于“解构赋值”的文章" target="_blank" class="tag_link">解构赋值</a></span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">example</span>(<span class="hljs-params"></span>) </span>{ <span class="hljs-keyword"><a href="http://www.js-code.com/tag/return" title="浏览关于“return”的文章" target="_blank" class="tag_link">return</a></span> [<span class="hljs-number">1</span>, <span class="hljs-number">2</span>, <span class="hljs-number">3</span>]; } <span class="hljs-keyword"><a href="http://www.js-code.com/tag/var" title="浏览关于“var”的文章" target="_blank" class="tag_link">var</a></span> [a, b, c] = example(); <span class="hljs-built_in">console</span>.log(<span class="hljs-string">'a:'</span> + a); <span class="hljs-built_in">console</span>.log(<span class="hljs-string">'b:'</span> + b); <span class="hljs-built_in">console</span>.log(<span class="hljs-string">'c:'</span> + c); <span class="hljs-comment">// 对象的解构赋值</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">examples</span>(<span class="hljs-params"></span>) </span>{ <span class="hljs-keyword">return</span> { <span class="hljs-attr">foo</span>: <span class="hljs-number">1</span>, <span class="hljs-attr">baz</span>: <span class="hljs-number">2</span> }; } <span class="hljs-keyword">var</span> {foo, baz} = examples(); <span class="hljs-built_in">console</span>.log(<span class="hljs-string">'foo:'</span> + foo); <span class="hljs-built_in">console</span>.log(baz); <span class="hljs-keyword">var</span> <a href="http://www.js-code.com/tag/in" title="浏览关于“in”的文章" target="_blank" class="tag_link">in</a>put = [<span class="hljs-number">1</span>, <span class="hljs-number">2</span>, <span class="hljs-number">3</span>]; input.map(<span class="hljs-function"><span class="hljs-params">item</span> =&gt;</span> item + <span class="hljs-number">1</span>); </code></pre> <h3 id="articleHeader11">html</h3> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="<a href="http://www.js-code.com/tag/button" title="button" target="_blank">button</a>" <a href="http://www.js-code.com/tag/class" title="class" target="_blank">class</a>="copyCode code-tool" data-toggle="tooltip" data-placement="<a href="http://www.js-code.com/tag/top" title="top" target="_blank">top</a>" data-clipboard-<a href="http://www.js-code.com/tag/text" title="text" target="_blank">text</a>="<!DOCTYPE html><br /> <html lang=&quot;ch-CN&quot;><br /> <head><br /> <meta charset=&quot;UTF-8&quot;><br /> <title><a href="http://www.js-code.com/tag/es6" title="es6" target="_blank">es6</a>-sec</title><br /> <meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=edge,chrome=1&quot;><br /> </head><br /> <body><br /> <script type=&quot;text/javascript&quot; src=&quot;asset/index.js&quot;></script><br /> </script><br /> </body><br /> </html>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs xml"><code><span class="hljs-meta">&lt;!DOCTYPE html&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">html</span> <span class="hljs-attr">lang</span>=<span class="hljs-string">"ch-CN"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">head</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr"><a href="http://www.js-code.com/tag/char" title="浏览关于“char”的文章" target="_blank" class="tag_link">char</a>set</span>=<span class="hljs-string">"UTF-8"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">title</span>&gt;</span>es6-sec<span class="hljs-tag">&lt;/<span class="hljs-name">title</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">http-equiv</span>=<span class="hljs-string">"X-UA-Compatible"</span> <span class="hljs-attr">content</span>=<span class="hljs-string">"IE=edge,chrome=1"</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">head</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"<a href="http://www.js-code.com/tag/text" title="浏览关于“text”的文章" target="_blank" class="tag_link">text</a>/<a href="http://www.js-code.com/tag/java" title="浏览关于“java”的文章" target="_blank" class="tag_link">java</a>script"</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"asset/index.js"</span>&gt;</span><span class="undefined"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">html</span>&gt;</span></code></pre> <p></code></p>

总结

以上是脚本宝典为你收集整理的

babel的使用(一)

全部内容,希望文章能够帮你解决

babel的使用(一)

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过