ES6 তে এনপিএম-তে লিখিত একটি মডিউল কীভাবে প্রকাশ করবেন?

144

আমি এনপিএম-তে একটি মডিউল প্রকাশ করতে চলেছিলাম, যখন আমি ES6 এ এটি পুনর্লিখনের বিষয়ে ভাবলাম, ভবিষ্যতের প্রুফ উভয়ই, এবং ES6 শিখি। আমি বাবেলকে ইএস 5 এ স্থানান্তর করতে এবং পরীক্ষা চালাতে ব্যবহার করেছি। তবে আমি কীভাবে এগিয়ে যাব তা নিশ্চিত নই:

  1. আমি কি এনপিএম-এ স্থানান্তরিত এবং ফলাফল / আউট ফোল্ডারটি প্রকাশ করব?
  2. আমি কি আমার গিতুব রেপোতে ফলাফল ফোল্ডারটি অন্তর্ভুক্ত করব?
  3. অথবা আমি 2 টি রেপো বজায় রাখি, একটি গিথুবের জন্য ES6 কোড + গুল্প স্ক্রিপ্ট সহ, এবং একটি এনপিএম-এর ট্রান্সপ্লেরড ফলাফল + পরীক্ষা সহ?

সংক্ষেপে: ES6 তে লেখা মডিউলটি এনপিএম-এ প্রকাশ করার জন্য আমার কী পদক্ষেপ নেওয়া দরকার, যখন এখনও লোকেরা মূল কোডটি ব্রাউজ / কাঁটাচামচ করার অনুমতি দেয়?

javascript  node.js  npm  ecmascript-6  babeljs 
— ট্র্যাভেলিং টেক গাই
সূত্র
এই সিদ্ধান্ত নিয়ে আমি ইদানীং লড়াই করে যাচ্ছি। Éকমত্যের মাধ্যমে আপনি জোসে যে উত্তরটি সঠিক বলে চিহ্নিত করেছেন তা আমি দেখতে পাচ্ছি usকমত্যও।
— talves
এখানে আমার এর 2018 উত্তর , 2015. যেহেতু মডিউল সমর্থনে উন্নতি একাউন্টে গ্রহণ
— ড্যান Dascalescu
1
আমি যদি উল্টোটি করতে পারি তবে আমি পছন্দ করব। কোনও এনপিএম মডিউল আমদানি করার জন্য একটি ইএস মডিউল ব্যবহার করুন, তবে এগুলি কেবলমাত্র আমি পেয়েছি ফলাফল।
— শানমিসি

উত্তর:

81

আমি এখন পর্যন্ত যে প্যাটার্নটি দেখেছি তা হ'ল এসি 6 ফাইলগুলিকে একটি srcডিরেক্টরিতে রাখা এবং আপনার স্টাফকে এনপিএম-এর ডিরেক্টরিতে প্রি-প্রকাশিত করে তৈরি করা lib।

আপনার একটি .npmignore ফাইলের প্রয়োজন হবে, .gitignore এর মতো তবে এর srcপরিবর্তে উপেক্ষা করা lib।

— জোসে এফ রোমানিলো
সূত্র
4
আপনার কাছে কি ভান্ডার উদাহরণ রয়েছে?
— আহমেদ আব্বাস
2
@JamesAkwuh মনে রাখবেন আপনি সম্ভবত package.json "সূচনা" এবং "বিল্ড" কমান্ড পরিবর্তন করতে Babel-CLI আপেক্ষিক পাথ ব্যবহার করতে চান হবে: ./node_modules/babel-cli/bin/babel.js -s inline -d lib -w src। এটি নিশ্চিত করা উচিত যে নতুন পরিবেশে স্থাপনের সময় ইনস্টলগুলি ব্যর্থ হয় না।
— phazonNinja
2
@phazoninja এনপিএম এটি পরিচালনা করে
— জেমস আকউহ
4
"যদি .npmignore ফাইল না থাকে তবে একটি .gitignore ফাইল থাকে তবে এনপিএম .Gitignore ফাইলের সাথে ম্যাচ করা জিনিসটিকে উপেক্ষা করবে।" অফিসিয়াল এনপিএম ডক্স
— ফ্রাঙ্ক নোক
10
পরিবর্তে .npmignoreআপনি filesপ্যাকেজ.জসনে ক্ষেত্রটি ব্যবহার করতে পারেন । এটি আপনাকে প্রকাশ করতে চান না এমন এলোমেলো ফাইলগুলির শিকারের পরিবর্তে আপনি ঠিক কী ফাইল প্রকাশ করতে চান তা সুনির্দিষ্ট করতে দেয় ।
— ড্যান ড্যাসক্লেস্কু
76

আমি জোসের উত্তর পছন্দ করি। আমি লক্ষ্য করেছি যে বেশ কয়েকটি মডিউল ইতিমধ্যে ইতিমধ্যে অনুসরণ করে follow আপনি কীভাবে সহজেই এটি ব্যাবেল 6 এর সাথে প্রয়োগ করতে পারবেন তা এখানে। আমি babel-cliস্থানীয়ভাবে ইনস্টল করি তাই আমি যদি আমার গ্লোবাল বাবেল সংস্করণটি পরিবর্তন করি তবে বিল্ডটি ভেঙে যায় না।

.npmignore

/src/

.gitignore

/lib/
/node_modules/

ব্যাবেল ইনস্টল করুন

npm install --save-dev babel-core babel-cli babel-preset-es2015

package.json

{
  "main": "lib/index.js",
  "scripts": {
    "prepublish": "babel src --out-dir lib"
  },
  "babel": {
    "presets": ["es2015"]
  }
}
— মারিয়াস ক্র্যাকিউনয়ইউ
সূত্র
29
কোন কমান্ড scriptsহবে node_modules/.binতাদের যোগ করা $PATHএবং যেহেতু babel-cliএকটি বাইনারি ইনস্টলেশনের node_modules/.bin/babelপথ দ্বারা কমান্ড রেফারেন্স করার কোন প্রয়োজন নেই।
— সুকিমা
3
দয়া করে লক্ষ্য করুন যে prepublishএটি সমস্যাযুক্ত কারণ এটি ইনস্টল সময় চলতে পারে ( github.com/npm/npm/issues/3059 ), আরও idiomatic versionস্ক্রিপ্ট হুক পছন্দ করুন ( docs.npmjs.com/cli/version )
— mattecapu
@ ম্যাটটেকাপু দেখে মনে হচ্ছে সমস্যাটি prepublishএখনও আছে। এই মুহুর্তে আমি মনে করি srcডিরেক্টরিটি ম্যানুয়ালি সংকলন করে চলেছি npm publishway
— Sonlexqt
1
আপনি prepublishOnlyস্ক্রিপ্ট হুক ব্যবহার করতে পারেন (দেখুন docs.npmjs.com/misc/scriptts#prepublish- এবং-prepare )। নোট করুন যে এনপিএমের 5 তম সংস্করণে এটি প্রত্যাশা অনুযায়ী কাজ করা উচিত, তবে আপাতত (ধরে নিলে আপনি এনএমপি ভি 4 + ব্যবহার করছেন) এটি কাজ করা উচিত।
— অ্যালেক্স মান
1
@ ফ্র্যাঙ্কনোক (obv।) এর prepublishআগে চলে publish, যা এনপিএম (বা আপনি যেখানেই কনফিগার করেন না কেন) স্টাফ ঠেলে দেয়। সুতরাং এটি এনপিএম প্যাকেজে যা আছে তা তৈরির জন্য, এটি চেক ইন না করা থাকলেও
— সাইমন বুখান
42

টি এল; ডিআর - না, যতক্ষণ না ~ অক্টোবর 2019. দ্য Node.js মডিউল টিম করেছে জিজ্ঞাসা :

দয়া করে [অক্টোবর 2019] পর্যন্ত নোড.জেএস দ্বারা ব্যবহারের উদ্দেশ্যে নির্মিত কোনও ইএস মডিউল প্যাকেজ প্রকাশ করবেন না Please

2019 মে আপডেট

২০১৫ সাল থেকে যখন এই প্রশ্নটি জিজ্ঞাসা করা হয়েছিল, মডিউলগুলির জন্য জাভাস্ক্রিপ্ট সমর্থন উল্লেখযোগ্যভাবে পরিপক্ক হয়েছে এবং আশা করা যাচ্ছে যে অক্টোবর 2019 এ এটি আনুষ্ঠানিকভাবে স্থিতিশীল হতে চলেছে other অন্য সমস্ত উত্তর এখন অপ্রচলিত বা অতিরিক্ত জটিল। এখানে বর্তমান পরিস্থিতি এবং সেরা অনুশীলন is

ES6 সমর্থন

সংস্করণ 6 থেকে নোড দ্বারা 99% ইএস 6 (ওরফে 2015) সমর্থন করেছে । নোডের বর্তমান সংস্করণটি 12 All সমস্ত চিরসবুজ ব্রাউজারগুলি ES6 এর বিশাল সংখ্যক বৈশিষ্ট্য সমর্থন করে। ইসমাস্ক্রিপ্ট এখন 2019 এর সংস্করণে রয়েছে এবং সংস্করণ স্কিমটি এখন বছরগুলি ব্যবহারের পক্ষে।

ব্রাউজারগুলিতে ES মডিউল (ওরফে ECMAScript মডিউল)

সকল চিরহরিৎ ব্রাউজার হয়েছে সমর্থনকারী import -ing ES6 মডিউল যেহেতু 2017. ডায়নামিক আমদানির হয় সমর্থিত Chrome এর দ্বারা (+ + কাটাচামচ অপেরা এবং Samsung ইন্টারনেটের মত) এবং সাফারি। ফায়ারফক্স সমর্থন পরবর্তী সংস্করণ, 67 এর জন্য স্লেড।

মডিউল লোড করার জন্য আপনার আর ওয়েবপ্যাক / রোলআপ / পার্সেল ইত্যাদির দরকার নেই । এগুলি এখনও অন্য উদ্দেশ্যে কার্যকর হতে পারে তবে আপনার কোড লোড করার প্রয়োজন নেই। আপনি সরাসরি ইএস মডিউল কোডের দিকে নির্দেশ করে URL গুলি আমদানি করতে পারেন।

নোডে ইএস মডিউল

ইডি মডিউলগুলি ( / এর .mjsসাথে ফাইলগুলি ) নোড ভি 8.5.0 থেকে পতাকা সহ কল করে সমর্থনযোগ্য । নোড ভি 12, এপ্রিল 2019 এ প্রকাশিত হয়েছে, পরীক্ষামূলক মডিউলগুলির সমর্থনটি আবারও লিখেছিল। সর্বাধিক দৃশ্যমান পরিবর্তনটি হ'ল আমদানি করার সময় ফাইল এক্সটেনশনটি ডিফল্টরূপে নির্দিষ্ট করা দরকার:importexportnode--experimental-modules

// lib.mjs 

export const hello = 'Hello world!';

// index.mjs:

import { hello } from './lib.mjs';
console.log(hello);

বাধ্যতামূলক .mjsএক্সটেনশনগুলি জুড়ে নোট করুন । হিসাবে চালান:

node --experimental-modules index.mjs

যখন মডিউল টিম নোড 12 রিলিজ হয় জিজ্ঞাসা ডেভেলপারদের প্রকাশ না করার ইএস মডিউল প্যাকেজ Node.js দ্বারা ব্যবহারের জন্য দেয়ার উদ্দেশ্যে করা পর্যন্ত একটি সমাধান উভয় মাধ্যমে প্যাকেজ ব্যবহার করার জন্য পাওয়া যায় require('pkg')এবং import 'pkg'। আপনি এখনও ব্রাউজারগুলির জন্য উদ্দিষ্ট দেশীয় ইএস মডিউলগুলি প্রকাশ করতে পারেন।

নেটিভ ইএস মডিউলগুলির ইকোসিস্টেম সমর্থন

মে 2019 সালের হিসাবে, ইএস মডিউলগুলির জন্য ইকোসিস্টেম সমর্থন অপরিণত। উদাহরণস্বরূপ, জেস্ট এবং আভা এর মতো টেস্ট ফ্রেমওয়ার্কগুলি সমর্থন করে না --experimental-modules। আপনাকে ট্রান্সপ্লেলার ব্যবহার করতে হবে, এবং তারপরে নামকরণকৃত আমদানি ( import { symbol }) সিনট্যাক্স (যা এখনও বেশিরভাগ এনপিএম প্যাকেজগুলির সাথে কাজ করে না) এবং ডিফল্ট আমদানি সিনট্যাক্স ( import Package from 'package') যা কাজ করে তা ব্যবহার করার মধ্যে সিদ্ধান্ত নিতে হবে তবে বাবেল পার্স করার সময় নয় টাইপস্ক্রিপ্টে রচিত প্যাকেজগুলির জন্য (গ্রাফিক্যেল-সরঞ্জামগুলি, নোড-ইনফ্লক্স, ফ্যাসট ইত্যাদি) তবে এমন একটি কার্যকারিতা রয়েছে যা --experimental-modulesবাবেল আপনার কোডটি স্থানান্তর করে যাতে আপনি এটি জেস্ট / আভা / মোচা ইত্যাদি দিয়ে পরীক্ষা করতে পারেন:

import * as ApolloServerM from 'apollo-server'; const ApolloServer = ApolloServerM.default || ApolloServerM;

অরূপভাবে কুৎসিত, তবে এইভাবে আপনি নিজের ইএস মডিউল কোড import/ exportদিয়ে node --experimental-modulesট্রান্সপোর্টার ছাড়াই লিখতে এবং চালাতে পারেন । আপনার যদি নির্ভরতা থাকে যা এখনও ইএসএম প্রস্তুত নয়, তবে উপরের মতো সেগুলি আমদানি করুন এবং আপনি বাবেলের মাধ্যমে পরীক্ষার ফ্রেমওয়ার্ক এবং অন্যান্য সরঞ্জামাদি ব্যবহার করতে সক্ষম হবেন।

প্রশ্নের পূর্ববর্তী উত্তর - মনে রাখবেন, নোড প্রয়োজনীয় / আমদানির সমস্যা সমাধান না করা পর্যন্ত এটি করবেন না, আশা করি অক্টোবর 2019 এর আশেপাশে।

পিছনের সামঞ্জস্য সহ EP6 মডিউলগুলি এনএমপি তে প্রকাশ করা

যাতে এটি সরাসরি ইম্পোর্ট করা যেতে পারে, হট্টগোল বা অন্যান্য transpilers ছাড়া npmjs.org একটি ইএস মডিউল প্রকাশ করতে, কেবল বাতলান mainআপনার ক্ষেত্র package.jsonথেকে .mjsফাইল, কিন্তু এক্সটেনশন বর্জন:

{
  "name": "mjs-example",
  "main": "index"
}

এটাই একমাত্র পরিবর্তন। এক্সটেনশন বাদ দিয়ে, নোড - এক্সপেরিমেন্টাল-মডিউলগুলি দিয়ে চালিত হলে কোনও এমজেএস ফাইলের সন্ধান করবে। অন্যথায় এটি .js ফাইলে ফিরে আসবে, সুতরাং পুরানো নোড সংস্করণগুলিকে সমর্থন করার জন্য আপনার বিদ্যমান প্রতিস্থাপন প্রক্রিয়াটি আগের মতো কাজ করবে - কেবল বাবেল .mjsফাইল (গুলি) এর দিকে ইঙ্গিত করার বিষয়টি নিশ্চিত করুন।

এখানে নোড <8.5.0 জন্য পিছন সামঞ্জস্য সঙ্গে একটি নেটিভ ইএস মডিউলের জন্য উৎস যে আমি NPM প্রকাশিত। আপনি বাবেল বা অন্য কিছু ছাড়াই এখনই এটি ব্যবহার করতে পারেন।

মডিউলটি ইনস্টল করুন:

npm install local-iso-dt
# or, yarn add local-iso-dt

একটি পরীক্ষা ফাইল টেস্ট.এমজেস তৈরি করুন :

import { localISOdt } from 'local-iso-dt/index.mjs';
console.log(localISOdt(), 'Starting job...');

- এক্সপেরিমেন্টাল-মডিউলগুলি পতাকা সহ নোড (v8.5.0 +) চালান:

node --experimental-modules test.mjs

টাইপরাইটারে মুদ্রি

আপনি যদি টাইপস্ক্রিপ্টে বিকাশ করেন তবে আপনি ES6 কোড উত্পন্ন করতে এবং ES6 মডিউলগুলি ব্যবহার করতে পারেন:

tsc index.js --target es6 --modules es2015

তারপরে, আপনাকে *.jsআউটপুটটির নতুন নামকরণ করতে হবে .mjs, একটি পরিচিত সমস্যা যা আশা করা যায় শীঘ্রই সংশোধন হয়ে যাবে তাই সরাসরি tscআউটপুট .mjsফাইলগুলি করতে পারে ।

— ড্যান ড্যাসক্লেস্কু
সূত্র
3
"সমস্ত চিরসবুজ ব্রাউজারগুলি ES6 বৈশিষ্ট্যের সিংহভাগ সমর্থন করে।" আপনি যখন ডেটা দেখুন এবং বুঝতে পারবেন যে ব্রাউজারগুলিতে এস 6 সমর্থনটি সমস্ত ব্যবহারকারীর প্রায় 80% পর্যন্ত পৌঁছে যায় তখন এর বেশি অর্থ হয় না ।
— পেড্রো পেদ্রোসা
3
বর্তমানে, বাস্তুসংস্থান অবশ্যই এর জন্য যথেষ্ট পরিপক্ক নয়। ভি 12 প্রকাশের সাথে নোড.জেএস টিম বিশেষভাবে জিজ্ঞাসা করেছিল: "দয়া করে নোড.জেএস দ্বারা ব্যবহারের উদ্দেশ্যে তৈরি কোনও ইএস মডিউল প্যাকেজ প্রকাশ করবেন না যতক্ষণ না এটি সমাধান হয়ে যায়।" 2ality.com/2019/04/nodejs-esm-impl.html#es-modules-on-npm মোচা স্থানীয়ভাবে .mjs ফাইল সমর্থন করে না। অনেকগুলি লাইব্রেরি (যেমন তৈরি করুন-প্রতিক্রিয়া-অ্যাপ্লিকেশন, রিঅ্যাক্ট-অ্যাপোলো, গ্রাফকিএল-জেএস) mjsফাইলগুলি সহ নির্ভরতা নিয়ে সমস্যা ছিল । নোড.জেএস 2019 সালের অক্টোবরে অফিসিয়াল সমর্থন রোল আউট করার পরিকল্পনা করছে যা এটি প্রাথমিকতম আমি এটিকে গুরুত্বের সাথে পুনর্বিবেচনা করব।
— thisismydesign
3
@ থিসিস্মিডিজাইন: এই পুরানো উত্তরটি আপডেট করার জন্য অনুস্মারকটির জন্য ধন্যবাদ! সবে তাই করেছে।
— ড্যান ড্যাসক্লেস্কু
17

@ জোস ঠিক আছে এনপিএম-তে ES6 / ES2015 প্রকাশের ক্ষেত্রে কোনও ভুল নেই তবে এটি সমস্যার কারণ হতে পারে, বিশেষত যদি আপনার প্যাকেজটি ব্যবহার করা ব্যক্তি ওয়েবপ্যাক ব্যবহার করে থাকে, কারণ সাধারণত লোকেরা পারফরম্যান্সের কারণে node_modulesপ্রি-প্রসেসিংয়ের সময় ফোল্ডারটিকে উপেক্ষা করে babel।

সুতরাং, শুধু ব্যবহার gulp, gruntকেবল node.js অথবা একটি নির্মাণ করতে libES5 যে ফোল্ডার।

এখানে আমার build-lib.jsস্ক্রিপ্ট, যা আমি রাখি ./tools/(না gulpবা gruntএখানে):

var rimraf = require('rimraf-promise');
var colors = require('colors');
var exec = require('child-process-promise').exec;

console.log('building lib'.green);

rimraf('./lib')
    .then(function (error) {
        let babelCli = 'babel --optional es7.objectRestSpread ./src --out-dir ./lib';
        return exec(babelCli).fail(function (error) {
            console.log(colors.red(error))
        });
    }).then(() => console.log('lib built'.green));

এখানে একটি সর্বশেষ পরামর্শ: আপনার প্রকল্পে আপনাকে একটি .npmignore যুক্ত করতে হবে । যদি npm publishএই ফাইলটি না খুঁজে পাওয়া যায়, তবে এটি .gitignoreপরিবর্তে ব্যবহার করবে , যা আপনাকে সমস্যার কারণ করবে কারণ সাধারণত আপনার .gitignoreফাইলটি বাদ দেবে ./libএবং অন্তর্ভুক্ত করবে ./src, যা আপনি এনপিএম-এ প্রকাশ করার সময় যা চান তা ঠিক তার বিপরীত। .npmignoreফাইল মূলত একই বাক্য গঠন হয়েছে .gitignore(আমি যতদূর জানি)।

— আন্দ্রে পেনা
সূত্র
1
পরিবর্তে .npmignoreআপনি filesপ্যাকেজ.জসনে ক্ষেত্রটি ব্যবহার করতে পারেন । এটি আপনাকে প্রকাশ করতে চান না এমন এলোমেলো ফাইলগুলির শিকারের পরিবর্তে আপনি ঠিক কী ফাইল প্রকাশ করতে চান তা সুনির্দিষ্ট করতে দেয় ।
— ড্যান ড্যাসক্লেস্কু
এই বিরতি গাছ কাঁপছে না?
— জো
আমি ব্যবহার সুপারিশ করি না .npmignore, চেষ্টা package.json's files: তার জন্যে দেখুন github.com/c-hive/guides/blob/master/js/...
— thisismydesign
@ থিসিস্মি ডিজাইন: উপরের আমার মন্তব্যে ঠিক এটাই পরামর্শ দিয়েছি ..?
— ড্যান ড্যাসক্লেস্কু
আমার খারাপ, খেয়াল করেনি :)
— thisismydesign
8

জোসে এবং মারিয়াসের পদ্ধতির অনুসরণ করে (2019 সালের বাবেলের সর্বশেষ সংস্করণটির আপডেটের সাথে): সর্বশেষতম জাভাস্ক্রিপ্ট ফাইলগুলিকে একটি এসসিআর ডিরেক্টরিতে রাখুন, এবং এনপিএমের prepublishস্ক্রিপ্ট এবং আউটপুট দিয়ে লিব ডিরেক্টরিতে তৈরি করুন।

.npmignore

/src

.gitignore

/lib
/node_modules

বাবেল ইনস্টল করুন (আমার ক্ষেত্রে 7.5.5 সংস্করণ)

$ npm install @babel/core @babel/cli @babel/preset-env --save-dev

package.json

{
  "name": "latest-js-to-npm",
  "version": "1.0.0",
  "description": "Keep the latest JavaScript files in a src directory and build with npm's prepublish script and output to the lib directory.",
  "main": "lib/index.js",
  "scripts": {
    "prepublish": "babel src -d lib"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/cli": "^7.5.5",
    "@babel/core": "^7.5.5",
    "@babel/preset-env": "^7.5.5"
  },
  "babel": {
    "presets": [
      "@babel/preset-env"
    ]
  }
}

এবং আমার কাছে রয়েছে src/index.jsযা তীর ফাংশনটি ব্যবহার করে:

"use strict";

let NewOneWithParameters = (a, b) => {
  console.log(a + b); // 30
};
NewOneWithParameters(10, 20);

এখানে গিটহাবের রেপো রয়েছে ।

এখন আপনি প্যাকেজ প্রকাশ করতে পারেন:

$ npm publish
...
> latest-js-to-npm@1.0.0 prepublish .
> babel src -d lib

Successfully compiled 1 file with Babel.
...

প্যাকেজটি এনএমপি তে প্রকাশিত হওয়ার আগে আপনি দেখতে পাবেন যে lib/index.jsউত্পন্ন হয়েছে যা এস 5 এ স্থানান্তরিত হয়েছে:

"use strict";

var NewOneWithParameters = function NewOneWithParameters(a, b) {
  console.log(a + b); // 30
};

NewOneWithParameters(10, 20);

[রোলআপ বান্ডেলারের জন্য আপডেট]

@ কাইয়ের জিজ্ঞাসা অনুসারে, আপনি কীভাবে রোলআপ বান্ডলারকে সংহত করবেন?

প্রথমে ইনস্টল করুন rollupএবংrollup-plugin-babel

npm install -D rollup rollup-plugin-babel

দ্বিতীয়ত, rollup.config.jsপ্রকল্পের মূল ডিরেক্টরিতে তৈরি করুন

import babel from "rollup-plugin-babel";

export default {
  input: "./src/index.js",
  output: {
    file: "./lib/index.js",
    format: "cjs",
    name: "bundle"
  },
  plugins: [
    babel({
      exclude: "node_modules/**"
    })
  ]
};

সর্বশেষে, আপডেট prepublishমধ্যেpackage.json

{
  ...
  "scripts": {
    "prepublish": "rollup -c"
  },
  ...
}

এখন আপনি চালনা করতে পারেন npm publish, এবং প্যাকেজটি এনএমপি তে প্রকাশিত হওয়ার আগে আপনি দেখতে পাবেন যে lib / index.js তৈরি হয়েছে, যা এস 5 এ স্থানান্তরিত হয়েছে:

'use strict';

var NewOneWithParameters = function NewOneWithParameters(a, b) {
  console.log(a + b); // 30
};

NewOneWithParameters(10, 20);

দ্রষ্টব্য: @babel/cliযাইহোক , আপনি আর রোলআপ বান্ডলার ব্যবহার করছেন না তবে আপনার আর প্রয়োজন নেই । আপনি এটি নিরাপদে আনইনস্টল করতে পারেন:

npm uninstall @babel/cli
— Yuci
সূত্র
আপনি কীভাবে রোলআপ বান্ডেলকে সংহত করবেন?
— kyw
1
@ কী, রোলআপ বান্ডলারকে কীভাবে সংহত করা যায় সে সম্পর্কে আমার আপডেট হওয়া উত্তরটি দেখুন।
— ইউসি
ডিসেম্বর 2019 আপডেট -> github.com/rolup/rollup/blob/…
— এ.বারবিয়েরি
6

যদি আপনি এটি খুব সাধারণ একটি ছোট ওপেন সোর্স নোড মডিউলটিতে ক্রিয়াতে দেখতে চান তবে নবম দিনটি দেখুন (যা আমি শুরু করেছি - অন্যান্য অবদানকারীরা)। প্যাকেজ.জেসন ফাইলটিতে এবং প্রাক-প্রকাশিত পদক্ষেপটি দেখুন যা আপনাকে কোথায় এবং কীভাবে এটি করতে পরিচালিত করবে। আপনি যদি সেই মডিউলটি ক্লোন করে থাকেন তবে আপনি এটিকে স্থানীয়ভাবে চালাতে এবং এটি আপনার জন্য একটি টেম্পলেট হিসাবে ব্যবহার করতে পারেন।

— লোক
সূত্র
4

নোড.জেএস ১৩.২.০+ পরীক্ষামূলক পতাকা ছাড়াই ইএসএম সমর্থন করে এবং হাইব্রিড (ইএসএম এবং কমনজেএস) এনপিএম প্যাকেজগুলি প্রকাশের জন্য কয়েকটি বিকল্প রয়েছে (প্রয়োজনীয় পিছিয়ে সামঞ্জস্যের স্তরের উপর নির্ভর করে): https://2ality.com/2019 /10/hybrid-npm-packages.html

আপনার প্যাকেজটির ব্যবহার আরও সহজ করার জন্য আমি পুরো পশ্চাদপটে সামঞ্জস্যতার পথে যাওয়ার পরামর্শ দিচ্ছি। এটি নিম্নলিখিত হিসাবে দেখতে পারে:

হাইব্রিড প্যাকেজটিতে নিম্নলিখিত ফাইল রয়েছে:

mypkg/
  package.json
  esm/
    entry.js
  commonjs/
    package.json
    entry.js

mypkg/package.json

{
  "type": "module",
  "main": "./commonjs/entry.js",
  "exports": {
    "./esm": "./esm/entry.js"
  },
  "module": "./esm/entry.js",
  ···
}

mypkg/commonjs/package.json

{
  "type": "commonjs"
}

কমনজেএস থেকে আমদানি করা:

const {x} = require('mypkg');

ইএসএম থেকে আমদানি করা:

import {x} from 'mypkg/esm';

আমরা 05.2019 সালে ইএসএম সমর্থন সম্পর্কে একটি তদন্ত করেছি এবং দেখতে পেয়েছি যে অনেকগুলি লাইব্রেরিতে সহায়তার অভাব ছিল (অতএব পশ্চাদপটে সামঞ্জস্যের জন্য প্রস্তাবনা):

— এটা আমার নকশা
সূত্র
আমি নোড_মডিউলগুলি ফোল্ডারে (এনপিএম রুট-জি দ্বারা সরবরাহ করা) বিশ্বব্যাপী ইনস্টলড ES6 মডিউলগুলি আমদানি করতে পারি না। আমরা কি আসলেই তা করতে সক্ষম হব না? আমি সত্যিই বিভ্রান্ত. আমি জানি এনপিএম লিঙ্কটি আমার স্থানীয় নোড_মডিউলগুলি ফোল্ডারের সাথে মডিউলটিকে সংযুক্ত করে সমস্যার সমাধান করতে পারে তবে আমি কেন জানতে চাই যে বিশ্বব্যাপী নোড মডিউলগুলি কেন আমদানি করা যায় না।
— জোয়াকিম এল ক্রিশ্চেনসেন
নিজের জবাব দিয়ে, আমি অনুমান করি এটি কখনই সমর্থিত হবে না: github.com/nodejs/node-eps/blob/master/… যদিও এটি সত্যিই বোকা সিদ্ধান্ত, সমর্থন করা সহজ হবে ...
— জোয়াকিম এল
3

একটি এনপিএম প্যাকেজটির দুটি মানদণ্ড হ'ল এটি একটি এর চেয়ে বেশি কিছু দিয়ে ব্যবহারযোগ্য require( 'package' )এবং কিছু সফ্টওয়্যার-ইশ করে।

যদি আপনি এই দুটি প্রয়োজনীয়তা পূরণ করেন তবে আপনি যা ইচ্ছা তা করতে পারেন। এমনকি মডিউলটি ES6 তে লেখা থাকলেও যদি শেষ ব্যবহারকারীর এটি জানতে না হয় তবে আমি সর্বাধিক সমর্থন পেতে এখনই এটি স্থানান্তর করব would

যাইহোক, যদি কোয়ার মতো আপনার মডিউলটির ES6 বৈশিষ্ট্য ব্যবহারকারীর সাথে সামঞ্জস্যতা প্রয়োজন, তবে সম্ভবত দুটি প্যাকেজ সমাধানটি আরও ভাল ধারণা হতে পারে।

ছাড়াইয়া লত্তয়া

  1. আপনার require( 'your-package' )কাজ করার জন্য যতটা কোড প্রয়োজন কেবল প্রকাশ করুন ।
  2. ES5 এবং 6 এর মধ্যে ব্যবহারকারীর পক্ষে গুরুত্বপূর্ণ না হলে কেবল 1 টি প্যাকেজ প্রকাশ করুন। এটি অবশ্যই স্থানান্তর করুন যদি আপনার প্রয়োজন হয় must
— JoshWillik
সূত্র
1
এটি প্রশ্নের উত্তর বলে মনে হচ্ছে না। আমি মনে করি যে ওপি তাদের গিথুব রেপোকে কীভাবে গঠন করবে এবং এনপিএমকে কী প্রকাশ করবে এবং আপনি যে ধরনের কথা বলেছেন তা হ'ল তারা যা খুশি তা করতে পারে। ওপি এই পরিস্থিতির জন্য একটি ভাল অনুশীলনের সুনির্দিষ্ট সুপারিশ চায়।
— jender00
@ jender00- এর সাথে আমি একমত নই আমি প্রস্তাব দিয়েছি যে সে ট্রাইপাইল করবে এবং কেবলমাত্র require( 'package' )কাজ করার জন্য প্রয়োজনীয় ফাইলগুলি প্রকাশ করুন । আমি আরও উত্তর পরিষ্কার করতে আমার উত্তর সম্পাদনা করব। বলেছিল, জোসের উত্তর আমার নিজের চেয়ে অনেক ভাল।
— জোশওয়িলিক
জোসের উত্তরটি খুব ভাল, তবে কখন / কেন দুটি বনাম দুটি প্যাকেজ ব্যবহার করতে হবে তার জন্য সুস্পষ্টভাবে থাম্ব-অফ-থাম্বের রূপরেখার জন্য আমি এটিকে প্রশংসা করি।
— জর্ডান গ্রে
3

মুখ্য কীটি package.jsonপ্যাকেজের প্রকাশের পরে প্রবেশের পয়েন্টটি স্থির করে। সুতরাং আপনি যেখানেই আপনার বাবেলের আউটপুটটি রাখতে পারেন এবং কেবল সঠিক পথে উল্লেখ করতে হবে main।

"main": "./lib/index.js",

এনপিএম প্যাকেজটি কীভাবে প্রকাশ করা যায় সে সম্পর্কে এখানে একটি লিখিত নিবন্ধ

https://codeburst.io/publish-your-own-npm-package-ff918698d450

এখানে রেফারেন্সের জন্য আপনি ব্যবহার করতে পারেন এমন একটি নমুনা রেপো

https://github.com/flexdinesh/npm-module-boilerplate

— দীনেশ পান্ডিয়ান
সূত্র
পোস্ট বাদ আসলে আপনি যে (এবং উচিত) করতে পারে NPM মডিউল প্রকাশ ES6 মধ্যে রচনা এবং importসরাসরি হট্টগোল বা অন্য কোন transpilers প্রয়োজন ছাড়া সক্ষম।
— ড্যান ড্যাসক্লেস্কু
0

আপনার মডিউলটির শারীরবৃত্তির উপর নির্ভর করে, এই সমাধানটি কাজ করতে পারে না, তবে যদি আপনার মডিউলটি কোনও একক ফাইলে অন্তর্ভুক্ত থাকে এবং এর কোনও নির্ভরতা ( আমদানির ব্যবহার না করে) থাকে তবে নীচের প্যাটার্নটি ব্যবহার করে আপনি আপনার কোডটি যেমন প্রকাশ করতে পারেন তেমন করতে পারেন , এবং আমদানি (ব্রাউজার ES6 মডিউল) এবং দিয়ে আমদানি করতে সক্ষম হবে প্রয়োজনীয় (নোড কমনজেএস মডিউল)

বোনাস হিসাবে, এটি একটি স্ক্রিপ্ট এইচটিএমএল এলিমেন্ট ব্যবহার করে আমদানি করা উপযুক্ত।

main.js :

(function(){
    'use strict';
    const myModule = {
        helloWorld : function(){ console.log('Hello World!' )} 
    };

    // if running in NODE export module using NODEJS syntax
    if(typeof module !== 'undefined') module.exports = myModule ;
    // if running in Browser, set as a global variable.
    else window.myModule = myModule ;
})()

আমার-মডিউল.জেএস :

    // import main.js (it will declare your Object in the global scope)
    import './main.js';
    // get a copy of your module object reference
    let _myModule = window.myModule;
    // delete the the reference from the global object
    delete window.myModule;
    // export it!
    export {_myModule as myModule};

package.json : `

    {
        "name" : "my-module", // set module name
        "main": "main.js",  // set entry point
        /* ...other package.json stuff here */
    }

আপনার মডিউলটি ব্যবহার করতে, আপনি এখন নিয়মিত বাক্য গঠন ব্যবহার করতে পারেন ...

NODE এ আমদানি করা হলে ...

    let myModule = require('my-module');
    myModule.helloWorld();
    // outputs 'Hello World!'

ব্রাউজারে আমদানি করা হলে ...

    import {myModule} from './my-module.js';
    myModule.helloWorld();
    // outputs 'Hello World!'

অথবা এইচটিএমএল স্ক্রিপ্ট উপাদান ব্যবহার করে অন্তর্ভুক্ত থাকা অবস্থায়ও ...

<script src="./main.js"></script>
<script>
     myModule.helloWorld();
    // outputs 'Hello World!'
</script>
— colxi
সূত্র
-1

যে কোনও ব্যক্তির জন্য কয়েকটি অতিরিক্ত নোট, সরাসরি গিথুব থেকে নিজস্ব মডিউল ব্যবহার করে প্রকাশিত হয় না মডিউলগুলির :

( বহুল ব্যবহৃত ) "প্রিপুব্লিশ" হুক কিছুই করছে না আপনার জন্য ।

সর্বোত্তম জিনিস যা করতে পারেন (যদি গিথুব রেপোর উপর নির্ভর করার পরিকল্পনা করা হয় তবে প্রকাশিত স্টাফ নয়):

  • .npmignore srcথেকে তালিকাভুক্ত করা (অন্য কথায়: এটি অনুমতি দিন)। আপনার যদি না থাকে তবে .npmignoreমনে রাখবেন: .gitignoreইনস্টল করা অবস্থার পরিবর্তে একটি অনুলিপি ব্যবহার করা ls node_modules/yourProjectহবে , যা আপনাকে দেখায়।
  • নিশ্চিত করা, babel-cli আপনার মডিউলটিতে একটি ডিপেন্সি, কেবল ডেডপেন্সি নয় যেহেতু আপনি সত্যই অ্যাপ্লিকেশন বিকাশকারী কম্পিউটারে গ্রাসকারী মেশিন ওরফে তৈরি করছেন, যিনি আপনার মডিউলটি ব্যবহার করছেন

  • বিল্ড জিনিসটি করুন, ইনস্টল হুক যেমন:

    "install": "babel src -d lib -s"

(কোনও কিছু "প্রিনস্টল" চেষ্টা করার অতিরিক্ত মূল্য নেই, অর্থাত্ ব্যাবেল-ক্লাইপ অনুপস্থিত)

— ফ্র্যাঙ্ক নোক
সূত্র
3
ইনস্টলের উপর সংকলন খুব অভদ্র। দয়া করে এটি করবেন না - এনপিএম ইনস্টল সময় যথেষ্ট খারাপ! অভ্যন্তরীণ কোডের জন্য যেখানে আপনি এনপিএম প্যাকেজ সংগ্রহস্থল ব্যবহার এড়াতে চান, আপনি এটি করতে পারেন: 1) একটি মনোরেপো ব্যবহার করতে পারেন, 2) আপলোড এবং npm packআউটপুট নির্ভর করে , 3) বিল্ড আউটপুটটি পরীক্ষা করে দেখুন।
— সাইমন বুচান
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.