{"id":105466,"date":"2016-12-28T14:33:10","date_gmt":"2016-12-28T05:33:10","guid":{"rendered":"http:\/\/www.key-p.com\/blog\/staff\/?p=105466"},"modified":"2017-09-01T18:46:56","modified_gmt":"2017-09-01T09:46:56","slug":"babili%e3%81%a7babel%e3%81%ae%e3%82%b3%e3%83%bc%e3%83%89%e3%82%92%e5%9c%a7%e7%b8%ae%e3%81%99%e3%82%8b","status":"publish","type":"post","link":"https:\/\/www.key-p.com\/blog\/staff\/archives\/105466","title":{"rendered":"Babili\u3067Babel\u306e\u30b3\u30fc\u30c9\u3092\u5727\u7e2e\u3059\u308b"},"content":{"rendered":"<p>\nt\u3067\u3059\u3002<a href=\"http:\/\/www.key-p.com\/blog\/staff\/archives\/105449\">\u524d\u56de<\/a>\u306b\u5f15\u304d\u7d9a\u304d\u3001<a href=\"https:\/\/babeljs.io\/\" target=\"_blank\">Babel<\/a>\u306e\u30d7\u30e9\u30b0\u30a4\u30f3\u306b\u3064\u3044\u3066\u7d39\u4ecb\u3057\u307e\u3059\u3002<br \/>\nES2015\u306a\u3069\u3067\u8a18\u8ff0\u3057\u3066\u3001Babel\u3092\u4f7f\u3063\u3066\u30c8\u30e9\u30f3\u30b9\u30d1\u30a4\u30eb\u3059\u308b\u6642\u306e\u30b3\u30fc\u30c9\u306e\u5727\u7e2e(\u30df\u30cb\u30d5\u30a1\u30a4)\u3092\u884c\u306a\u3046\u3001<a href=\"https:\/\/babeljs.io\/blog\/2016\/08\/30\/babili\" target=\"_blank\">Babili(babel-minify)<\/a>\u306b\u3064\u3044\u3066\u3067\u3059\u3002<br \/>\n<br \/>\nJavaScript\u3092\u30df\u30cb\u30d5\u30a1\u30a4\u3059\u308b\u30c4\u30fc\u30eb\u306f\u3044\u308d\u3044\u308d\u3042\u308a\u307e\u3059\u304c\u3001ES2015\u306e\u30af\u30e9\u30b9\u306a\u3069\u306e\u65b0\u3057\u3044\u69cb\u6587\u306b\u5bfe\u5fdc\u3057\u3066\u3044\u308b\u3082\u306e\u306f\u3001\u898b\u305f\u3053\u3068\u304c\u3042\u308a\u307e\u305b\u3093\u3002<br \/>\nBabili\u3092\u5229\u7528\u3059\u308c\u3070\u3001ES2015\u306e\u30af\u30e9\u30b9\u306a\u3069\u304c\u305d\u306e\u307e\u307e\u3042\u3063\u3066\u3082\u30df\u30cb\u30d5\u30a1\u30a4\u3067\u304d\u308b\u306e\u3067\u3001\u4fbf\u5229\u3067\u3059\u3002<br \/>\n<h3>\u74b0\u5883\u6e96\u5099<\/h3>\nBabili\u3092\u4f7f\u3063\u3066\u3069\u306e\u3088\u3046\u306b\u5909\u63db\u3055\u308c\u308b\u304b\u3092\u3001\u300cindex.js\u300d\u3092\u4f7f\u3063\u3066\u898b\u3066\u3044\u304d\u307e\u3059\u3002<br \/>\n\u4ee5\u4e0b\u306e3\u3064\u306e\u30d5\u30a1\u30a4\u30eb\u3092\u3001\u4efb\u610f\u306e\u30c7\u30a3\u30ec\u30af\u30c8\u30ea\u306b\u6e96\u5099\u3057\u3066\u304f\u3060\u3055\u3044\u3002<br \/>\n<pre class=\"toolbar:1 lang:default highlight:0 decode:true \" title=\"\u30d5\u30a1\u30a4\u30eb\u69cb\u6210\">\/path\/to\/any\/directory\n\u251c.babelrc\n\u251cindex.js\n\u2514package.json<\/pre>\n\u300cpackage.json\u300d\u3067\u306f\u3001\u4ee5\u4e0b\u306e\u30e2\u30b8\u30e5\u30fc\u30eb\u3092\u5c0e\u5165\u3059\u308b\u5b9a\u7fa9\u3092\u8a18\u8ff0\u3057\u3066\u3044\u307e\u3059\u3002\u524d\u56de\u3068\u307b\u307c\u540c\u3058\u3067\u3059\u304c\u3001babel-preset-babili\u3092\u8ffd\u52a0\u3057\u3066\u3044\u307e\u3059\u3002<br \/>\n<ul>\n \t<li>babel-cli: \u30c8\u30e9\u30f3\u30b9\u30d1\u30a4\u30eb\u3092\u884c\u306a\u3046\u30b3\u30de\u30f3\u30c9<\/li>\n \t<li>babel-preset-env: \u74b0\u5883\u306b\u5408\u308f\u305b\u305f\u30c8\u30e9\u30f3\u30b9\u30d1\u30a4\u30eb\u3092\u884c\u306a\u3046\u30d7\u30ea\u30bb\u30c3\u30c8<\/li>\n \t<li>babel-preset-babili: \u30b3\u30fc\u30c9\u306e\u30df\u30cb\u30d5\u30a1\u30a4\u3092\u884c\u306a\u3046\u30d7\u30ea\u30bb\u30c3\u30c8<\/li>\n<\/ul>\n<pre class=\"toolbar:1 lang:js mark:11 decode:true\" title=\"package.json\">{\n  \"name\": \"babel-minify-example\",\n  \"version\": \"1.0.0\",\n  \"main\": \"index.js\",\n  \"license\": \"MIT\",\n  \"scripts\": {\n    \"build\": \"babel index.js --out-file compiled.js\"\n  },\n  \"devDependencies\": {\n    \"babel-cli\": \"^6.18.0\",\n    \"babel-preset-babili\": \"^0.0.9\",\n    \"babel-preset-env\": \"^1.1.4\"\n  }\n}\n<\/pre>\n\u300cindex.js\u300d\u3067\u306f\u3001\u3044\u304f\u3064\u304b\u306e\u65b0\u3057\u3044JavaScript\u306e\u6587\u6cd5\u3084\u6a5f\u80fd\u3092\u8a18\u8ff0\u3057\u3066\u3044\u307e\u3059\u3002\u4eca\u56de\u306f\u3079\u304d\u4e57\u3068\u30af\u30e9\u30b9\u69cb\u6587\u306e\u307f\u306b\u3057\u3066\u3044\u307e\u3059\u3002<br \/>\n<pre class=\"toolbar:1 lang:js decode:true \" title=\"index.js\">\/\/ \u3079\u304d\u4e57\u6f14\u7b97\u5b50\nconst a = 3 ** 3;\nconsole.log( a );\n\n\/\/ \u30af\u30e9\u30b9\u5b9a\u7fa9\nclass A {\n  constructor() {\n    this.a = 1;\n  }\n}\nconsole.log( new A );<\/pre>\n\u300c.babelrc\u300d\u3067\u306f\u3001babel-preset-env\u53ca\u3073\u3001babel-preset-babili\u3092\u4f7f\u3063\u3066\u30c8\u30e9\u30f3\u30b9\u30d1\u30a4\u30eb\u3092\u884c\u306a\u3046\u5b9a\u7fa9\u3092\u3057\u3066\u3044\u307e\u3059\u3002\u524d\u56de\u306e\u30d5\u30a1\u30a4\u30eb\u306b\u3001babel-preset-babili\u3092\u52a0\u3048\u305f\u3060\u3051\u3067\u3059\u3002<br \/>\n<br \/>\n\u4ee5\u4e0b\u306e\u3088\u3046\u306a\u9806\u756a\u3067\u6307\u5b9a\u3059\u308b\u3068\u3001babel-preset-babili\u2192babel-preset-env\u306e\u9806\u306b\u30c8\u30e9\u30f3\u30b9\u30d1\u30a4\u30eb\u304c\u884c\u308f\u308c\u308b\u3088\u3046\u3067\u3059\u3002<br \/>\n<pre class=\"toolbar:1 lang:js mark:8 decode:true\" title=\".babelrc\">{\n  \"presets\": [\n    [ \"env\", {\n      \"targets\": {\n        \"node\": \"current\"\n      }\n    } ],\n    \"babili\"\n  ]\n}\n<\/pre>\n\u30d5\u30a1\u30a4\u30eb\u306e\u6e96\u5099\u304c\u3067\u304d\u305f\u3089\u3001\u300cnpm i\u300d\u3092\u5b9f\u884c\u3057\u3066\u3001\u30e2\u30b8\u30e5\u30fc\u30eb\u3092\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3057\u307e\u3059\u3002<br \/>\n<h3>\u30c8\u30e9\u30f3\u30b9\u30d1\u30a4\u30eb\u7d50\u679c<\/h3>\n\u4eca\u56de\u306f\u3001Node.js\u306e7.3.0\u3067\u30c8\u30e9\u30f3\u30b9\u30d1\u30a4\u30eb\u3057\u3066\u3044\u307e\u3059\u3002<br \/>\n<br \/>\n\u300cnpm run build\u300d\u3057\u3066\u304f\u3060\u3055\u3044\u3002\u305d\u3046\u3059\u308b\u3068\u3001\u30c8\u30e9\u30f3\u30b9\u30d1\u30a4\u30eb\u5f8c\u306e\u30b3\u30fc\u30c9\u304c\u300ccompiled.js\u300d\u306b\u751f\u6210\u3055\u308c\u307e\u3059\u3002<br \/>\n<pre class=\"toolbar:1 lang:js decode:true \" title=\"compiled.js\">\"use strict\";\/\/ \u3079\u304d\u4e57\u6f14\u7b97\u5b50\nconst a=27;console.log(a);\/\/ \u30af\u30e9\u30b9\u5b9a\u7fa9\nclass A{constructor(){this.a=1}}console.log(new A);<\/pre>\n\u30af\u30e9\u30b9\u69cb\u6587\u306e\u307e\u307e\u3067\u3082\u30df\u30cb\u30d5\u30a1\u30a4\u3055\u308c\u3066\u3044\u308b\u3053\u3068\u3001\u3079\u304d\u4e57\u306e\u8a08\u7b97\u304c\u5b9a\u6570\u306b\u306a\u3063\u3066\u3044\u308b\u3053\u3068\u304c\u308f\u304b\u308a\u307e\u3059\u3002<br \/>\n<h3>.babelrc\u3067babel-preset-babili\u306e\u9806\u756a\u3092\u5909\u3048\u305f\u3068\u304d\u306e\u843d\u3068\u3057\u7a74<\/h3>\n\u4ee5\u4e0b\u306e\u3088\u3046\u306b\u5148\u306bbabili\u3092\u8a18\u8ff0\u3059\u308b\u3068\u3001babel-preset-env\u2192babel-preset-babili\u306e\u9806\u756a\u3067\u30c8\u30e9\u30f3\u30b9\u30d1\u30a4\u30eb\u3055\u308c\u3066\u3057\u307e\u3046\u3088\u3046\u3067\u3001\u3079\u304d\u4e57\u304c\u5b9a\u6570\u306b\u306a\u308a\u307e\u305b\u3093\u3002<br \/>\n<pre class=\"toolbar:1 lang:js mark:3 decode:true \" title=\".babelrc\">{\n  \"presets\": [\n    \"babili\",\n    [ \"env\", {\n      \"targets\": {\n        \"node\": \"current\"\n      }\n    } ]\n  ]\n}\n<\/pre>\n\u4e0a\u8a18\u306e.babelrc\u3067\u30c8\u30e9\u30f3\u30b9\u30d1\u30a4\u30eb\u3059\u308b\u3068\u4ee5\u4e0b\u306e\u3088\u3046\u306b\u306a\u308a\u307e\u3059\u3002<br \/>\n<pre class=\"toolbar:1 lang:js decode:true \" title=\"compiled.js\">\"use strict\";\/\/ \u3079\u304d\u4e57\u6f14\u7b97\u5b50\nconst a=Math.pow(3,3);console.log(a);\/\/ \u30af\u30e9\u30b9\u5b9a\u7fa9\nclass A{constructor(){this.a=1}}console.log(new A);<\/pre>\n\u5148\u306bbabel-preset-babili\u306b\u3088\u3063\u3066\u30df\u30cb\u30d5\u30a1\u30a4\u3057\u305f\u307b\u3046\u304c\u3001\u3053\u306e\u3079\u304d\u4e57\u306e\u5834\u5408\u306e\u3088\u3046\u306b\u3001\u5909\u63db\u524d\u306e\u72b6\u614b\u3067\u6700\u9069\u5316\u3067\u304d\u308b\u306e\u3067\u3001\u826f\u3044\u3068\u601d\u3044\u307e\u3059\u3002<br \/>\n<h3>\u6700\u5f8c\u306b<\/h3>\n\u4eca\u56de\u306f\u3001Babel\u3067JavaScript\u3092\u30df\u30cb\u30d5\u30a1\u30a4\u3059\u308bBabili\u3064\u3044\u3066\u7d39\u4ecb\u3057\u307e\u3057\u305f\u3002<br \/>\n<br \/>\n\u307e\u3060\u3001Babili\u306f\u30d9\u30fc\u30bf\u7248\u3068\u3044\u3046\u6271\u3044\u3067\u3001\u5727\u7e2e\u7387\u3060\u3051\u3092\u898b\u308b\u3068\u3001\u4ed6\u306e\u30df\u30cb\u30d5\u30a1\u30a4\u30c4\u30fc\u30eb\u306b\u306f\u53ca\u3070\u306a\u3044\u3088\u3046\u3067\u3059\u3002\u3057\u304b\u3057\u3001Babel\u3092\u65e2\u306b\u4f7f\u3063\u3066\u3044\u308b\u74b0\u5883\u3067\u3042\u308c\u3070\u3001\u7c21\u5358\u306b\u5c0e\u5165\u3067\u304d\u308b\u306e\u3067\u3001\u8a66\u3057\u3066\u307f\u3066\u306f\u3044\u304b\u304c\u3067\u3057\u3087\u3046\u304b\u3002<br \/>\n<br \/>\n<a href=\"http:\/\/www.key-p.com\/recruit\/\" target=\"new\">\u30ad\u30fc\u30fb\u30dd\u30a4\u30f3\u30c8\u3067\u306f\u3001\u3044\u308d\u3044\u308d\u306a\u30e9\u30a4\u30d6\u30e9\u30ea\u3092\u4f7f\u3044\u3053\u306a\u3059\u30a8\u30f3\u30b8\u30cb\u30a2\u3092\u52df\u96c6\u3057\u3066\u3044\u307e\u3059\u3002<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>t\u3067\u3059\u3002\u524d\u56de\u306b\u5f15\u304d\u7d9a\u304d\u3001Babel\u306e\u30d7\u30e9\u30b0\u30a4\u30f3\u306b\u3064\u3044\u3066\u7d39\u4ecb\u3057\u307e\u3059\u3002 ES2015 &hellip; <a href=\"https:\/\/www.key-p.com\/blog\/staff\/archives\/105466\">\u7d9a\u304d\u3092\u8aad\u3080 <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":40,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[16],"tags":[],"jetpack-related-posts":[],"_links":{"self":[{"href":"https:\/\/www.key-p.com\/blog\/staff\/wp-json\/wp\/v2\/posts\/105466"}],"collection":[{"href":"https:\/\/www.key-p.com\/blog\/staff\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.key-p.com\/blog\/staff\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.key-p.com\/blog\/staff\/wp-json\/wp\/v2\/users\/40"}],"replies":[{"embeddable":true,"href":"https:\/\/www.key-p.com\/blog\/staff\/wp-json\/wp\/v2\/comments?post=105466"}],"version-history":[{"count":28,"href":"https:\/\/www.key-p.com\/blog\/staff\/wp-json\/wp\/v2\/posts\/105466\/revisions"}],"predecessor-version":[{"id":106246,"href":"https:\/\/www.key-p.com\/blog\/staff\/wp-json\/wp\/v2\/posts\/105466\/revisions\/106246"}],"wp:attachment":[{"href":"https:\/\/www.key-p.com\/blog\/staff\/wp-json\/wp\/v2\/media?parent=105466"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.key-p.com\/blog\/staff\/wp-json\/wp\/v2\/categories?post=105466"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.key-p.com\/blog\/staff\/wp-json\/wp\/v2\/tags?post=105466"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}