Ինչ է Babel-ը։

Babel-ը JavaScript կոմպայլեր է։ Այն գործիքների շղթա է, որը հիմնականում օգտագործվում է ECMAScript 2015+ JavaScript կոդը թարգմանելու այնպիսի վիճակի, որը համատեղելի է հին բրաուզերների և միջավայրերի հետ։ Ստորև կնշեմ Babel-ի հիմնական հատկանիշները։

1. Շարահյուսության (syntax) փոխակերպում
2. Ծրագրի կոդի փոխակերպումներ (Codemods)
3. Համատակելիություն տարբեր բրաուզերների և միջավայրերի հետ

Այժմ ներկայացնեմ փոքր օրինակ, որպեսզի ավելի պարզ լինի ասվածը։

JavaScript

  // Փոխանցում ենք Babel -ին ES2015 սլաք ֆունկցիա (arrow function)  [1, 2, 3].  map(n => n + 1);  
  // Babel -ը վերադարձնում է  [1, 2, 3].  map(function(n) {    return n + 1;  });

Babel-ի կիրառությունները

Babel-ը ոչ միայն թարգմանում է ECMAScript-ը, այլ նաև թարգմանում է JSX, React.JS, TypeScript, WebPack և այլ նմանատիպ գործիքակազմեր։ Ժամանակակից գրեթե բոլոր գրադարանները (library) և framework-ները կիրառում են Babel-ը։ Այդ իսկ պատճառով կարևոր է իմանալ Babel-ի մասին։ Այն ունի բազում գործիքակազմեր, որոնք հեշտացնում են աշխատանքը։ Մենք կուսումնասիրենք ոչ ամբողջական ցանկը։

Օգտագործման կարգը

1. Առաջնային անհրաժեշտ է այն տեղադրել Ձեր նախագծում։

  npm install --save-dev @babel/core @babel/cli @babel/preset-env

2. Ստեղծեք ձեր նախագծի հիմնական թղթապանակում babel.config.json ֆայլը (այն անհրաժեշտ է v7.8.0 տարբերակի և բարձրի դեպքում):

  babel.config.json  

    {    "presets": [      [        "@babel/preset-env",        {          "targets": {            "edge": "17",            "firefox": "60",            "chrome": "67",            "safari": "11.1"          },          "useBuiltIns": "usage",          "corejs": "3.6.5"        }      ]    ]  }  

3. Այժմ ստեղծեք որևէ js (test.js) ֆայլ և ներմուծեք փոքրիկ կոդ ECMAScript-ով։ Այնուհետև տերմինալի միջոցով աշխատացնենք հետևյալ հրամանը։

  
 npx babel test.js

Վերջնական արդյունք

Եթե կատարեք այս քայլերը, ձեր նախագծում կտեղադրեք Babel-ը, որը կդարձնի JavaScript կոդը համատեղելի տարբեր բրաուզերների և միջավայրերի հետ: Բացի այդ, կարող եք օգտագործել նոր JavaScript հնարավորությունները՝ չանտեսելով հին բրաուզերների աջակցությունը:

Տեղադրելով համապատասխան կոնֆիգուրացիա և մի քանի պարզ հրամաններ, կստանաք մի կոդ, որը կարող է աշխատել բոլոր հին բրաուզերների և նախորդ տեխնոլոգիաների հետ՝ առանց որեւէ դժվարության:

Այս կերպ դուք ապահովում եք ձեր կոդի հասանելիությունը ավելի լայն լսարանի համար՝ նաև աշխատանք կատարելով ինչպես ժամանակակից տեխնոլոգիաների, այնպես էլ հին պլատֆորմների վրա:

Babel-ը բավականին հզոր և ճկուն գործիք է, որն ունի բազմաթիվ կոնֆիգուրացիոն հնարավորություններ: Այստեղ՝ մի քանի հիմնական կոնֆիգուրացիա, որոնք կարող ենք օգտագործել տարբեր անհրաժեշտությունների համար:

1. Presets

Presets-ը Babel-ի հիմնական կոնֆիգուրացիաներից մեկն է, որը ապահովում է JavaScript-ի տարբեր տարբերակների փոխակերպման կանոններ:

{  "presets": [    [      "@babel/preset-env",      {        "targets": {          "chrome": "67",          "firefox": "60"        },        "useBuiltIns": "usage",        "corejs": "3.6.5"      }    ]  ]}

2. Plugins

Plugins-ը թույլ են տալիս կատարել ավելի մանրամասն փոփոխություններ, օրինակ՝ JSX-ի կամ TypeScript-ի փոխակերպման համար:

{  "plugins": ["@babel/plugin-transform-react-jsx"]}

3. Targets

Այս կոնֆիգուրացիան հուշում է Babel-ին, թե որ բրաուզերների համար պետք է փոխարկվեն հատկությունները:

{  "targets": {    "chrome": "67",    "firefox": "60"  }}

4. UseBuiltIns

Այս ընտրանքը որոշում է, թե արդյոք Babel-ը պետք է օգտագործի polyfill-ներ, որոնք հնարավոր են նոր JavaScript հատկությունների համար:

{  "useBuiltIns": "usage",  "corejs": "3.6.5"}

5. Modules

Այս ընտրանքը կարգավորում է մոդուլների համակարգը՝ որոշելով, թե արդյոք Babel-ը պետք է փոխակերպի մոդուլների կոդը:

{  "modules": false}

6. Ignore

Այս ընտրանքը թույլ է տալիս նշել այն ֆայլերը կամ կատեգորիաները, որոնք պետք է անտեսվեն Babel-ի կողմից:

{  "ignore": ["node_modules"]}

7. Source Maps

Source maps-ը հնարավորություն է տալիս ավելի հեշտ հսկել և Debug անել վերափոխված կոդը՝ կապված տեղական կոդի հետ:

{  "sourceMaps": "inline"}

8. Cache

Այս ընտրանքը հնարավորություն է տալիս օգտագործել կամ մերժել cache-ի միջոցով վերափոխման ժամանակը:

{  "cacheDirectory": true}

Այսպիսով, դուք կարող եք հարմարեցնել Babel-ը ձեր նախագծի կարիքներին՝ կիրառելով տարբեր presets, plugins և կոնֆիգուրացիոն պարամետրեր:

Babel CLI

Babel CLI-ը (Command Line Interface) Babel-ի գործիքներից մեկն է, որը թույլ է տալիս աշխատել JavaScript կոդի վերափոխման գործընթացի հետ՝ հրամանատուի տերմինալի միջոցով:

Այն օգնում է վերափոխել JavaScript կոդը տարբեր ձևաչափերով՝ ցանկացած կոնֆիգուրացիայի հիման վրա: Babel CLI-ն օգտագործելով՝ մենք կարող ենք արագ փոփոխություններ անել տարբեր ֆայլերի կամ մոդուլների վրա:

Babel CLI-ի հետ աշխատելու համար

Որպեսզի կարողանաք օգտագործել Babel CLI-ն, դուք պետք է տեղադրեք այն ձեր նախագծում՝ հետևյալ հրամանի միջոցով:

npm install --save-dev @babel/cli @babel/core

Հիմնական հրամաններ

Հիմնական հրամանը, որով կարող եք աշխատացնել Babel-ը՝ տարրական կոդի փոխարկման համար, հետևյալն է՝

npx babel input.js --out-file output.js

Այս հրամանը թույլ է տալիս փոխարկել `input.js` ֆայլը և արդյունքը պահել `output.js` անունով:

Բազմաթիվ ֆայլերի վերափոխում

Եթե ցանկանում եք մի քանի ֆայլերը միաժամանակ փոխարկել, կարող եք օգտագործել *

wildcard-ը՝

npx babel src/*.js --out-dir lib

Այս հրամանը կներբեռնե բոլոր JavaScript ֆայլերը `src` թղթապանակից և կտեղադրի վերափոխված արդյունքը `lib` թղթապանակում:

Source Maps

Source maps-ը օգնում է անհատականացնել սխալների հայտնաբերում վերափոխված կոդում:

Եթե ցանկանում եք ստեղծել source maps՝ ավելացրեք `--source-maps` տարբերակը:

npx babel src --out-dir lib --source-maps

Այս հրամանով դուք կստանաք source maps գործառույթը այն կոդի հետ միասին, որը վերափոխել եք:

Կոնֆիգուրացիա օգտագործել CLI-ի միջոցով

Եթե ցանկանում եք օգտագործել `babel.config.json` կոնֆիգուրացիոն ֆայլը, կարող եք հեշտությամբ ներմուծել այն CLI-ի հրամանով:

npx babel src --out-dir lib --config-file babel.config.json

Այս հրամանով CLI-ն կօգտագործի ձեր `babel.config.json` ֆայլը՝ կոնֆիգուրացիաներին համապատասխան կոդ վերափոխելու համար:

Plugins և Presets օգտագործել CLI-ում

Բացի կոնֆիգուրացիոն ֆայլերից, դուք կարող եք նաև CLI-ի հետ միասին օգտագործել plugins և presets:

Օրինակ՝՝

npx babel src --out-dir lib --plugins @babel/plugin-transform-arrow-functions

Այս հրամանը կօգտագործի `@babel/plugin-transform-arrow-functions` plugin-ը՝ բոլոր arrow ֆունկցիաները փոխարկելու համար:

տարբեր պարտադիր փոփոխություններ

CLI-ի մի քանի այլ օգտակար փոխարկումների օրինակներ՝

• Փոխել մոդուլները CommonJS-ին՝ `--modules commonjs` տարբերակով:
• 
  

  npx babel src --out-dir lib --modules commonjs

• 
  
• Փոխել կոդը՝ միայն ECMAScript 2015 կամ ավելի բարձր տարբերակներ գրելու համար՝ `--presets @babel/preset-env`:
• 
  

  npx babel src --out-dir lib --presets @babel/preset-env

• 
  
• Բոլոր `node_modules` ֆայլերը բացառել՝ `--ignore` տարբերակով:
• 
  

  npx babel src --out-dir lib --ignore "node_modules/**"

Այսպիսով, Babel CLI-ն ունի շատ գործառույթներ, որոնք հեշտացնում են JavaScript կոդի վերափոխումը՝ տարբեր մոդուլների, plugins-ի, presets-ի և կոնֆիգուրացիաների միջոցով:

CLI-ի օգտագործումը հնարավորություն է տալիս ճկուն և արագ զարգացնել JavaScript ծրագրերը՝ նաև թեթևացնելով կամ ավելի հարմար դարձնելով պրոցեսը:

Babel Plugins

Babel plugins-ը հնարավորություն են տալիս վերափոխել JavaScript կոդը հատուկ ձևով։ Պլագիններն աշխատում են Babel-ի հետ՝ իրականացնելու տվյալ փոխարկումները։ Այստեղ ներկայացնում եմ մի քանի հիմնական Babel plugin-ներ՝ որոնք կարող են օգտակար լինել:

1. @babel/plugin-transform-arrow-functions

Այս plugin-ը փոխակերպում է ES6-ի arrow ֆունկցիաները՝ սովորական ֆունկցիաների։ Դա հատկապես օգտակար է, երբ ցանկանում եք ունենալ համատեղելիություն հին բրաուզերների հետ:

npx babel src --out-dir lib --plugins @babel/plugin-transform-arrow-functions

Օրինակ՝

const add = (a, b) => a + b;

Արդյունքում՝ վերափոխվում է հետևյալ կերպ՝

var add = function(a, b) {  return a + b;};

2. @babel/plugin-transform-template-literals

Այս plugin-ը փոխում է ES6-ի template literals-ը (backtick-ներով) ստանդարտ կոնկատենացիայի (string concatenation)։ Դա հարմար է, երբ անհրաժեշտ է ունենալ հին բրաուզերների հետ համատեղելիություն:

npx babel src --out-dir lib --plugins @babel/plugin-transform-template-literals

Օրինակ՝

let name = 'John';let message = `Hello, ${name}!`;

Արդյունքում՝ վերափոխվում է այսպես՝

var name = 'John';var message = 'Hello, ' + name + '!';

3. @babel/plugin-transform-classes

Այս plugin-ը փոխում է ES6 class-ները՝ սովորական ֆունկցիոնալ կոնստրուկտորների։ Սա կարևոր է հատկապես հին JavaScript միջավայրերում, որտեղ class-երը չեն աջակցվում:

npx babel src --out-dir lib --plugins @babel/plugin-transform-classes

Օրինակ՝

class Person {  constructor(name) {    this.name = name;  }}

Արդյունքում՝ վերափոխվում է այսպես՝

function Person(name) {  this.name = name;}

4. @babel/plugin-proposal-class-properties

Այս plugin-ը աջակցում է JavaScript-ում class-երի properties-ի հայտարարումը՝ առանց constructor-ի օգտագործման։ Այս բնույթը ES6-ի հետ ավելացվեց, բայց հին բրաուզերներում չի աշխատում:

npx babel src --out-dir lib --plugins @babel/plugin-proposal-class-properties

Օրինակ՝

class Car {  brand = 'Toyota';}

Արդյունքում՝ վերափոխվում է այսպես՝

function Car() {  this.brand = 'Toyota';}

5. @babel/plugin-syntax-jsx

Այս plugin-ը կարևոր է React-ի նախագծերի համար, քանի որ այն աջակցում է JSX սինթաքսիսին (JavaScript XML), որը թույլ է տալիս գրել HTML-like կոդ JavaScript-ում:

npx babel src --out-dir lib --plugins @babel/plugin-syntax-jsx

Օրինակ՝

const element = <հ1>Hello World</հ1>;

Արդյունքում՝ այն կդարձնի այսպես՝

varelement= React.createElement('h1', null, 'Hello, world!');

6. @babel/plugin-transform-regenerator

Այս plugin-ը անհրաժեշտ է, երբ աշխատում եք կոդի հետ, որը օգտագործում է Generators և async/await, և ուզում եք ապահովել հին բրաուզերների հետ համատեղելիությունը:

npxbabel src--out-dir lib --plugins@babel/plugin-transform-regenerator

Օրինակ՝

async function fetchData() {  let data = await fetch('https://api.example.com');  return data;}

Արդյունքում՝ վերափոխվում է այսպես՝

function fetchData() {  return regeneratorRuntime.async(function$$(context$1$0) {    // async function implementation here...  });}

Այսպիսով, Babel-ի plugins-ը թույլ են տալիս մեծապես ընդլայնել Babel-ի հնարավորությունները՝ աջակցելով բազմաթիվ նորագույն JavaScript ֆունկցիաներին ու գործառույթներին: Օգտագործելով այս plugin-ները՝ կարող եք ստեղծել ավելի հարմարավետ միջավայր և ապահովել բրաուզերների և JavaScript-ի տարբեր տարբերակների համատեղելիություն:

Կարող ես տեսնել Babel-ի ճրինակ իմ GitHnub-ում: