ToCode | סביבת העבודה

סביבת העבודה

רוב הסיכויים שסביבת העבודה הקיימת שלכם תעבוד טוב גם לפיתוח ES6. כל הדוגמאות שנראה בקורס ממילא עובדות כמו שהן על דפדפנים מודרניים. יחד עם זאת לפעמים נרצה להתאים את הקוד לדפדפנים ישנים יותר ובשביל זה יש לנו שני כלים חשובים: Webpack ו Babel. בנוסף שווה לוודא שכלי הפיתוח שלכם עובדים טוב עם המילים החדשות של ES6 ואם לא לנסות כלים חדשים.

1. לפני הכל - עורך הטקסט

עורך הטקסט Visual Studio Code מבית Microsoft הוא כלי מצוין לפיתוח Web. הכלי תומך תמיכה מלאה בכתיב ES6 וכולל השלמות אוטומטיות ועוד מגוון תוספים. אפשר להוריד אותו בחינם מהקישור: https://code.visualstudio.com

אני אראה את כל הדוגמאות בקורס עם כלי זה. כמובן שאתם יכולים לעבוד עם כל עורך טקסט או כלי פיתוח אחרים שאתם רגילים אליהם אם אתם מעדיפים.

2. התקנה והפעלת Webpack

כדי להשתמש ב webpack תצטרכו להתקין את הכלי node.js מהקישור: https://nodejs.org/en/download/

לאחר ההתקנה נוכל לפתוח את מסך שורת הפקודה בחלונות, להיכנס לתיקיה ריקה כדי ליצור פרויקט ולכתוב שם:

$ npm init -y
$ npm i webpack --save-dev
$ npm i webpack-cli --save-dev
$ npm i babel-core babel-loader babel-preset-env --save-dev

לאחר מכן ניצור בתוך תיקיית הפרויקט החדשה תת תיקיה בשם src ובתוכה את הקובץ index.js עם התוכן הבא:

class Person {
  hello() {
    console.log('Hello World!');
  }
}

const p = new Person();
p.hello();

לסיום ניצור בתיקיית הפרויקט קובץ בשם webpack.config.js עם התוכן הבא:

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      }
    ]
  }
};

ולידו קובץ בשם index.html עם התוכן הבא:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Index</title>
  </head>
  <body>
    <script src='dist/main.js'></script>
  </body>
</html>

זהו, אנחנו מוכנים. עברו לחלון שורת הפקודה וכתבו שם:

npx webpack --mode development

בתגובה webpack ייצר עבורכם קובץ בשם main.js. קובץ זה מכיל את כל הקוד שלכם מתורגם ל ES5 ומותאם לרוץ גם על דפדפנים ישנים. בשיעורים הבאים נלמד איך להשתמש ב Webpack כדי לחבר מספר קבצים יחד לקובץ אחד כך שלא נצטרך לציין את כל קבצי הפרויקט ב HTML.

3. לסיכום

קישור להתקנת Visual Studio Code:

https://code.visualstudio.com

קישור להתקנת node.js:

https://nodejs.org/en/download/

לאחר התקנת node.js יש לפתוח את כלי שורת הפקודה ולוודא שמותקן באמצעות הפקודה:

$ node --version

לאחר שהתקנתם והצלחתם לראות את הגירסא המותקנת יש להריץ מתוך תיקיית הפרויקט:

$ npm init -y
$ npm i webpack --save-dev
$ npm i webpack-cli --save-dev
$ npm i babel-core babel-loader babel-preset-env --save-dev

הקובץ webpack.config.js יכיל את התוכן הבא:

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      }
    ]
  }
};

תוכן קבצי המקור שהוצגו בסרטון זמין במלואו בטאב טקסט.