خروجی‌گرفتن نهایی از برنامه برای قرارگیری روی سرور

Getting the Final Output of the Program to be Placed on the Server

در قسمت قبل پروژه خود را تکمیل کردیم و حالا نوبت به سوال مهمی می رسد. چطور از پروژه خود خروجی بگیریم؟ ما در نهایت می خواهیم برنامه خود را روی یک سرور واقعی قرار دهیم ولی از طرفی دوست نداریم تک تک این فایل ها را به صورت دستی و با تگ <script> وارد فایل index.html کنیم. این کار باعث می شود تعداد درخواست های ما بسیار بیشتر از حد معمول شود و وب سایت ما با سرعت بسیار کمی بارگذاری شود.

راه حل ما استفاده از اسکریپت های دیگر Vue-CLI است. اگر فایل package.json را باز کنید، اسکریپت های زیر را در آن خواهید دید:

  "scripts": {
    "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
    "build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
  },

همانطور که می بینید ما دو اسکریپت متفاوت داریم که تا این لحظه فقط از dev (همان npm run dev) استفاده می کردیم. npm run dev باعث می شود سرور توسعه webpack اجرا شده و قابلیت هایی مانند auto-refresh به آن اضافه شود. همچنین با اجرای این اسکریپت هیچ فایلی را دریافت نمی کردیم بلکه فایل نهایی ما در مموری سیستم بارگذاری شده و از همانجا اجرا می شد. اسکریپت بعدی و مورد نظر ما در این جلسه build است که برای گرفتن خروجی نهایی از آن استفاده می شود:

npm run build

با اجرای این کد، پوشه ای به نام Dist برایتان ایجاد می شود که درون آن دو فایل به نام های build.js و build.js.map را خواهید داشت. من در ادامه توضیحات بیشتری در مورد فایل map می دهم اما فعلا روی build.js تمرکز می کنیم. فایل build.js همان برنامه نهایی شما است و اگر آن را باز کنید چیزی به شکل زیر را می بینید (من فقط قسمتی از کد را آورده ام):

!function(t){function e(r){if(n[r])return n[r].exports;var o=n[r]={i:r,l:!1,exports:{}};return t[r].call(o.exports,o,o.exports,e),o.l=!0,o.exports}var n={};e.m=t,e.c=n,e.d=function(t,n,r){e.o(t,n)||Object.defineProperty(t,n,{configurable:!1,enumerable:!0,get:r})},e.n=function(t){var n=t&&t.__esModule?function(){return t.default}:function(){return t};return e.d(n,"a",n),n},e.o=function(t,e){return Object.prototype.hasOwnProperty.............

همانطور که می بینید کدها بسیار بهم ریخته هستند. به این عملیات، minification یا کوچک سازی کدها می گویند که باعث می شود کد شما بسیار کوچک تر شده و حجم کمتری پیدا کند. خوشبختانه ما در این دوره از Vue-CLI استفاده کردیم بنابراین این فایل به صورت خودکار و آماده برای ما تولید شده است تا در فایل HTML قرار گرفته و اجرا شود. این عملیات انواع و اقسام موارد اضافی (مانند خطاها و هشدارهای Vue.js یا کامنت های موجود یا هر چیزی که در محیط production غیر ضروری باشد) را حذف می کند تا برنامه به کوچکترین حالت ممکن تبدیل شود.

شما می توانید از انواع و اقسام سرویس های میزبانی وب برای میزبانی برنامه خود استفاده کنید اما چند مسئله مهمی وجود دارند. اولا اگر می خواهید فایل dist را روی سیستم خود و به صورت محلی ببینید، باید از سرور خاص node.js استفاده کنید. احتمالا می گویید مگر فایل index.html چنین کدی را در خود ندارد؟

  <body>
    <div id="app">
    </div>
    <script src="/dist/build.js"></script>
  </body>

بله این فایل، کد نهایی ما در پوشه dist را لینک کرده است اما اگر یادتان باشد برنامه ما SPA (همان single page application) است و من در قسمت routing توضیح دادم که باید سرور طوری تنظیم شود که تمام درخواست ها به فایل index.html برسد. مشکل این است که اگر فایل index.html را بدون سرور و به صورت عادی در مرورگر باز کنید از پروتکل //:FILE (که برای باز کردن فایل ها می باشد) استفاده خواهید کرد و این پروتکل دستورات را به index.html نمی فرستد. همچنین حتی اگر در تنظیمات فایل vue.config.js خصوصیت publicPatch را مشخص کنید باز هم به مشکل می خوریم. چرا؟ به دلیل اینکه PublicPath در برنامه های MPA یا برنامه هایی که مانند برنامه ما در Vue-router از mode هیستوری (history) استفاده می کنند، کار نمی کند. یکی از سرور های node.js که به مشکل ما را حل می کند، سروری به نام serve است:

https://github.com/zeit/serve

برای کار با این سرور باید ابتدا دستور زیر را در ترمینال خود اجرا کنید:

npm install -g serve

با این کار، سرور Serve را به صورت سراسری نصب خواهیم کرد. سپس فایل index.html و پوشه dist را از پروژه خود انتخاب کرده و در یک پوشه جدید کپی کنید. این کار را می کنیم تا فایل index.html و پوشه dist با هم در یک پوشه جداگانه باشند (من نام پوشه را vuejs گذاشته ام). حالا ترمینال را در آدرس پوشه vuejs (یا هر نامی که برای پوشه خود انتخاب کرده اید) باز کرده و دستور زیر را اجرا می کنم:

serve -s

s- برای سرور Serve مشخص می کند که برنامه ما SPA است. حالا فایل build.js که فایل نهایی پروژه است برای شما اجرا می شود. پس از اجرای این دستور ترمینال پیام زیر را به شما می دهد:

   Serving!                                    
                                                
   - Local:            http://localhost:5000    
   - On Your Network:  http://175.4.5.61:5000

شما مسیر http://localhost:5000 را در مرورگر خود کپی کنید تا برنامه را ببینید.

در ضمن فایل vue.config.js فایلی است که تنظیمات پیکربندی را از شما قبول می کند. این تنظیمات همان تنظیماتی بود که در پروژه های Webpack در فایل webpack.config.js انجام می دادیم. اگر با فضای webpack آشنایی ندارید و دوست دارید در مورد آن بیشتر بدانید به دوره آموزش Webpack روکسو ما مراجعه کنید.

در آخر در مورد فایل build.js.map باید بگویم که این فایل به شما اجازه می دهد که به سورس کد اولیه سایت خود دسترسی داشته باشید. برای این کار پس از باز شدن مرورگر از devtools (کلید f12) به سربرگ source می رویم. سپس در آنجا قسمتی به نام webpack را مشاهده می کنید که فایل های شما را قبل از کامپایل شدن و به صورت minify نشده در اختیارتان می گذارد تا بتوانید آن ها را در مرورگر Debug کنید:

نکته مهم: این فایل بسیار حجیم است و فقط برای Debug کردن در مرورگر استفاده می شود. هنگامی که برنامه خود را روی یک سرور می گذارید هیچ وقت این فایل را با build.js قرار ندهید. فایل نهایی شما روی سرور باید فقط و فقط index.html و پوشه dist (تنها با فایل build.js و نه build.js.map) باشد. همچنین یادتان باشد که به جلسه routing سر بزنید و از کدهایی که برای redirect کردن درخواست ها به فایل index.html آورده بودم، استفاده کنید.

اگر بعضی از مفاهیم این جلسه برایتان نامفهوم بود نگران نباشید. در یکی از فصل های پیوست که در ادامه می آید، در مورد قابلیت های جدید Vuel-CLI (نسخه 3) صحبت خواهیم کرد.

office 2019 lizenz kaufen