Cara Mengatur Lingkungan Pengembangan ES6 di Mac dan Windows – Codewithaden

Untuk mengatur sebuah Lingkungan pengembangan ES6 di mesin lokal Dalam JavaScript, gunakan

  1. Babel
  2. Webpack

Babel

Babel adalah transpiler yang mengubah kode dari ES6 ke ES5 untuk mendukung semua browser modern.

Untuk informasi lebih lanjut, silakan kunjungi situs web resmi Babeljs ini. https://babeljs.io/

Webpack

Webpack adalah bundel modul untuk aplikasi web JavaScript modern. Menggunakan Webpack, Kami Tidak Menghosting banyak File JavaScript. Sebaliknya, kami meng -host satu file untuk seluruh aplikasi web.

Mari kita ambil contoh; Untuk proyek kami, kami hanya memasukkan satu javascript mengajukan.

Untuk informasi lebih lanjut, silakan kunjungi pejabat ini Webpack situs web. https://webpack.js.org/

Jika Anda mengambil demo ini, Anda sudah menginstal node.js di mesin Anda.

Mengatur ES6 Lingkungan Pengembangan

Langkah 1: Buat folder proyek.

Buat kosong folder proyek.

MKDIR JS6  

Menavigasi ke direktori itu dengan mengetik perintah berikut.

CD JS6  

Langkah 2: Buat file package.json.

Kita perlu membuat file Json file dipanggil package.json

init npm  

Milikmu package.json File terlihat seperti ini.

{ 
   "Nama": "JS6", 
   "Versi": "1.0.0", 
   "keterangan": "", 
   "Main": "index.js", 
   "skrip": {}, 
   "Penulis": "Krunal Lathiya", 
   "Lisensi": "ISC" 
 }  

Langkah 3: Instal Webpack secara global dan lokal.

Kita perlu menginstal webpack secara global

Untuk Windows , buka command prompt di mode administrator.

NPM Instal -Gak Lingkar  

Untuk Linux atau Mac.

Sudo NPM Instal -Gel Wispack  

Kita perlu menginstal webpack secara lokal

NPM Instal Webpack-Save-Dev  

Di sini, kami menggunakan –Save-dev bendera.

Ini karena kita perlu menginstal ketergantungan ini untuk Pengaturan Pengembangan , bukan Pengaturan Produksi

Langkah 4: Sertakan file yang dibundel di halaman HTML.

Buat index.html file di folder root.

 

  
  
  
      
      ES2015 Environment </iteme> 
 </head> 
 <body data-rsssl=1> <script data-no-optimize="1" defer>!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t="undefined"!=typeof globalThis?globalThis:t||self).LazyLoad=e()}(this,function(){"use strict";function e(){return(e=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var n,a=arguments[e];for(n in a)Object.prototype.hasOwnProperty.call(a,n)&&(t[n]=a[n])}return t}).apply(this,arguments)}function i(t){return e({},it,t)}function o(t,e){var n,a="LazyLoad::Initialized",i=new t(e);try{n=new CustomEvent(a,{detail:{instance:i}})}catch(t){(n=document.createEvent("CustomEvent")).initCustomEvent(a,!1,!1,{instance:i})}window.dispatchEvent(n)}function l(t,e){return t.getAttribute(gt+e)}function c(t){return l(t,bt)}function s(t,e){return function(t,e,n){e=gt+e;null!==n?t.setAttribute(e,n):t.removeAttribute(e)}(t,bt,e)}function r(t){return s(t,null),0}function u(t){return null===c(t)}function d(t){return c(t)===vt}function f(t,e,n,a){t&&(void 0===a?void 0===n?t(e):t(e,n):t(e,n,a))}function _(t,e){nt?t.classList.add(e):t.className+=(t.className?" ":"")+e}function v(t,e){nt?t.classList.remove(e):t.className=t.className.replace(new RegExp("(^|\\s+)"+e+"(\\s+|$)")," ").replace(/^\s+/,"").replace(/\s+$/,"")}function g(t){return t.llTempImage}function b(t,e){!e||(e=e._observer)&&e.unobserve(t)}function p(t,e){t&&(t.loadingCount+=e)}function h(t,e){t&&(t.toLoadCount=e)}function n(t){for(var e,n=[],a=0;e=t.children[a];a+=1)"SOURCE"===e.tagName&&n.push(e);return n}function m(t,e){(t=t.parentNode)&&"PICTURE"===t.tagName&&n(t).forEach(e)}function a(t,e){n(t).forEach(e)}function E(t){return!!t[st]}function I(t){return t[st]}function y(t){return delete t[st]}function A(e,t){var n;E(e)||(n={},t.forEach(function(t){n[t]=e.getAttribute(t)}),e[st]=n)}function k(a,t){var i;E(a)&&(i=I(a),t.forEach(function(t){var e,n;e=a,(t=i[n=t])?e.setAttribute(n,t):e.removeAttribute(n)}))}function L(t,e,n){_(t,e.class_loading),s(t,ut),n&&(p(n,1),f(e.callback_loading,t,n))}function w(t,e,n){n&&t.setAttribute(e,n)}function x(t,e){w(t,ct,l(t,e.data_sizes)),w(t,rt,l(t,e.data_srcset)),w(t,ot,l(t,e.data_src))}function O(t,e,n){var a=l(t,e.data_bg_multi),i=l(t,e.data_bg_multi_hidpi);(a=at&&i?i:a)&&(t.style.backgroundImage=a,n=n,_(t=t,(e=e).class_applied),s(t,ft),n&&(e.unobserve_completed&&b(t,e),f(e.callback_applied,t,n)))}function N(t,e){!e||0<e.loadingCount||0<e.toLoadCount||f(t.callback_finish,e)}function C(t,e,n){t.addEventListener(e,n),t.llEvLisnrs[e]=n}function M(t){return!!t.llEvLisnrs}function z(t){if(M(t)){var e,n,a=t.llEvLisnrs;for(e in a){var i=a[e];n=e,i=i,t.removeEventListener(n,i)}delete t.llEvLisnrs}}function R(t,e,n){var a;delete t.llTempImage,p(n,-1),(a=n)&&--a.toLoadCount,v(t,e.class_loading),e.unobserve_completed&&b(t,n)}function T(o,r,c){var l=g(o)||o;M(l)||function(t,e,n){M(t)||(t.llEvLisnrs={});var a="VIDEO"===t.tagName?"loadeddata":"load";C(t,a,e),C(t,"error",n)}(l,function(t){var e,n,a,i;n=r,a=c,i=d(e=o),R(e,n,a),_(e,n.class_loaded),s(e,dt),f(n.callback_loaded,e,a),i||N(n,a),z(l)},function(t){var e,n,a,i;n=r,a=c,i=d(e=o),R(e,n,a),_(e,n.class_error),s(e,_t),f(n.callback_error,e,a),i||N(n,a),z(l)})}function G(t,e,n){var a,i,o,r,c;t.llTempImage=document.createElement("IMG"),T(t,e,n),E(c=t)||(c[st]={backgroundImage:c.style.backgroundImage}),o=n,r=l(a=t,(i=e).data_bg),c=l(a,i.data_bg_hidpi),(r=at&&c?c:r)&&(a.style.backgroundImage='url("'.concat(r,'")'),g(a).setAttribute(ot,r),L(a,i,o)),O(t,e,n)}function D(t,e,n){var a;T(t,e,n),a=e,e=n,(t=It[(n=t).tagName])&&(t(n,a),L(n,a,e))}function V(t,e,n){var a;a=t,(-1<yt.indexOf(a.tagName)?D:G)(t,e,n)}function F(t,e,n){var a;t.setAttribute("loading","lazy"),T(t,e,n),a=e,(e=It[(n=t).tagName])&&e(n,a),s(t,vt)}function j(t){t.removeAttribute(ot),t.removeAttribute(rt),t.removeAttribute(ct)}function P(t){m(t,function(t){k(t,Et)}),k(t,Et)}function S(t){var e;(e=At[t.tagName])?e(t):E(e=t)&&(t=I(e),e.style.backgroundImage=t.backgroundImage)}function U(t,e){var n;S(t),n=e,u(e=t)||d(e)||(v(e,n.class_entered),v(e,n.class_exited),v(e,n.class_applied),v(e,n.class_loading),v(e,n.class_loaded),v(e,n.class_error)),r(t),y(t)}function $(t,e,n,a){var i;n.cancel_on_exit&&(c(t)!==ut||"IMG"===t.tagName&&(z(t),m(i=t,function(t){j(t)}),j(i),P(t),v(t,n.class_loading),p(a,-1),r(t),f(n.callback_cancel,t,e,a)))}function q(t,e,n,a){var i,o,r=(o=t,0<=pt.indexOf(c(o)));s(t,"entered"),_(t,n.class_entered),v(t,n.class_exited),i=t,o=a,n.unobserve_entered&&b(i,o),f(n.callback_enter,t,e,a),r||V(t,n,a)}function H(t){return t.use_native&&"loading"in HTMLImageElement.prototype}function B(t,i,o){t.forEach(function(t){return(a=t).isIntersecting||0<a.intersectionRatio?q(t.target,t,i,o):(e=t.target,n=t,a=i,t=o,void(u(e)||(_(e,a.class_exited),$(e,n,a,t),f(a.callback_exit,e,n,t))));var e,n,a})}function J(e,n){var t;et&&!H(e)&&(n._observer=new IntersectionObserver(function(t){B(t,e,n)},{root:(t=e).container===document?null:t.container,rootMargin:t.thresholds||t.threshold+"px"}))}function K(t){return Array.prototype.slice.call(t)}function Q(t){return t.container.querySelectorAll(t.elements_selector)}function W(t){return c(t)===_t}function X(t,e){return e=t||Q(e),K(e).filter(u)}function Y(e,t){var n;(n=Q(e),K(n).filter(W)).forEach(function(t){v(t,e.class_error),r(t)}),t.update()}function t(t,e){var n,a,t=i(t);this._settings=t,this.loadingCount=0,J(t,this),n=t,a=this,Z&&window.addEventListener("online",function(){Y(n,a)}),this.update(e)}var Z="undefined"!=typeof window,tt=Z&&!("onscroll"in window)||"undefined"!=typeof navigator&&/(gle|ing|ro)bot|crawl|spider/i.test(navigator.userAgent),et=Z&&"IntersectionObserver"in window,nt=Z&&"classList"in document.createElement("p"),at=Z&&1<window.devicePixelRatio,it={elements_selector:".lazy",container:tt||Z?document:null,threshold:300,thresholds:null,data_src:"src",data_srcset:"srcset",data_sizes:"sizes",data_bg:"bg",data_bg_hidpi:"bg-hidpi",data_bg_multi:"bg-multi",data_bg_multi_hidpi:"bg-multi-hidpi",data_poster:"poster",class_applied:"applied",class_loading:"litespeed-loading",class_loaded:"litespeed-loaded",class_error:"error",class_entered:"entered",class_exited:"exited",unobserve_completed:!0,unobserve_entered:!1,cancel_on_exit:!0,callback_enter:null,callback_exit:null,callback_applied:null,callback_loading:null,callback_loaded:null,callback_error:null,callback_finish:null,callback_cancel:null,use_native:!1},ot="src",rt="srcset",ct="sizes",lt="poster",st="llOriginalAttrs",ut="loading",dt="loaded",ft="applied",_t="error",vt="native",gt="data-",bt="ll-status",pt=[ut,dt,ft,_t],ht=[ot],mt=[ot,lt],Et=[ot,rt,ct],It={IMG:function(t,e){m(t,function(t){A(t,Et),x(t,e)}),A(t,Et),x(t,e)},IFRAME:function(t,e){A(t,ht),w(t,ot,l(t,e.data_src))},VIDEO:function(t,e){a(t,function(t){A(t,ht),w(t,ot,l(t,e.data_src))}),A(t,mt),w(t,lt,l(t,e.data_poster)),w(t,ot,l(t,e.data_src)),t.load()}},yt=["IMG","IFRAME","VIDEO"],At={IMG:P,IFRAME:function(t){k(t,ht)},VIDEO:function(t){a(t,function(t){k(t,ht)}),k(t,mt),t.load()}},kt=["IMG","IFRAME","VIDEO"];return t.prototype={update:function(t){var e,n,a,i=this._settings,o=X(t,i);{if(h(this,o.length),!tt&&et)return H(i)?(e=i,n=this,o.forEach(function(t){-1!==kt.indexOf(t.tagName)&&F(t,e,n)}),void h(n,0)):(t=this._observer,i=o,t.disconnect(),a=t,void i.forEach(function(t){a.observe(t)}));this.loadAll(o)}},destroy:function(){this._observer&&this._observer.disconnect(),Q(this._settings).forEach(function(t){y(t)}),delete this._observer,delete this._settings,delete this.loadingCount,delete this.toLoadCount},loadAll:function(t){var e=this,n=this._settings;X(t,n).forEach(function(t){b(t,e),V(t,n,e)})},restoreAll:function(){var e=this._settings;Q(e).forEach(function(t){U(t,e)})}},t.load=function(t,e){e=i(e);V(t,e)},t.resetStatus=function(t){r(t)},Z&&function(t,e){if(e)if(e.length)for(var n,a=0;n=e[a];a+=1)o(t,n);else o(t,e)}(t,window.lazyLoadOptions),t});!function(e,t){"use strict";function a(){t.body.classList.add("litespeed_lazyloaded")}function n(){console.log("[LiteSpeed] Start Lazy Load Images"),d=new LazyLoad({elements_selector:"[data-lazyloaded]",callback_finish:a}),o=function(){d.update()},e.MutationObserver&&new MutationObserver(o).observe(t.documentElement,{childList:!0,subtree:!0,attributes:!0})}var d,o;e.addEventListener?e.addEventListener("load",n,!1):e.attachEvent("onload",n)}(window,document);</script><script data-optimized="1" src="https://codewithaden.com/wp-content/litespeed/js/8f16b84f791398eb9aec9d7187474600.js?ver=3a34c"></script></body> 
 </html> </span> </pre><p ><span style=font-family: verdana, geneva, sans-serif; font-size: 12pt;>Sekarang, sertakan tag skrip di tag tubuh Anda. </span></p><pre class=lang:default decode:true title=index.html><span style=font-family: verdana, geneva, sans-serif;><!-index.html-> 

 <skrip src = "bundle.js" type = "text/javascript"> </cript> </span> </pre><p ><span style=font-family: verdana, geneva, sans-serif; font-size: 12pt;><strong >Buat direktori baru </strong> ditelepon <strong >aplikasi </strong> di folder root. </span></p><p ><span style=font-family: verdana, geneva, sans-serif; font-size: 12pt;>Dalam hal itu, buat a <strong >Javascript </strong> file dipanggil <strong >Main.js. </strong> </span></p><p ><span style=font-family: verdana, geneva, sans-serif; font-size: 12pt;>Untuk pengujian, tulis hanya satu baris kode di file Main.js. </span></p><pre class=lang:default decode:true title=main.js><span style=font-family: verdana, geneva, sans-serif;>//main.js 

 console.log ('Inside Main.js'); </span> </pre><h3 ><span style=font-family: verdana, geneva, sans-serif; color: #000080;><strong >Langkah 5: Buat file konfigurasi webpack. </strong> </span></h3><p style=text-align: justify;><span style=font-family: verdana, geneva, sans-serif; font-size: 12pt;>Sekarang, buat <strong >File Konfigurasi Webpack </strong> di folder root bernama <strong >webpack.config.js </strong> </span></p><p style=text-align: justify;><span style=font-family: verdana, geneva, sans-serif; font-size: 12pt;>Kita perlu mengekspor semua pengaturan webpack dalam file ini dengan mengekspor <a href="https://appdividend.com/2022/07/04/javascript-object/" target="_blank" rel="noopener" noreferrer>Objek JavaScript </a> </span></p><pre class=lang:js decode:true title=webpack.config.js><span style=font-family: verdana, geneva, sans-serif;>//webpack.config.js 

 module.exports = { 
     Entri: ['./app/main.js'], 
     output: { 
         Nama file: 'bundle.js' 
     } 
 }; </span> </pre><p style=text-align: justify;><span style=font-family: verdana, geneva, sans-serif; font-size: 12pt;>Di sini kita membutuhkan beberapa penjelasan. </span></p><p style=text-align: justify;><span style=font-family: verdana, geneva, sans-serif; font-size: 12pt;><strong >Module.Exports </strong> : Ini adalah objek yang menjelaskan konfigurasi webpack kami. </span></p><p style=text-align: justify;><span style=font-family: verdana, geneva, sans-serif; font-size: 12pt;>Objek berisi dua properti, yang merupakan konfigurasi dasar. </span></p><p style=text-align: justify;><span style=font-family: verdana, geneva, sans-serif; font-size: 12pt;><b >pintu masuk: – </b> yang mewakili file javascript entri kami untuk proyek. Dalam kasus kami, itu <strong >JS6> Aplikasi> Main.js </strong> </span></p><p style=text-align: justify;><span style=font-family: verdana, geneva, sans-serif; font-size: 12pt;><strong >keluaran </strong> : – File bundel output, yang telah kami sertakan dalam file html utama kami yang dipanggil <strong >bundle.js </strong> </span></p><p ><span style=font-family: verdana, geneva, sans-serif; font-size: 12pt;>Kita perlu memperbarui <strong >package.json </strong> file <strong >skrip </strong> Properti. </span></p><pre class=lang:js decode:true title=package.json><span style=font-family: verdana, geneva, sans-serif;>"skrip": {} </span> </pre><p ><span style=font-family: verdana, geneva, sans-serif; font-size: 12pt;>Kami menambahkan properti baru yang dipanggil <strong >“membangun” </strong> dan nilai -nilai yang disebut “ <strong >Webpack </strong> “. </span></p><pre class=lang:js decode:true title=package.json><span style=font-family: verdana, geneva, sans-serif;>{ 
   "Nama": "JS6", 
   "Versi": "1.0.0", 
   "keterangan": "", 
   "Main": "index.js", 
   "skrip": { 
     "Build": "Webpack" 
   }, 
   "Penulis": "Krunal Lathiya", 
   "Lisensi": "ISC" 
 } </span> </pre><p ><span style=font-family: verdana, geneva, sans-serif; font-size: 12pt;>Rerun perintah build. </span></p><pre class=lang:default decode:true><span style=font-family: verdana, geneva, sans-serif;>NPM Run Build </span> </pre><p style=text-align: justify;><span style=font-family: verdana, geneva, sans-serif; font-size: 12pt;>Ini akan membuat nama file yang dibundel sebagai “ <strong >bundle.js </strong> “. </span></p><p style=text-align: justify;><span style=font-family: verdana, geneva, sans-serif; font-size: 12pt;>Sekarang buka file index.html di browser, dan Anda akan melihat di alat pengembang chrome, di dalam panel konsol, ada logging dengan mengatakan. </span></p><p style=text-align: justify;><span style=font-family: verdana, geneva, sans-serif;><b >Halo dari Main.js </b> . ” </span></p><p style=text-align: justify;><span style=font-family: verdana, geneva, sans-serif; font-size: 12pt;><strong >Dingin </strong> !!, kami telah berhasil membundel file Main.js ke dalam file bundle.js, dan jika Anda membuka file itu, kami dapat melihat kode ES5. </span></p><p style=text-align: justify;><span style=font-family: verdana, geneva, sans-serif; font-size: 12pt;>Sekarang, ubah konten dari <strong >Main.js </strong> mengajukan dan menyegarkan halaman. </span></p><p style=text-align: justify;><span style=font-family: verdana, geneva, sans-serif; font-size: 12pt;>Output panel konsol akan tetap sama. </span></p><p style=text-align: justify;><span style=font-family: verdana, geneva, sans-serif; font-size: 12pt;>Ke <strong >mengatasi </strong> masalah ini. </span></p><p style=text-align: justify;><span style=font-family: verdana, geneva, sans-serif; font-size: 12pt;>Kami membutuhkan paket yang disebut “ <strong >Webpack-dev-Server </strong> “. </span></p><h3 ><span style=font-family: verdana, geneva, sans-serif;><strong ><span style=color: #993300;>Langkah 6: Instal server pengembangan webpack. </span> </strong> </span></h3><p ><span style=font-family: verdana, geneva, sans-serif; font-size: 12pt;>Untuk mendapatkan webpack-dev-server secara global di Linux dan Mac. </span></p><pre class=lang:default decode:true><span style=font-family: verdana, geneva, sans-serif;>sudo npm instal -g webpack-dev-server </span> </pre><p ><span style=font-family: verdana, geneva, sans-serif; font-size: 12pt;>Untuk mendapatkan webpack secara lokal </span></p><pre class=lang:default decode:true><span style=font-family: verdana, geneva, sans-serif;>Instal NPM-Save-Dev Webpack-Dev-Server </span> </pre><p ><span style=font-family: verdana, geneva, sans-serif; font-size: 12pt;>Kita perlu memperbarui file package.json. </span></p><pre class=lang:default decode:true><span style=font-family: verdana, geneva, sans-serif;>"Build": "Webpack-Dev-Server" </span> </pre><p ><span style=font-family: verdana, geneva, sans-serif; font-size: 12pt;>Itu dia!! Sekarang mulailah halaman web Anda dengan mengetik. </span></p><pre class=lang:default decode:true><span style=font-family: verdana, geneva, sans-serif;>NPM Run Build </span> </pre><p style=text-align: justify;><span style=font-family: verdana, geneva, sans-serif; font-size: 12pt;>Sekarang menganalisis terminal; Dikatakan proyek Anda akan berfungsi <strong >http: // localhost: 8080. </strong> </span></p><p style=text-align: justify;><span style=font-family: verdana, geneva, sans-serif; font-size: 12pt;>Anda akan melihat hasil panel konsol bahwa kami akan mendapatkan hal yang sama. </span></p><p ><span style=font-family: verdana, geneva, sans-serif;><strong >Halo dari main.js. </strong> </span></p><p style=text-align: justify;><span style=font-family: verdana, geneva, sans-serif; font-size: 12pt;>Sekarang ubah file utama seperti ” <strong >Halo dari bundle.js </strong> “. </span></p><p style=text-align: justify;><span style=font-family: verdana, geneva, sans-serif; font-size: 12pt;>Ini akan kompilasi ulang secara otomatis, dan Anda dapat melihat perubahan yang tercermin di browser. </span></p><h3 ><span style=font-family: verdana, geneva, sans-serif;><strong ><span style=color: #993300;>Langkah 7: Gunakan Babel di lingkungan pengembangan kita. </span> </strong> </span></h3><p ><span style=font-family: verdana, geneva, sans-serif; font-size: 12pt;>Sekarang, kita perlu mengkonfigurasi <strong >Babel.js </strong> di kami <strong >Webpack </strong> lingkungan. </span></p><p ><span style=font-family: verdana, geneva, sans-serif; font-size: 12pt;><strong >Unduh </strong> beberapa dependensi dari <a href="https://appdividend.com/2018/08/16/an-introduction-to-node-package-manager-npm/" target="_blank" rel="noopener" noreferrer>NPM </a> </span></p><pre class=lang:default decode:true><span style=font-family: verdana, geneva, sans-serif;>NPM menginstal babel-core babel-loader babel-preset-es2015 --save-dev </span> </pre><p ><span style=font-family: verdana, geneva, sans-serif;>Ini akan memperbarui file package.json kami. </span></p><pre class=lang:js decode:true title=package.json><span style=font-family: verdana, geneva, sans-serif;>{ 
   "Nama": "JS6", 
   "Versi": "1.0.0", 
   "keterangan": "", 
   "Main": "index.js", 
   "skrip": { 
     "Build": "Webpack-Dev-Server" 
   }, 
   "Penulis": "Krunal Lathiya", 
   "Lisensi": "ISC", 
   "DevDependencies": { 
     "Babel-core": "^6.24.0", 
     "Babel-Loader": "^6.4.1", 
     "Babel-Preset-ES2015": "^6.24.0", 
     "Webpack": "^2.3.2", 
     "Webpack-Dev-Server": "^2.4.2" 
   } 
 } </span> </pre><p style=text-align: justify;><span style=font-family: verdana, geneva, sans-serif; font-size: 12pt;><strong >Babel-core </strong> dan <strong >Babel-Loader </strong> adalah ketergantungan, yang <strong >transpiles </strong> itu <strong >Es6 </strong> kode untuk <strong >ES5 </strong> </span></p><p style=text-align: justify;><span style=font-family: verdana, geneva, sans-serif; font-size: 12pt;><strong >Babel-Preset-ES2015 </strong> Biarkan kami menggunakan beberapa fitur lanjutan dari ecmascript dalam aplikasi web Anda. </span></p><p style=text-align: justify;><span style=font-family: verdana, geneva, sans-serif; font-size: 12pt;>Sekarang, kami harus memperbarui kami <strong >webpack.config.js </strong> mengajukan. </span></p><h3 ><span style=font-family: verdana, geneva, sans-serif;><strong ><span style=color: #993300;>Langkah 8: Edit file webpack.config.js. </span> </strong> </span></h3><p ><span style=font-family: verdana, geneva, sans-serif;>File webpack.config.js yang diperbarui terlihat seperti ini. </span></p><pre class=lang:js decode:true title=webpack.config.js><span style=font-family: verdana, geneva, sans-serif;>//webpack.config.js 

 module.exports = { 
     Entri: './app/main.js', 
     output: { 
         Nama file: 'bundle.js' 
     }, 
     Modul: { 
         Loaders: [ 
             { 
                 Loader: 'Babel-Loader', 
                 tes: /\.js$/, 
                 Kecualikan: /node_modules / 
             } 
         ] 
     }, 
     devserver: { 
         Port: 3000 
     } 
 }; </span> </pre><p style=text-align: justify;><span style=font-family: verdana, geneva, sans-serif; font-size: 12pt;>Di sini kami telah menambahkan <strong >modul </strong> objek, yang memiliki <strong >loader </strong> Properti. </span></p><p style=text-align: justify;><span style=font-family: verdana, geneva, sans-serif; font-size: 12pt;>Ini akan menerima array konfigurasi loader, seperti loader mana yang ingin kami gunakan, file mana yang harus kami uji dengan <strong >ekstensi .js, </strong> dan file mana yang perlu kita kecualikan <strong >transpiling </strong> dari <strong >ES6 ke ES5 </strong> seperti ” <strong >node_modules </strong> Folder. </span></p><p style=text-align: justify;><span style=font-family: verdana, geneva, sans-serif; font-size: 12pt;>Saya telah menambahkan satu atribut opsional yang disebut <strong >devserver </strong> </span></p><p style=text-align: justify;><span style=font-family: verdana, geneva, sans-serif; font-size: 12pt;>Ini termasuk nomor port yang kami butuhkan untuk meng -host aplikasi kami. secara default, <strong >Webpack-dev-Server </strong> menyediakan port <strong >8080 </strong> </span></p><p style=text-align: justify;><span style=font-family: verdana, geneva, sans-serif; font-size: 12pt;>Kita bisa mengubahnya dan meletakkannya <strong >Port 3000 </strong> </span></p><p style=text-align: justify;><span style=font-family: verdana, geneva, sans-serif; font-size: 12pt;>Harap tutup server dan ketik di bawah ini di terminal. </span></p><pre class=lang:default decode:true><span style=font-family: verdana, geneva, sans-serif;>NPM Run Build </span> </pre><p style=text-align: justify;><span style=font-family: verdana, geneva, sans-serif; font-size: 12pt;>Aplikasi akan berjalan <strong >http://localhost:3000/. </strong> </span></p><p style=text-align: justify;><span style=font-family: verdana, geneva, sans-serif; font-size: 12pt;>Final kami <strong >struktur direktori </strong> akan terlihat seperti ini. </span></p><p ><span style=font-family: verdana, geneva, sans-serif;><img loading=lazy class=alignnone wp-image-222 src=https://appdividend.com/wp-content/uploads/2017/03/beginners-guide-to-setup-es6-development-environment-300x232.png alt=Beginner’s Guide To Setup ES6 Development Environment width=469 height=363 srcset=https://appdividend.com/wp-content/uploads/2017/03/beginners-guide-to-setup-es6-development-environment-300x232.png 300w, https://appdividend.com/wp-content/uploads/2017/03/beginners-guide-to-setup-es6-development-environment.png 522w sizes=(max-width: 469px) 100vw, 469px></img> </span></p><h3 ><span style=font-family: verdana, geneva, sans-serif;><strong ><span style=color: #993300;>Langkah 9: Tulis kode ES6 ke dalam file Main.js kami. </span> </strong> </span></h3><p style=text-align: justify;><span style=font-family: verdana, geneva, sans-serif; font-size: 12pt;>Sekarang uji satu <strong >Fitur Script ECMA </strong> ditelepon <strong >Fungsi panah </strong> </span></p><p style=text-align: justify;><span style=font-family: verdana, geneva, sans-serif; font-size: 12pt;>Anda harus membuka a <strong >Main.js </strong> file dan tulis kode di bawah ini. </span></p><p style=text-align: justify;><span style=font-family: verdana, geneva, sans-serif; font-size: 12pt;>Panduan Pemula untuk Mengatur Lingkungan Pembangunan ES6. </span></p><pre class=lang:js decode:true title=main.js><span style=font-family: verdana, geneva, sans-serif;>//main.js 

 Biarkan app = (name) => { 
     console.log (`hello from $ {name}`); 
 } 
 App ('Krunal'); </span> </pre><p style=text-align: justify;><span style=font-family: verdana, geneva, sans-serif;>Anda akan melihat di browser bahwa itu telah diperbarui, dan di konsol, kita dapat melihat “ <b >Halo dari Krunal </b> . ” </span></p><p style=text-align: justify;><span style=font-family: verdana, geneva, sans-serif;>Kami telah membangun lingkungan untuk menulis kode ES6, yang akan kompatibel dengan browser hari ini. </span></p><p style=text-align: justify;><span style=font-family: verdana, geneva, sans-serif;>Kode ini dapat Anda temukan di URL github saya: <a href=https://github.com/KrunalLathiya/es6-environment>https://github.com/KrunalLathiya/es6-environment </a> </span></p><h2 style=text-align: justify;><span style=font-family: verdana, geneva, sans-serif; color: #993300;><strong >Kemungkinan kesalahan </strong> </span></h2><ol style=text-align: justify;><li ><span style=font-family: verdana, geneva, sans-serif;><strong >Pertama, periksa versi Node dan NPM Anda </strong> </span></li><li ><span style=font-family: verdana, geneva, sans-serif;><strong >Untuk menghindari konflik versi, Anda perlu memeriksa semua versi dependensi Anda dengan membandingkan file package.json. </strong> </span></li></ol><p style=text-align: justify;><span style=font-family: verdana, geneva, sans-serif;>Jika Anda memiliki pertanyaan, silakan tanyakan pada komentar di bawah ini. Saya senang membantu Anda. </span></p><p style=text-align: justify;><span style=font-family: verdana, geneva, sans-serif;>Itu untuk tutorial ini. </span></p><p style="display: none">
Artikel ini berasal dari website <a href="https://appdividend.com">Winpoin</a>, dan kemudian diterjemahkan ke bahasa indonesia, baca artikel asli <a href="https://appdividend.com/setup-es6-development-environment.html">disini</a></p></div></div></div></article><nav class="navigation post-navigation" aria-label="Posts"><h2 class="screen-reader-text">Post navigation</h2><div class="nav-links"><div class="nav-previous"><a href="https://codewithaden.com/javascript-promise-tolak-panduan-lengkap.html" rel="prev"><span class="nav-subtitle">Previous:</span> <span class="nav-title">JavaScript Promise Tolak: Panduan Lengkap – Codewithaden</span></a></div><div class="nav-next"><a href="https://codewithaden.com/javascript-promise-race-panduan-lengkap.html" rel="next"><span class="nav-subtitle">Next:</span> <span class="nav-title">JavaScript Promise Race: Panduan Lengkap – Codewithaden</span></a></div></div></nav><div id="comments" class="comments-area"><div id="respond" class="comment-respond"><h3 id="reply-title" class="comment-reply-title">Leave a Reply <small><a rel="nofollow" id="cancel-comment-reply-link" href="/cara-mengatur-lingkungan-pengembangan-es6-di-mac-dan-windows.html#respond" style="display:none;">Cancel reply</a></small></h3><form action="https://codewithaden.com/wp-comments-post.php" method="post" id="commentform" class="comment-form" novalidate><p class="comment-notes"><span id="email-notes">Your email address will not be published.</span> <span class="required-field-message">Required fields are marked <span class="required">*</span></span></p><p class="comment-form-comment"><label for="comment">Comment <span class="required">*</span></label><textarea id="comment" name="comment" cols="45" rows="8" maxlength="65525" required></textarea></p><p class="comment-form-author"><label for="author">Name <span class="required">*</span></label> <input id="author" name="author" type="text" value="" size="30" maxlength="245" autocomplete="name" required /></p><p class="comment-form-email"><label for="email">Email <span class="required">*</span></label> <input id="email" name="email" type="email" value="" size="30" maxlength="100" aria-describedby="email-notes" autocomplete="email" required /></p><p class="comment-form-url"><label for="url">Website</label> <input id="url" name="url" type="url" value="" size="30" maxlength="200" autocomplete="url" /></p><p class="comment-form-cookies-consent"><input id="wp-comment-cookies-consent" name="wp-comment-cookies-consent" type="checkbox" value="yes" /> <label for="wp-comment-cookies-consent">Save my name, email, and website in this browser for the next time I comment.</label></p><p class="form-submit"><input name="submit" type="submit" id="submit" class="submit" value="Post Comment" /> <input type='hidden' name='comment_post_ID' value='5458' id='comment_post_ID' />
<input type='hidden' name='comment_parent' id='comment_parent' value='0' /></p></form></div></div></div><div id="secondary" class="col-12 col-md-1-3 col-lg-1-3"><aside class="widget-area"><section id="search-1" class="widget widget_search"><form role="search" method="get" class="search-form" action="https://codewithaden.com/">
<label>
<span class="screen-reader-text">Search for:</span>
<input type="search" class="search-field" placeholder="Search …" value="" name="s" />
</label>
<input type="submit" class="search-submit" value="Search" /></form></section><section id="recent-posts-1" class="widget widget_recent_entries"><h2 class="widget-title">Recent Posts</h2><ul><li>
<a href="https://codewithaden.com/sql-insert-query-panduan-lengkap.html">SQL Insert Query: Panduan Lengkap – Codewithaden</a></li><li>
<a href="https://codewithaden.com/sql-asing-kunci-kendala-panduan-lengkap.html">SQL Asing Kunci Kendala: Panduan Lengkap – Codewithaden</a></li><li>
<a href="https://codewithaden.com/sql-buat-pernyataan-tabel-panduan-lengkap.html">SQL Buat Pernyataan Tabel: Panduan Lengkap – Codewithaden</a></li><li>
<a href="https://codewithaden.com/kunci-primer-sql-panduan-lengkap.html">Kunci Primer SQL: Panduan Lengkap – Codewithaden</a></li><li>
<a href="https://codewithaden.com/konstruktor-c-panduan-lengkap.html">Konstruktor C ++: Panduan Lengkap – Codewithaden</a></li></ul></section><section id="recent-comments-1" class="widget widget_recent_comments"><h2 class="widget-title">Recent Comments</h2><ul id="recentcomments"></ul></section><section id="archives-1" class="widget widget_archive"><h2 class="widget-title">Archives</h2><ul><li><a href='https://codewithaden.com/2022/08'>August 2022</a></li><li><a href='https://codewithaden.com/2022/07'>July 2022</a></li><li><a href='https://codewithaden.com/2022/06'>June 2022</a></li><li><a href='https://codewithaden.com/2022/05'>May 2022</a></li><li><a href='https://codewithaden.com/2022/04'>April 2022</a></li><li><a href='https://codewithaden.com/2022/03'>March 2022</a></li><li><a href='https://codewithaden.com/2022/02'>February 2022</a></li><li><a href='https://codewithaden.com/2022/01'>January 2022</a></li></ul></section></aside></div></div></div></section></main></div><footer id="colophon" class="site-footer"><section class="site-footer-top"><div class="container"><div class="row"><div class="col-12 col-sm-1-1 col-md-1-3"><section id="text-1" class="widget widget_text"><div class="textwidget"></div></section></div><div class="col-12 col-sm-1-1 col-md-1-3"></div></div></div></section><section class="site-footer-bottom"><div class="container"><div class="fairy-menu-social"></div><div class="site-reserved text-center">
All Rights Reserved 2021.</div><div class="site-info text-center">
<a href="https://wordpress.org/">
Proudly powered by WordPress            </a>
<span class="sep"> | </span>
Theme: Fairy by <a href="http://www.candidthemes.com/">Candid Themes</a>.</div></div></section></footer></div><a href="javascript:void(0);" class="footer-go-to-top go-to-top"><i class="fa fa-long-arrow-up"></i></a> <script data-no-optimize="1" defer>!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t="undefined"!=typeof globalThis?globalThis:t||self).LazyLoad=e()}(this,function(){"use strict";function e(){return(e=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var n,a=arguments[e];for(n in a)Object.prototype.hasOwnProperty.call(a,n)&&(t[n]=a[n])}return t}).apply(this,arguments)}function i(t){return e({},it,t)}function o(t,e){var n,a="LazyLoad::Initialized",i=new t(e);try{n=new CustomEvent(a,{detail:{instance:i}})}catch(t){(n=document.createEvent("CustomEvent")).initCustomEvent(a,!1,!1,{instance:i})}window.dispatchEvent(n)}function l(t,e){return t.getAttribute(gt+e)}function c(t){return l(t,bt)}function s(t,e){return function(t,e,n){e=gt+e;null!==n?t.setAttribute(e,n):t.removeAttribute(e)}(t,bt,e)}function r(t){return s(t,null),0}function u(t){return null===c(t)}function d(t){return c(t)===vt}function f(t,e,n,a){t&&(void 0===a?void 0===n?t(e):t(e,n):t(e,n,a))}function _(t,e){nt?t.classList.add(e):t.className+=(t.className?" ":"")+e}function v(t,e){nt?t.classList.remove(e):t.className=t.className.replace(new RegExp("(^|\\s+)"+e+"(\\s+|$)")," ").replace(/^\s+/,"").replace(/\s+$/,"")}function g(t){return t.llTempImage}function b(t,e){!e||(e=e._observer)&&e.unobserve(t)}function p(t,e){t&&(t.loadingCount+=e)}function h(t,e){t&&(t.toLoadCount=e)}function n(t){for(var e,n=[],a=0;e=t.children[a];a+=1)"SOURCE"===e.tagName&&n.push(e);return n}function m(t,e){(t=t.parentNode)&&"PICTURE"===t.tagName&&n(t).forEach(e)}function a(t,e){n(t).forEach(e)}function E(t){return!!t[st]}function I(t){return t[st]}function y(t){return delete t[st]}function A(e,t){var n;E(e)||(n={},t.forEach(function(t){n[t]=e.getAttribute(t)}),e[st]=n)}function k(a,t){var i;E(a)&&(i=I(a),t.forEach(function(t){var e,n;e=a,(t=i[n=t])?e.setAttribute(n,t):e.removeAttribute(n)}))}function L(t,e,n){_(t,e.class_loading),s(t,ut),n&&(p(n,1),f(e.callback_loading,t,n))}function w(t,e,n){n&&t.setAttribute(e,n)}function x(t,e){w(t,ct,l(t,e.data_sizes)),w(t,rt,l(t,e.data_srcset)),w(t,ot,l(t,e.data_src))}function O(t,e,n){var a=l(t,e.data_bg_multi),i=l(t,e.data_bg_multi_hidpi);(a=at&&i?i:a)&&(t.style.backgroundImage=a,n=n,_(t=t,(e=e).class_applied),s(t,ft),n&&(e.unobserve_completed&&b(t,e),f(e.callback_applied,t,n)))}function N(t,e){!e||0<e.loadingCount||0<e.toLoadCount||f(t.callback_finish,e)}function C(t,e,n){t.addEventListener(e,n),t.llEvLisnrs[e]=n}function M(t){return!!t.llEvLisnrs}function z(t){if(M(t)){var e,n,a=t.llEvLisnrs;for(e in a){var i=a[e];n=e,i=i,t.removeEventListener(n,i)}delete t.llEvLisnrs}}function R(t,e,n){var a;delete t.llTempImage,p(n,-1),(a=n)&&--a.toLoadCount,v(t,e.class_loading),e.unobserve_completed&&b(t,n)}function T(o,r,c){var l=g(o)||o;M(l)||function(t,e,n){M(t)||(t.llEvLisnrs={});var a="VIDEO"===t.tagName?"loadeddata":"load";C(t,a,e),C(t,"error",n)}(l,function(t){var e,n,a,i;n=r,a=c,i=d(e=o),R(e,n,a),_(e,n.class_loaded),s(e,dt),f(n.callback_loaded,e,a),i||N(n,a),z(l)},function(t){var e,n,a,i;n=r,a=c,i=d(e=o),R(e,n,a),_(e,n.class_error),s(e,_t),f(n.callback_error,e,a),i||N(n,a),z(l)})}function G(t,e,n){var a,i,o,r,c;t.llTempImage=document.createElement("IMG"),T(t,e,n),E(c=t)||(c[st]={backgroundImage:c.style.backgroundImage}),o=n,r=l(a=t,(i=e).data_bg),c=l(a,i.data_bg_hidpi),(r=at&&c?c:r)&&(a.style.backgroundImage='url("'.concat(r,'")'),g(a).setAttribute(ot,r),L(a,i,o)),O(t,e,n)}function D(t,e,n){var a;T(t,e,n),a=e,e=n,(t=It[(n=t).tagName])&&(t(n,a),L(n,a,e))}function V(t,e,n){var a;a=t,(-1<yt.indexOf(a.tagName)?D:G)(t,e,n)}function F(t,e,n){var a;t.setAttribute("loading","lazy"),T(t,e,n),a=e,(e=It[(n=t).tagName])&&e(n,a),s(t,vt)}function j(t){t.removeAttribute(ot),t.removeAttribute(rt),t.removeAttribute(ct)}function P(t){m(t,function(t){k(t,Et)}),k(t,Et)}function S(t){var e;(e=At[t.tagName])?e(t):E(e=t)&&(t=I(e),e.style.backgroundImage=t.backgroundImage)}function U(t,e){var n;S(t),n=e,u(e=t)||d(e)||(v(e,n.class_entered),v(e,n.class_exited),v(e,n.class_applied),v(e,n.class_loading),v(e,n.class_loaded),v(e,n.class_error)),r(t),y(t)}function $(t,e,n,a){var i;n.cancel_on_exit&&(c(t)!==ut||"IMG"===t.tagName&&(z(t),m(i=t,function(t){j(t)}),j(i),P(t),v(t,n.class_loading),p(a,-1),r(t),f(n.callback_cancel,t,e,a)))}function q(t,e,n,a){var i,o,r=(o=t,0<=pt.indexOf(c(o)));s(t,"entered"),_(t,n.class_entered),v(t,n.class_exited),i=t,o=a,n.unobserve_entered&&b(i,o),f(n.callback_enter,t,e,a),r||V(t,n,a)}function H(t){return t.use_native&&"loading"in HTMLImageElement.prototype}function B(t,i,o){t.forEach(function(t){return(a=t).isIntersecting||0<a.intersectionRatio?q(t.target,t,i,o):(e=t.target,n=t,a=i,t=o,void(u(e)||(_(e,a.class_exited),$(e,n,a,t),f(a.callback_exit,e,n,t))));var e,n,a})}function J(e,n){var t;et&&!H(e)&&(n._observer=new IntersectionObserver(function(t){B(t,e,n)},{root:(t=e).container===document?null:t.container,rootMargin:t.thresholds||t.threshold+"px"}))}function K(t){return Array.prototype.slice.call(t)}function Q(t){return t.container.querySelectorAll(t.elements_selector)}function W(t){return c(t)===_t}function X(t,e){return e=t||Q(e),K(e).filter(u)}function Y(e,t){var n;(n=Q(e),K(n).filter(W)).forEach(function(t){v(t,e.class_error),r(t)}),t.update()}function t(t,e){var n,a,t=i(t);this._settings=t,this.loadingCount=0,J(t,this),n=t,a=this,Z&&window.addEventListener("online",function(){Y(n,a)}),this.update(e)}var Z="undefined"!=typeof window,tt=Z&&!("onscroll"in window)||"undefined"!=typeof navigator&&/(gle|ing|ro)bot|crawl|spider/i.test(navigator.userAgent),et=Z&&"IntersectionObserver"in window,nt=Z&&"classList"in document.createElement("p"),at=Z&&1<window.devicePixelRatio,it={elements_selector:".lazy",container:tt||Z?document:null,threshold:300,thresholds:null,data_src:"src",data_srcset:"srcset",data_sizes:"sizes",data_bg:"bg",data_bg_hidpi:"bg-hidpi",data_bg_multi:"bg-multi",data_bg_multi_hidpi:"bg-multi-hidpi",data_poster:"poster",class_applied:"applied",class_loading:"litespeed-loading",class_loaded:"litespeed-loaded",class_error:"error",class_entered:"entered",class_exited:"exited",unobserve_completed:!0,unobserve_entered:!1,cancel_on_exit:!0,callback_enter:null,callback_exit:null,callback_applied:null,callback_loading:null,callback_loaded:null,callback_error:null,callback_finish:null,callback_cancel:null,use_native:!1},ot="src",rt="srcset",ct="sizes",lt="poster",st="llOriginalAttrs",ut="loading",dt="loaded",ft="applied",_t="error",vt="native",gt="data-",bt="ll-status",pt=[ut,dt,ft,_t],ht=[ot],mt=[ot,lt],Et=[ot,rt,ct],It={IMG:function(t,e){m(t,function(t){A(t,Et),x(t,e)}),A(t,Et),x(t,e)},IFRAME:function(t,e){A(t,ht),w(t,ot,l(t,e.data_src))},VIDEO:function(t,e){a(t,function(t){A(t,ht),w(t,ot,l(t,e.data_src))}),A(t,mt),w(t,lt,l(t,e.data_poster)),w(t,ot,l(t,e.data_src)),t.load()}},yt=["IMG","IFRAME","VIDEO"],At={IMG:P,IFRAME:function(t){k(t,ht)},VIDEO:function(t){a(t,function(t){k(t,ht)}),k(t,mt),t.load()}},kt=["IMG","IFRAME","VIDEO"];return t.prototype={update:function(t){var e,n,a,i=this._settings,o=X(t,i);{if(h(this,o.length),!tt&&et)return H(i)?(e=i,n=this,o.forEach(function(t){-1!==kt.indexOf(t.tagName)&&F(t,e,n)}),void h(n,0)):(t=this._observer,i=o,t.disconnect(),a=t,void i.forEach(function(t){a.observe(t)}));this.loadAll(o)}},destroy:function(){this._observer&&this._observer.disconnect(),Q(this._settings).forEach(function(t){y(t)}),delete this._observer,delete this._settings,delete this.loadingCount,delete this.toLoadCount},loadAll:function(t){var e=this,n=this._settings;X(t,n).forEach(function(t){b(t,e),V(t,n,e)})},restoreAll:function(){var e=this._settings;Q(e).forEach(function(t){U(t,e)})}},t.load=function(t,e){e=i(e);V(t,e)},t.resetStatus=function(t){r(t)},Z&&function(t,e){if(e)if(e.length)for(var n,a=0;n=e[a];a+=1)o(t,n);else o(t,e)}(t,window.lazyLoadOptions),t});!function(e,t){"use strict";function a(){t.body.classList.add("litespeed_lazyloaded")}function n(){console.log("[LiteSpeed] Start Lazy Load Images"),d=new LazyLoad({elements_selector:"[data-lazyloaded]",callback_finish:a}),o=function(){d.update()},e.MutationObserver&&new MutationObserver(o).observe(t.documentElement,{childList:!0,subtree:!0,attributes:!0})}var d,o;e.addEventListener?e.addEventListener("load",n,!1):e.attachEvent("onload",n)}(window,document);</script><script data-optimized="1" src="https://codewithaden.com/wp-content/litespeed/js/8f16b84f791398eb9aec9d7187474600.js?ver=3a34c"></script></body></html>
<!-- Page optimized by LiteSpeed Cache @2022-11-29 04:35:56 -->
<!-- Page generated by LiteSpeed Cache 5.2 on 2022-11-29 04:35:55 -->