ورود / ثبت نام
0
0

استفاده از jspm در ویژوال استودیو ۲۰۱۵ و ASP.Net 5

264 بازدید
jspm

اگر از آن دسته افرادی باشید که ابزارهای جدید ASP.Net vNext و ویژوال استودیو ۲۰۱۵  را دنبال می کنید، احتمالا ابزارهای جاوا اسکریپت را در منوی file -> New project دیده اید که دو گزینه Grunt و Bower می باشد. اما اگر بخواهید از ابزارهای پیچیده تری مانند Gulp یا jspm استفاده کنید چه کار باید کرد؟ در این مقاله، به جای Bower تنظیمات را با jspm دریافت می کنیم و چند کد ES6 با CTP5 ویژوال استودیو ۲۰۱۵  می نویسیم.

Jspm

معرفی مختصر: jspm مدیریت پکیج را با زیرساخت بارگذاری ماژول و transpiler ترکیب می کند تا تجربه بهتری داشته باشید.  می توانید از هر سیستم ماژولی مانند ES6، AMD یا CommonJs استفاده کنید. Jspm همه چیز را حل می کند. با ترکیب مدیریت پکیج با یک script loader هوشمند، jspm کار ما را راحت تر می کند.

گام اول: شروع کار

در ویژوال استودیو ۲۰۱۵ با انتخاب File -> New project و انتخاب ASP.Net Web Application و سپس ASP.Net 5 Empty یک پروژه با کمترین ویژگی ها ایجاد می کنیم. با ASP vNext پروژه ایجادشده مانند شکل زیر خواهد بود:

jspm

توجه داشته باشید که فولدر wwwroot یکی از امکانات اضافه شده در ASP5 است. این فولدر، فولدر پیش فرض برای asset های استاتیک مانند CSS و فایل های JS است و به طور ضمنی همان ریشه وب سایت است. می توانیم یک default.html جدید برای صفحه ورود اپلیکیشن در wwwroot بسازیم.

<html>

<head>

    <meta charset="utf-8" />

    <title> jspmکار با</title>

</head>

<body>

    <div id="output">www.mspsoft.ir</div>

</body>

</html>

با استفاده از Ctrl+F5 می توانید اپلیکیشن را اجرا کنید، اما باید /default.html را به آدرس اضافه نماییم درغیر اینصورت بدون اعمال این تنظیمات اضافی نمی تواند فایل default را پیدا کند. (در همین مقاله تنظیم default.html به عنوان پیش فرض را آموزش خواهیم داد)

 

گام دوم: دریافت jspm

اگر NodeJs را داشته باشید و همچنین یک کامند لاین Git client نصب داشته باشید، تنظیمات  jspm بسیار ساده خواهد بود:

npm install –g jspm
jspm init

شما می خواهید jspm init را از فولدر ریشه پروژه اجرا کنید که یک level بالاتر از فولدر wwwroot قرار دارد. دستور init یک سری سوال برای تنظیم فایل project.json می پرسد(بله، همان project.json ای که npm از آن استفاده می کند، برخلاف Bower که فایل json مخصوص به خود را می سازد). در طول این پرسش ها می توانید ES6 transpiler را برای استفاده انتخاب کنید. همانطور که در شکل زیر مشاهده می کنید، ما ۶to5 transpiler را انتخاب کرده ایم اما توجه داشته باشید که نام ۶to5 به Babel تغییر کرده است. شکل زیر این پرسش و پاسخ را نشان می دهد:

Package.json file does not exist, create it? [yes]:

Would you like jspm to prefix the jspm package.json properties under jspm? [yes]:

Enter server baseURL (public folder path) [./]: ./wwwroot

Enter project code folder [wwwroot\]:

Enter jspm packages folder [wwwroot\jspm_packages]:

Enter config file path [wwwroot\config.js]:

Configuration file wwwroot\config.js doesn't exist, create it? [yes]:

Enter client baseURL (public folder URL) [/]:

Which ES6 transpiler would you like to use, Traceur or 6to5? [traceur]: 6to5

ok   Verified package.json at package.json

Verified config file at wwwroot\config.js

Looking up loader files...

system.js

system.src.js

system.js.map

es6-module-loader.js

es6-module-loader.src.js

es6-module-loader.js.map

۶to5.js

۶to5-runtime.js

۶to5-polyfill.js

Using loader versions:

es6-module-loader@0.13.1

systemjs@0.13.2

۶to5@3.5.3

ok   Loader files downloaded successfully

 

ما می خواهیم jspm با یک فایل package.json در فولدر ریشه پروژه کار کند، اما پکیج های دانلود شده و تنظیمات مربوط به آن مهم ترین قسمت این پاسخ ها، پاسخ به public folder path (مسیر فولدر عمومی) است که ./wwwroot می باشد. در فولدر wwwroot قرار دارد. این یکی از راه های کار با jspm است و مطمئناً تنها راه ممکن نیست.

گام سوم: نوشتن اسکریپت

فایل default.html را آپدیت می کنیم تا در System.js آورده شود، module loader داینامیک توسط jspm نصب شده و فایل config آن نیز به وسیله jspm ایجاد شده است که برای loader مشخص می کند که درخواست ها را برای ماژول و کتابخانه های مشخص شده، کجا قرار دهد. تگ های درون تگ body به شکل زیر خواهد بود:

<div id="output">Testing</div>

 

<script src="jspm_packages/system.js"></script>

<script src="config.js"></script>

<script>System.import("app/main");</script>

jspm

حال اگر مرورگر را refresh کنیم، خطاهایی را مشاهده می کنیم که پیغام آن به این صورت است که app/main.js نمی تواند بارگذاری شود. در کد بالا System.Import را درخواست کرده ایم که این نحوه نگارش (syntax) باید برای کسانی که از AMD یا CommonJs استفاده می کنند، آشنا باشد. فایل گفته شده نمی تواند بارگذاری شود چرا که این فایل وجود ندارد، بنابراین فایل main.js را در فولدر app زیرشاخه wwwroot می سازیم.

var element = document.getElementById("output");

element.innerText = " main.js بعد از اضافه کردن ";

 

export default element => {

    element.innerText = " greeting استفاده از ماژول ";

};

حالا main.js را طوری تغییر می دهیم که بتواند از کامپوننت جدید greeting استفاده کند.

import greeter from "./greeting";

 

greeter(document.getElementById("output"));

این نحوه نگارش import/export که در کدهای بالا مشاهده می کنیم، نحوه نگارش جدید در ماژول ES6 است. با وجود

System.js تمام این کدها، شامل ماژول های ES6 و arrow function هستند.

jspm

گام چهارم: نصب چند پکیج

جذابیت jspm این است که می توانیم به راحتی به حالت کامندلاین رفته و پکیج های جدیدی مانند moment.js نصب کنیم:

jspm install moment

Updating registry cache...

Looking up github:moment/moment

Downloading github:moment/moment@2.9.0

ok   Installed moment as github:moment/moment@^2.9.0 (2.9.0)

ok   Install tree has no forks.

ok   Install complete.

 

این کار به همان سادگی نصب پکیج با استفاده از Bower است، اما با jspm پکیج به سرعت قابل استفاده است. حالا greeting.js

را طوری تغییر می دهیم که بتواند از moment استفاده کند.

import moment from "moment";

 

export default element => {

 

    let pleasantry = "Hello!";

    let timeLeft = moment().startOf("hour").fromNow();

 

    element.innerText = `${pleasantry} The hour started ${timeLeft}`;

};

حالا خروجی برنامه به شکل زیر است:

jspm

گام پنجم: تنظیم default.html به عنوان صفحه پیش فرض

در ASP.Net 5 فایل web.config وجود ندارد، اما تغییر رفتار فایل های استاتیک همچنان نسبتا ساده است. قدم اول نصب NuGet

package برای پردازش فایل استاتیک است (فایل های Microsoft.AspNet.static)  و سپس اضافه کردن کدهای زیر به

Startup.cs:

public class Startup

{

    public void Configure(IApplicationBuilder app)

    {

        app.UseFileServer(new FileServerOptions

        {

             EnableDefaultFiles = true,

             EnableDirectoryBrowsing = true,                   

        });            

    }

}

همانطور که مشاهده می کنید، EnableDefaultFiles صفحه موردنظر ما را در ریشه وب سایت ظاهر می کند، زیرا کنترل کننده (handler) فایل استاتیک در هر درخواست به دنبال فایل default.html می گردد.

گام ششم: نکات

با اینکه آنچه اینجا به شما نشان داده شد به خوبی کار می کرد، بزرگترین مشکل استفاده از ECMAScript 6 با ویژوال استودیو ۲۰۱۵  ادیتور یا ویرایشگر می باشد که نحوه نگارش در آن مانند ES6 نیست. می توانید به طور دستی از یک ویرایشگر دیگر استفاده کنید تا از خط های قرمزی که به عنوان مثال زیر کلمات کلیدی import و export کشیده می شود، جلوگیری کنید.

  • پسورد: www.mspsoft.com
آیا این مطلب را می پسندید؟
https://www.mspsoft.com/?p=16226
اشتراک گذاری:
واتساپتوییترفیسبوکپینترستلینکدین
داریوش فرخی
داریوش فرخی هستم از سال 92 شروع به یادگیری برنامه نویسی و از سال 93 در بخش برنامه نویسی و تولید محتوای سایت mspsoft.com مشغول هستم. فعالیتم نیز بیشتر در زمینه های برنامه نویسی با سی شارپ و asp.net بوده است. اوقات فراغتم را هم غالبا با تماشای فیلم یا بازی های کامپیوتری پر میکنم .
مطالب بیشتر
برچسب ها:

نظرات

0 نظر در مورد استفاده از jspm در ویژوال استودیو ۲۰۱۵ و ASP.Net 5

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

هیچ دیدگاهی نوشته نشده است.