تایپاسکریپت - کتابخانههای شخص ثالث در Angular CLI که در npm نیستند

من در حال حاضر یک اپلیکیشن را از Angular 2 معمولی به Angular CLI منتقل میکنم

حالا دارم سعی میکنم بفهمم چگونه کتابخانههای شخص ثالث مانند orbitcontrols.js که در npm یا bower نیستند را به اپلیکیشنم وارد کنم.

من در https://github.com/angular/angular-cli/wiki/3rd-party-libs متوجه شدم که به نظر نمیرسد وارد کردن کتابخانههایی که توسط npm پشتیبانی میشوند، دشوار باشد.

• و دیگر کتابخانهها چگونهاند؟

• آیا اصلاً ممکن است؟

نسخهها :

angular-cli 1.0.0-beta.9

پاسخ شماره ۱

اکثراً بله، اما بستگی به استفاده کتابخانهها دارد. با این حال Angular-cli هنوز با یکپارچهسازی کتابخانههای شخص ثالث مشکل دارد. تا زمانی که آن را به درستی اصلاح کنند، میتوانم یک راهحل موقت به شما بدهم. فرض کنید میخواهید از _ در lodash در کدتان استفاده کنید. بنابراین من سناریوی کد عملی خودم را به شما نشان میدهم-

برای نصب lodash

npm install lodash --save
typings install lodash --ambient --save

قبل از آن مطمئن شوید که تایپینگها را بهصورت سراسری نصب کنید

npm install typings -g

سپس در فایل angular-cli-build.json خود، مطمئن شوید که به همین صورت باقی میماند

module.exports = function(defaults) {
  return new Angular2App(defaults, {
    vendorNpmFiles: [
      ...
      'lodash/**/*.js'
    ]
  });
};

و در فایل system-config.ts شما:

/** Map relative paths to URLs. */
 const map: any = {
   'lodash': 'vendor/lodash/lodash.js'
 };

 /** User packages configuration. */
 const packages: any = {
   'lodash': {
     format: 'cjs'
   }
 };

در فایل src/index.html خود این خط را اضافه کنید (این اصلاح عجیب است)

<script src="/vendor/lodash/lodash.js" type="text/javascript"></script>

حالا در کامپوننت خود جایی که میخواهید از lodash استفاده کنید، به این صورت بنویسید

declare var _:any;

@Component({
})
export class YourComponent {
  ngOnInit() {
     console.log(_.chunk(['a', 'b', 'c', 'd'], 2));
  }
}

برای من کار کرد :). من از کتابخانههای عظیم شخص ثالث در پروژه Angular2 خودم از طریق angular-cli استفاده کردهام. امیدوارم برای شما هم مفید باشد

ویرایش:

اگر برای کتابخانههای شخص ثالث خود هیچ npm دریافت نمیکنید، یک پوشه assets در زیر پوشه src ایجاد کنید. سپس میتوانید پوشههای جداگانه برای js، css و images اضافه کنید. فایلهای js شخص ثالث خود را داخل پوشه js قرار دهید. سپس باید فایل js را در index.html خود به این روش ارجاع دهید:

<script src="assets/js/your_js.js"></script>

حال، وقتی شما ng build یا ng serve را انجام میدهید، به طور خودکار پوشه public با assets/js شما بهروزرسانی خواهد شد. امیدوارم کل سناریو را درک کنید :)

پاسخ شماره ۲

من با orbitcontrols.js آشنا نیستم اما فرض میکنم که یک شیء سراسری است.

فایل را در دایرکتوری public قرار دهید که CLI ایجاد میکند. پیشنهاد میکنم موارد مشابه را در آنجا گروهبندی کنید، بنابراین public/js/orbitcontrols.js.

سپس میتوانید به آن فایل js در فایل index.html خود از طریق این روش ارجاع دهید:

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