javascript - কৌণিক 2+টাইপ স্ক্রিপ্ট অ্যাপ্লিকেশনে লোডাশ আমদানি করা হচ্ছে




angular typescript (16)

লড্যাশ মডিউলগুলি আমদানি করার জন্য আমার বেশ কষ্ট হচ্ছে। আমি এনপিএম + গল্প ব্যবহার করে আমার প্রকল্পটি সেটআপ করেছি এবং একই প্রাচীরটি আঘাত করে চলেছি। আমি নিয়মিত লোডাশ চেষ্টা করেছি, তবে লোডাশ-এসও করেছি।

লড্যাশ এনপিএম প্যাকেজ: (প্যাকেজ রুট ফোল্ডারে একটি index.js ফাইল রয়েছে)

import * as _ from 'lodash';    

ফলাফল স্বরূপ:

error TS2307: Cannot find module 'lodash'.

লোডা-এস এনপিএম প্যাকেজ: (প্যাকেজ রুট ফোল্ডারে লড্যাশ.জেএসএসে একটি ডিফল্ট রফতানি রয়েছে)

import * as _ from 'lodash-es/lodash';

ফলাফল স্বরূপ:

error TS2307: Cannot find module 'lodash-es'.   

গুল্প টাস্ক এবং ওয়েবস্টর্ম উভয়ই একই সমস্যাটির প্রতিবেদন করে।

মজার বিষয়, এটি কোনও ত্রুটি দেয় না:

import 'lodash-es/lodash';

... তবে অবশ্যই "_" নেই ...

আমার tsconfig.json ফাইল:

{
  "compilerOptions": {
    "target": "es5",
    "module": "system",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false
  },
  "exclude": [
    "node_modules"
  ]
}

আমার gulpfile.js:

var gulp = require('gulp'),
    ts = require('gulp-typescript'),
    uglify = require('gulp-uglify'),
    sourcemaps = require('gulp-sourcemaps'),
    tsPath = 'app/**/*.ts';

gulp.task('ts', function () {
    var tscConfig = require('./tsconfig.json');

    gulp.src([tsPath])
        .pipe(sourcemaps.init())
        .pipe(ts(tscConfig.compilerOptions))
        .pipe(sourcemaps.write('./../js'));
});

gulp.task('watch', function() {
    gulp.watch([tsPath], ['ts']);
});

gulp.task('default', ['ts', 'watch']);

আমি যদি সঠিকভাবে বুঝতে পারি তবে আমার tsconfig এর মডিউল'র সমাধান: 'নোড'-এ আমদানি বিবৃতিগুলি নোড_মডিউলগুলি ফোল্ডারে দেখানো উচিত, যেখানে লোডাশ এবং লড্যাশ-এস ইনস্টল করা আছে। আমি আমদানি করার বিভিন্ন উপায়ও চেষ্টা করেছি: নিরঙ্কুশ পাথ, আপেক্ষিক পাথ, তবে কিছুই কাজ করছে বলে মনে হয় না। কোন ধারনা?

প্রয়োজনে আমি সমস্যাটি বর্ণনা করার জন্য একটি ছোট জিপ ফাইল সরবরাহ করতে পারি।


আগেরটা আগে

npm install --save lodash

npm install -D @types/lodash

সম্পূর্ণ লোডাশ লাইব্রেরি লোড করুন

//some_module_file.ts
// Load the full library...
import * as _ from 'lodash' 
// work with whatever lodash functions we want
_.debounce(...) // this is typesafe (as expected)

বা কেবলমাত্র ফাংশনগুলি লোড করুন যার সাথে আমরা কাজ করতে যাচ্ছি

import * as debounce from 'lodash/debounce'
//work with the debounce function directly
debounce(...)   // this too is typesafe (as expected)

UPDATE - March 2017

আমি বর্তমানে lodash ES6 modules নিয়ে কাজ করছি এবং সম্প্রতি আমি lodash মতো কাজ করতে সক্ষম lodash :

// the-module.js (IT SHOULD WORK WITH TYPESCRIPT - .ts AS WELL) 
// Load the full library...
import _ from 'lodash' 
// work with whatever lodash functions we want
_.debounce(...) // this is typesafe (as expected)
...

বা নির্দিষ্ট lodash functionality import :

import debounce from 'lodash/debounce'
//work with the debounce function directly
debounce(...)   // this too is typesafe (as expected)
...

দ্রষ্টব্য - * as পার্থক্য নেই তেমন প্রয়োজন

তথ্যসূত্র:

শুভকামনা


  1. লড্যাশ ইনস্টল করুন

sudo npm install typings --global npm install lodash --save typings install lodash --ambient --save

  1. ইনডেক্স.ইচটিএমএলে লোডাশের জন্য মানচিত্র যুক্ত করুন:

System.config({ packages: { app: { format: 'register', defaultExtension: 'js' } }, map: { lodash: 'node_modules/lodash/index.js' } });

  1. .Ts কোড আমদানি লড্যাশ মডিউল

import _ from 'lodash';


আমার ঠিক একই সমস্যা ছিল, তবে একটি কৌণিক 2 অ্যাপ্লিকেশনটিতে এবং এই নিবন্ধটি কেবল এটিকে সমাধান করেছে: https://medium.com/@s_eschweiler/using-external-libraries-with-angular-2-87e06db8e5d1#.p6gra5eli using-external-libraries-with-angular-2-87e06db8e5d1#.p6gra5eli

নিবন্ধের সংক্ষিপ্তসার:

  1. লাইব্রেরী npm install lodash --save
  2. লোডাস টিএসডি tsd install underscore জন্য টাইপস্ক্রিপ্ট সংজ্ঞা যুক্ত করুন
  3. স্ক্রিপ্ট <script src="node_modules/lodash/index.js"></script>
  4. সিস্টেমজেএস System.config({ paths: { lodash: './node_modules/lodash/index.js' কনফিগার করছে System.config({ paths: { lodash: './node_modules/lodash/index.js'
  5. import * as _ from 'lodash'; মডিউল import * as _ from 'lodash';

আমি আশা করি এটি আপনার ক্ষেত্রেও কার্যকর হতে পারে


আমি preboot/angular-webpack ব্যবহার করে কৌণিক 4.0.0 এ আছি এবং কিছুটা আলাদা রুট যেতে হয়েছিল।

@ টেটে প্রদত্ত সমাধানটি বেশিরভাগ ক্ষেত্রে আমার পক্ষে কাজ করেছিল:

npm install --save lodash
npm install --save @types/lodash

এবং একটি প্রদত্ত। কম্পোনেন্ট.সেট ফাইলগুলিতে ফাংশনগুলি আমদানি করে:

import * as _ from "lodash";

এটি কোনও "ডিফল্ট" রফতানি শ্রেণি নেই বলে কাজ করে। আমার তফাতটি আমার তৃতীয় পক্ষের লাইব্রেরিতে লোড করার জন্য যেভাবে সরবরাহ করা হয়েছিল তা খুঁজে পাওয়ার দরকার ছিল: বিক্রেতার ডটকম যা এখানে বসেছিল:

src/vendor.ts

আমার vendor.ts ফাইলটি এখন দেখতে এ জাতীয় দেখাচ্ছে:

import '@angular/platform-browser';
import '@angular/platform-browser-dynamic';
import '@angular/core';
import '@angular/common';
import '@angular/http';
import '@angular/router';

import 'rxjs';
import 'lodash';

// Other vendors for example jQuery, Lodash or Bootstrap
// You can import js, ts, css, sass, ...

আমি ওয়েবপ্যাক দিয়ে এনজি 2 ব্যবহার করছি, সিস্টেম জেএস নয়। আমার জন্য প্রয়োজনীয় পদক্ষেপগুলি ছিল:

npm install underscore --save
typings install dt~underscore --global --save

এবং তারপরে ফাইলটিতে আমি আন্ডারস্কোরটি আমদানি করতে চাই:

import * as _ from 'underscore';

আমি নিম্নলিখিত কমান্ড সহ সফলভাবে আমার প্রকল্পে লোডাশ আমদানি করেছি:

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

তারপরে আমি এটি নিম্নলিখিত উপায়ে আমদানি করেছি:

import * as _ from 'lodash';

এবং systemjs.config.js এ আমি এটি সংজ্ঞায়িত করেছি:

map: { 'lodash' : 'node_modules/lodash/lodash.js' }


চেষ্টা করুন >> tsd install lodash --save করুন


টাইপসক্রিপ্ট ২.০ হিসাবে এটি কীভাবে করা যায় তা এখানে রয়েছে: (টিএসডি এবং টাইপগুলি নীচের পক্ষে স্বীকৃত হচ্ছে):

$ npm install --save lodash

# This is the new bit here: 
$ npm install --save-dev @types/lodash

তারপরে, আপনার .ts ফাইলে:

উভয় ক্ষেত্রেই:

import * as _ from "lodash";

অথবা (@ নাটিকের পরামর্শ অনুসারে):

import _ from "lodash";

পার্থক্য কী তা আমি ইতিবাচক নই। আমরা প্রথম সিনট্যাক্সটি ব্যবহার এবং পছন্দ করি। তবে কিছু রিপোর্ট করেছেন যে প্রথম সিনট্যাক্সটি তাদের পক্ষে কাজ করে না, এবং অন্য কেউ মন্তব্য করেছেন যে উত্তরোত্তর বাক্য গঠনটি অলস লোডযুক্ত ওয়েবপ্যাক মডিউলগুলির সাথে সঙ্গতিপূর্ণ নয়। YMMV।

ফেব্রুয়ারী 27, 2017 এ সম্পাদনা করুন:

নীচে @ কোয়ের্ট অনুসারে, import * as _ from "lodash"; টাইপস্ক্রিপ্ট ২.২.১, লোডাশ ৪.১17.৪, এবং @ প্রকার / লড্যাশ ৪.১৪.৫৩ হিসাবে একমাত্র কার্যকারী বাক্য গঠন। তিনি বলেছেন যে অন্যান্য প্রস্তাবিত আমদানি সিনট্যাক্স ত্রুটিটি দেয় "কোনও ডিফল্ট রফতানি নেই"।


পদক্ষেপ 1: নির্ভরতাগুলিতে লড্যাশ অন্তর্ভুক্ত করতে প্যাকেজ.জসন ফাইলটি পরিবর্তন করুন।

  "dependencies": {
"@angular/common":  "2.0.0-rc.1",
"@angular/compiler":  "2.0.0-rc.1",
"@angular/core":  "2.0.0-rc.1",
"@angular/http":  "2.0.0-rc.1",
"@angular/platform-browser":  "2.0.0-rc.1",
"@angular/platform-browser-dynamic":  "2.0.0-rc.1",
"@angular/router":  "2.0.0-rc.1",
"@angular/router-deprecated":  "2.0.0-rc.1",
"@angular/upgrade":  "2.0.0-rc.1",
"systemjs": "0.19.27",
"es6-shim": "^0.35.0",
"reflect-metadata": "^0.1.3",
"rxjs": "5.0.0-beta.6",
"zone.js": "^0.6.12",
"lodash":"^4.12.0",
"angular2-in-memory-web-api": "0.0.7",
"bootstrap": "^3.3.6"  }

পদক্ষেপ 2: আমি আমার কৌনিক 2 অ্যাপ্লিকেশনটিতে সিস্টেমজেএস মডিউল লোডার ব্যবহার করছি। সুতরাং আমি লোডাশ ম্যাপে systemjs.config.js ফাইলটি পরিবর্তন করব।

(function(global) {

// map tells the System loader where to look for things
var map = {
    'app':                        'app', // 'dist',
    'rxjs':                       'node_modules/rxjs',
    'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api',
    '@angular':                   'node_modules/@angular',
    'lodash':                    'node_modules/lodash'
};

// packages tells the System loader how to load when no filename and/or no extension
var packages = {
    'app':                        { main: 'main.js',  defaultExtension: 'js' },
    'rxjs':                       { defaultExtension: 'js' },
    'angular2-in-memory-web-api': { defaultExtension: 'js' },
    'lodash':                    {main:'index.js', defaultExtension:'js'}
};

var packageNames = [
    '@angular/common',
    '@angular/compiler',
    '@angular/core',
    '@angular/http',
    '@angular/platform-browser',
    '@angular/platform-browser-dynamic',
    '@angular/router',
    '@angular/router-deprecated',
    '@angular/testing',
    '@angular/upgrade',
];

// add package entries for angular packages in the form '@angular/common': { main: 'index.js', defaultExtension: 'js' }
packageNames.forEach(function(pkgName) {
    packages[pkgName] = { main: 'index.js', defaultExtension: 'js' };
});

var config = {
    map: map,
    packages: packages
}

// filterSystemConfig - index.html's chance to modify config before we register it.
if (global.filterSystemConfig) { global.filterSystemConfig(config); }

System.config(config);})(this);

পদক্ষেপ 3: এখন এনপিএম ইনস্টল করুন

পদক্ষেপ 4: আপনার ফাইলে লোডাশ ব্যবহার করা।

import * as _ from 'lodash';
let firstIndexOfElement=_.findIndex(array,criteria);

প্রকারভেদ ২.০, @ টাইপগুলি এনএমপি মডিউলগুলি টাইপগুলি আমদানি করতে ব্যবহৃত হয়।

# Implementation package (required to run)
$ npm install --save lodash

# Typescript Description
$ npm install --save @types/lodash 

এখন যেহেতু এই প্রশ্নের উত্তর দেওয়া হয়েছে আমি কীভাবে দক্ষতার সাথে লোডাস আমদানি করব তা নিয়ে যাব

পুরো লাইব্রেরি আমদানির ব্যর্থ সাফ উপায় (মূল.টায়)

import 'lodash';

এটি এখানে নতুন বিট:

আপনার প্রয়োজনীয় ফাংশনগুলি নিয়ে একটি হালকা লোডাশ প্রয়োগ করা

import chain from "lodash/chain";
import value from "lodash/value";
import map from "lodash/map";
import mixin from "lodash/mixin";
import _ from "lodash/wrapperLodash";

সূত্র: https://medium.com/making-internets/why-using-chain-is-a-mistake-9bc1f80d51ba#.kg6azugbd

PS: উপরের নিবন্ধটি বিল্ড সময় উন্নত করা এবং অ্যাপের আকার হ্রাস করার জন্য একটি আকর্ষণীয় পঠন read


যদি পরে কাজ না

$ npm install lodash --save 
$ npm install --save-dev @types/lodash

আপনি এটি চেষ্টা করুন এবং লোডাশ আমদানি করুন

typings install lodash --save

সমস্ত টার্মিনাল মাধ্যমে ইনস্টল করুন:

npm install lodash --save
tsd install lodash --save

Index.html এ পাথ যুক্ত করুন

<script>
    System.config({
        packages: {
            app: {
                format: 'register',
                defaultExtension: 'js'
            }
        },
        paths: {
            lodash: './node_modules/lodash/lodash.js'
        }
    });
    System.import('app/init').then(null, console.error.bind(console));
</script>

.Ts ফাইলের শীর্ষে লোডাশ আমদানি করুন

import * as _ from 'lodash'


npm মাধ্যমে ইনস্টল করুন।

$ npm install lodash --save

এখন, ফাইলটিতে import করুন:

$ import * as _ from 'lodash';

ENV:

কৌণিক সিএলআই: 1.6.6
নোড: 6.11.2
ওএস: ডারউইন এক্স 64
কৌণিক: 5.2.2
প্রকারলিপি: ২.৪.২
ওয়েবপ্যাক: 3.10.0


26 সেপ্টেম্বর, 2016 আপডেট করুন:

@ টাইটয়ের উত্তর যেমনটি বলেছে, কয়েক মাস আগে আমরা ব্যবহৃত 'টাইপিং' ইনস্টলেশনগুলির পরিবর্তে আমরা এখন ব্যবহার করতে পারি:

npm install --save @types/lodash

উত্তরটি সমর্থন করে কিছু অতিরিক্ত রেফারেন্স এখানে দেওয়া হয়েছে:

যদি এখনও টাইপিং ইনস্টলেশন ব্যবহার করে থাকেন তবে '' '-' ফলস্বরূপ '' 'এবং' '' - - গ্লোবাল '' 'সম্পর্কিত নীচে (অন্যদের দ্বারা) মন্তব্য দেখুন।

এছাড়াও, নতুন কুইক স্টার্টে কনফিগারেশন আর ইনডেক্স html এ নেই; এটি এখন systemjs.config.ts (যদি সিস্টেমজেএস ব্যবহার করে থাকে)।

আসল উত্তর:

এটি আমার ম্যাকটিতে কাজ করেছে ( কুইক স্টার্ট অনুসারে কৌনিক 2 ইনস্টল করার পরে):

sudo npm install typings --global
npm install lodash --save 
typings install lodash --ambient --save

আপনি বিভিন্ন ফাইল প্রভাবিত দেখতে পাবেন, যেমন

  • /typings/main.d.ts
  • /typings.json
  • /package.json

কৌণিক 2 কুইকস্টার্টটি System.js ব্যবহার করে, তাই আমি সূচক html এর কনফিগারেশনে 'মানচিত্র' যুক্ত করেছি:

System.config({
    packages: {
      app: {
        format: 'register',
        defaultExtension: 'js'
      }
    },
    map: {
      lodash: 'node_modules/lodash/lodash.js'
    }
  });

তারপরে আমার .ts কোডে আমি সক্ষম হয়েছি:

import _ from 'lodash';

console.log('lodash version:', _.VERSION);

২০১ 2016 সালের মাঝামাঝি থেকে সম্পাদনাগুলি:

@Tibbus যেমন উল্লেখ করেছে, কিছু প্রসঙ্গে, আপনার প্রয়োজন:

import * as _ from 'lodash';

যদি angular2-seed থেকে শুরু হয় এবং আপনি যদি প্রতিবার আমদানি করতে না চান তবে আপনি মানচিত্রটি এড়িয়ে চলতে পারেন এবং পদক্ষেপগুলি আমদানি করতে পারেন এবং সরঞ্জাম / কনফিগারেশন / প্রকল্পের কনফিগ.সগুলিতে লোড্যাশ লাইনটিকে কেবল অসুবিধে করতে পারেন।

লড্যাশের সাথে আমার পরীক্ষাগুলি কাজ করার জন্য, আমাকে কার্মা.কমফ.জেজে ফাইল অ্যারেটিতে একটি লাইনও যুক্ত করতে হয়েছিল:

'node_modules/lodash/lodash.js',

লোডাশ থেকে আংশিক আমদানি নিম্নলিখিত স্বরলিপি ব্যবহার করে কৌণিক 4.1.x এ কাজ করা উচিত:

let assign = require('lodash/assign');

অথবা 'লোডাশ-এস' ব্যবহার করুন এবং মডিউলটিতে আমদানি করুন:

import { assign } from 'lodash-es';




es6-module-loader