আমি যখন বাবেল ব্যবহার করি তখন আমার কি জেএস প্রয়োজন?

Question

আমি ES6 এর সাথে পরীক্ষা নিরীক্ষা করছি, এবং আমি ES5 এ ট্রান্সিলিপি করতে বিল্ড এবং ব্যাবেল উপকারটি ব্যবহার করছি। আউটপুটটি নোডে চলছে না, কেবল একটি ট্যাগের সাথে .htm ফাইল থেকে লিঙ্ক করা হয়েছে। আমি ভাবছি আমার যুক্ত করা দরকার

<script src='require.js'></script>

বা এই জাতীয় কিছু।

আমি আমদানি / রফতানি করার চেষ্টা করছি।

////////////////scripts.js
import {Circle} from 'shapes';

c = new Circle(4);

console.log(c.area());


/////////////////shapes.js
export class Circle {

    circle(radius) {
        this.radius = radius;
    }

    area() {
        return this.radius * this.radius * Math.PI;
    } 

}

ত্রুটি হয়

Uncaught ReferenceError: require is not defined

এটিকে বোঝায় (পাইপ (বাবেল ()) পরে)

var _shapes = require('shapes');

Comments

হ্যাঁ, requireব্রাউজারে বিদ্যমান না থাকায় আপনার প্রয়োজনের মতো কিছু বিল্ড টুল ব্যবহার করা দরকার, ব্রাউজারফি বা ওয়েবপ্যাক।

— জর্দান

আহ, আমার গুগলিতে ব্রাউজারিফাই যুক্ত করে উত্তর পেয়েছে, আপনাকে ধন্যবাদ।

— জেসন

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

— ফেলিক্স ক্লিং

এখানে দেখুন: stackoverflow.com/questions/28125554/…

— টড

Answer 1

আমি যখন বাবেল ব্যবহার করি তখন আমার কি জেএস প্রয়োজন?

আপনার কিছু মডিউল লোডার দরকার হতে পারে তবে এটি প্রয়োজনীয় জেএসএস নয়। আপনার কাছে বেশ কয়েকটি বিকল্প রয়েছে। নিম্নলিখিতটি আপনাকে শুরু করতে সহায়তা করবে।

---

রোলআপ-প্লাগইন- ব্যাবেল সহ রোলআপ.জেএস

রোলআপ হ'ল একটি পরবর্তী প্রজন্মের জাভাস্ক্রিপ্ট মডিউল বান্ডলার। এটি ES2015 মডিউলগুলি স্থানীয়ভাবে বোঝে এবং এমন একটি বান্ডিল তৈরি করবে যা পরিচালনা করতে কোনও মডিউল লোডার প্রয়োজন হয় না। অব্যবহৃত রফতানি আউটপুট থেকে ছাঁটাই করা হবে, এটিকে গাছ কাঁপানো বলা হয়।

এখন আমি ব্যক্তিগতভাবে রোলআপগুলি ব্যবহার করার পরামর্শ দিচ্ছি, কারণ এটি পরিষ্কার আউটপুট উত্পাদন করে এবং সেটআপ করা সহজ, তবে এটি উত্তরের একটি আলাদা দিক দেয়। অন্যান্য সমস্ত পদ্ধতির নিম্নলিখিতগুলি করে:

1. বাবেলের সাথে ES6 কোডটি সংকলন করুন, আপনার পছন্দের মডিউল বিন্যাসটি ব্যবহার করুন
2. সংকলিত মডিউলগুলির সাথে একটি মডিউল লোডার পাশাপাশি সংযুক্ত করুন বা এমন একটি বান্ডিল ব্যবহার করুন যা আপনার জন্য নির্ভরতাগুলি অতিক্রম করবে।

রোলআপজসের সাথে জিনিসগুলি সত্যিই এইভাবে কাজ করে না। এখানে, বাবেলের পরিবর্তে রোলআপটি প্রথম ধাপ। এটি কেবলমাত্র ডিফল্টরূপে ES6 মডিউলগুলি বোঝে। আপনাকে অবশ্যই একটি এন্ট্রি মডিউল দিতে হবে যার নির্ভরতাগুলি ট্র্যাভেট এবং কনটেনটেটেড হবে। যেহেতু ইএস 6 মডিউলে একাধিক নামযুক্ত রফতানিকে মঞ্জুরি দেয়, রোলুপজগুলি অব্যবহৃত রফতানিগুলি ছাঁটাই করতে যথেষ্ট স্মার্ট, এভাবে বান্ডিল আকার সঙ্কুচিত হয়। দুর্ভাগ্যক্রমে রোলআপজেস-এর পার্সার> ES6 সিনট্যাক্স বুঝতে পারে না, সুতরাং ES7 মডিউলগুলি রোলআপ পার্স করার আগে সংকলন করতে হবে, তবে সংকলনটি ES6 আমদানিকে প্রভাবিত করবে না। এটি প্রিসেটের rollup-plugin-babelসাথে প্লাগইন ব্যবহার করে করা হয় babel-preset-es2015-rollup(এই প্রিসেটটি মডিউল ট্রান্সফর্মার এবং বহিরাগত-সহায়ক প্লাগইন বাদে es2015 এক হিসাবে একই)। সুতরাং সঠিকভাবে সেট আপ করা হলে রোলআপ আপনার মডিউলগুলির সাথে নিম্নলিখিতটি করবে:

1. ফাইল সিস্টেম থেকে আপনার ES6-7 মডিউলটি পড়ে
2. বাবেল প্লাগইন এটি মেমরিতে ES6 এ সংকলন করে
3. রোলআপ ইম্পোর্ট এবং রফতানির জন্য ES6 কোডটি পার্স করে (অ্যাকরন পার্সার ব্যবহার করে, রোলআপে সংকলিত)
4. এটি পুরো গ্রাফটিকে অনুসরণ করে এবং একটি একক বান্ডিল তৈরি করে (এতে এখনও বাহ্যিক নির্ভরতা থাকতে পারে এবং প্রবেশের রফতানি আপনার পছন্দসই বিন্যাসে রফতানি হতে পারে)

নোডজ বিল্ড উদাহরণ:

// setup by `npm i rollup rollup-plugin-babel babel-preset-es2015 babel-plugin-external-helpers --save-dev`

// build.js:
require("rollup").rollup({
  entry: "./src/main.js",
  plugins: [
    require("rollup-plugin-babel")({
      "presets": [["es2015", { "modules": false }]],
      "plugins": ["external-helpers"]
    })
  ]
}).then(bundle => {
  var result = bundle.generate({
    // output format - 'amd', 'cjs', 'es6', 'iife', 'umd'
    format: 'iife'
  });

  require("fs").writeFileSync("./dist/bundle.js", result.code);
  // sourceMaps are supported too!
}).then(null, err => console.error(err));

গ্রান্ট-রোলআপ সহ গ্রান্ট বিল্ডের উদাহরণ

// setup by `npm i grunt grunt-rollup rollup-plugin-babel babel-preset-es2015 babel-plugin-external-helpers --save-dev`

// gruntfile.js
module.exports = function(grunt) {
  grunt.loadNpmTasks("grunt-rollup");
  grunt.initConfig({
    "rollup": {
      "options": {
        "format": "iife",
        "plugins": [
          require("rollup-plugin-babel")({
            "presets": [["es2015", { "modules": false }]],
            "plugins": ["external-helpers"]
          })
        ]
      },
      "dist": {
        "files": {
          "./dist/bundle.js": ["./src/main.js"]
        }
      }
    }
  });
}

গুল্প-রোলআপের সাথে গুল্প বিল্ডের উদাহরণ

// setup by `npm i gulp gulp-rollup rollup-plugin-babel babel-preset-es2015 babel-plugin-external-helpers --save-dev`

// gulpfile.js
var gulp       = require('gulp'),
    rollup     = require('gulp-rollup');

gulp.task('bundle', function() {
  gulp.src('./src/**/*.js')
    // transform the files here.
    .pipe(rollup({
      // any option supported by Rollup can be set here.
      "format": "iife",
      "plugins": [
        require("rollup-plugin-babel")({
          "presets": [["es2015", { "modules": false }]],
          "plugins": ["external-helpers"]
        })
      ],
      entry: './src/main.js'
    }))
    .pipe(gulp.dest('./dist'));
});

---

বাবেলিফি + ব্রাউজারফাই

বাবেলের বাবেলিফ নামে একটি ঝরঝরে প্যাকেজ রয়েছে । এটির ব্যবহার সহজ এবং সরল:

$ npm install --save-dev babelify babel-preset-es2015 babel-preset-react
$ npm install -g browserify
$ browserify src/script.js -o bundle.js \
  -t [ babelify --presets [ es2015 react ] ]

অথবা আপনি এটি নোড.জেএস থেকে ব্যবহার করতে পারেন:

$ npm install --save-dev browserify babelify babel-preset-es2015 babel-preset-react

...

var fs = require("fs");
var browserify = require("browserify");
browserify(["./src/script.js"])
  .transform("babelify", {presets: ["es2015", "react"]})
  .bundle()
  .pipe(fs.createWriteStream("bundle.js"));

এটি একবারে আপনার কোডটিকে স্থানান্তরিত এবং কনটেনেট করবে। ব্রাউজারফি.bundle একটি দুর্দান্ত সামান্য লোডার অন্তর্ভুক্ত থাকবে এবং আপনার স্থানান্তরিত মডিউলগুলিকে ফাংশনগুলিতে সংগঠিত করবে। এমনকি আপেক্ষিক আমদানিও করতে পারেন।

উদাহরণ:

// project structure
.
+-- src/
|   +-- library/
|   |   \-- ModuleA.js
|   +-- config.js
|   \-- script.js
+-- dist/
\-- build.js
...

// build.js
var fs = require("fs");
var browserify = require("browserify");
browserify(["./src/script.js"])
  .transform("babelify", {presets: ["es2015", "react"]})
  .bundle()
  .pipe(fs.createWriteStream("dist/bundle.js"));

// config.js
export default "Some config";

// ModuleA.js
import config from '../config';
export default "Some nice export: " + config;

// script.js
import ModuleA from './library/ModuleA';
console.log(ModuleA);

সংকলন করতে কেবল node build.jsআপনার প্রকল্পের মূল চলুন।

---

ব্যাবেল + ওয়েবপ্যাক

বাবেল ব্যবহার করে আপনার সমস্ত কোড সংকলন করুন। আমি আপনাকে amd মডিউল ট্রান্সফর্মার ( babel-plugin-transform-es2015-modules-amdবাবেল 6 নামে পরিচিত ) ব্যবহার করার পরামর্শ দিচ্ছি । এর পরে আপনার ওয়েবপ্যাক দিয়ে সংকলিত উত্সগুলি বান্ডিল করুন।

ওয়েবপ্যাক 2 আউট! এটি নেটিভ ES6 মডিউলগুলি বোঝে এবং বাবিলি-বিল্টইন ডেড কোড বিলোপ ব্যবহার করে গাছ কাঁপানো (বা বরং অনুকরণ) সম্পাদন করবে । আপাতত (সেপ্টেম্বর ২০১)) আমি এখনও বাবেলের সাথে রোলআপ ব্যবহার করার পরামর্শ দেব, যদিও ওয়েবপ্যাকের প্রথম প্রকাশের সাথে আমার মতামত পরিবর্তিত হতে পারে। মন্তব্যগুলিতে আপনার মতামত নিয়ে নির্দ্বিধায় আলোচনা করুন।

---

কাস্টম সংকলন পাইপলাইন

কখনও কখনও আপনি সংকলন প্রক্রিয়া উপর আরও নিয়ন্ত্রণ রাখতে চান। আপনি নিজের পাইপলাইনটি এভাবে প্রয়োগ করতে পারেন:

প্রথমে, আপনাকে এমডি মডিউলগুলি ব্যবহার করতে বাবেল কনফিগার করতে হবে। ডিফল্টরূপে ব্যাবেলগুলি কমনজেএস মডিউলগুলিতে স্থানান্তর করে, যা ব্রাউজারে পরিচালনা করা কিছুটা জটিল, যদিও ব্রাউজারিফাই এগুলি হ্যান্ডেল করতে পরিচালিত করে।

• ব্যাবেল 5: ব্যবহার { modules: 'amdStrict', ... }বিকল্প
• বাবেল 6: es2015-modules-amdপ্লাগইন ব্যবহার করুন

moduleIds: trueবিকল্পটি চালু করতে ভুলবেন না ।

উত্পন্ন মডুলের নামের জন্য পরিবাহিত কোডটি পরীক্ষা করে দেখুন, সংজ্ঞায়িত এবং প্রয়োজনীয় মডিউলগুলির মধ্যে প্রায়শই মিল নেই। সোর্স রুট এবং মডিউল রুট দেখুন ।

শেষ অবধি, আপনার কাছে এক ধরণের মডিউল লোডার থাকতে হবে, তবে এটি আবশ্যকীয় প্রয়োজনীয়তা নয়। নেই almondjs একটি ক্ষুদ্র shim যে ভাল কাজ করে প্রয়োজন। এমনকি আপনি নিজের প্রয়োগ করতে পারেন:

var __modules = new Map();

function define(name, deps, factory) {
    __modules.set(name, { n: name, d: deps, e: null, f: factory });
}

function require(name) {
    const module = __modules.get(name);
    if (!module.e) {
        module.e = {};
        module.f.apply(null, module.d.map(req));
    }
    return module.e;

    function req(name) {
        return name === 'exports' ? module.e : require(name);
    }
}

শেষে, আপনি কেবল লোডার শিম এবং সংকলিত মডিউলগুলি একসাথে সংযুক্ত করতে পারেন এবং এটিতে একটি uglif চালাচ্ছেন।

---

বাবেলের বয়লারপ্লেট কোড প্রতিটি মডিউলে নকল করা হয়

ডিফল্টরূপে, উপরের বেশিরভাগ পদ্ধতিগুলি প্রতিটি মডিউল পৃথকভাবে বাবেলের সাথে সংকলন করে এবং তারপরে তাদের একত্রে সংযুক্ত করে। বাবেলিফাই এটি করে। তবে আপনি যদি সংকলিত কোডটি দেখেন, আপনি দেখতে পাবেন যে বাবেল প্রতিটি ফাইলের শুরুতে প্রচুর বয়লারপ্লেট সন্নিবেশ করায়, তাদের বেশিরভাগই সমস্ত ফাইল জুড়ে নকল করা থাকে।

এটি প্রতিরোধ করতে আপনি babel-plugin-transform-runtimeপ্লাগইনটি ব্যবহার করতে পারেন ।

Comments

এটি এত রক্তাক্ত; ধন্যবাদ. পুনরায়: প্রতি ফাইলটির প্রতিলিপি বাবেল বয়লারপ্লেট - জিজিপগুলি কেবল এটিকে উপেক্ষা করবে তা অনুমান করা কি সঠিক হবে?

— আয়নো

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

— তামাস হেজেডাস

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

— আয়নো

গুল্প-রোলআপ এই তালিকায়ও একটি ভাল সংযোজন হতে পারে

— GGG

@ জিজিজি যোগ করা গুল্প উদাহরণ। দুর্ভাগ্যক্রমে উইন্ডোজে এই মুহুর্তে উদাহরণগুলির কোনওটিই কাজ করে না, উপরের কোডগুলিতে ব্যাখ্যাটি দেখুন।

— তামাস হেজেডাস

Answer 2

খালি বোনের ওয়েবপ্যাক 2

1) এটি যদি আপনার মূল ডিরেক্টরি হয়:

index.html

<html>
  ...
  <script src="./bundle.js"></script>
  ...
</html>

scripts.js

import { Circle } from './shapes.js';
  ...

shapes.js

export class Circle {
  ...
}

2) নোড ইনস্টল নোড আছে

3) আপনার টার্মিনালে নিম্নলিখিত কমান্ডটি চালান:

$ npm install -g webpack

5) আপনার মূল ডিরেক্টরিতে নিম্নলিখিতটি চালান:

$ webpack scripts.js bundle.js

আপনার এখন আপনার রুট ডিরেক্টরিতে bundle.js নামে একটি ফাইল থাকা উচিত যা আপনার সূচক html ব্যবহার করবে। এটি ওয়েবপ্যাকের একটি সংক্ষিপ্ত বান্ডিলিং বৈশিষ্ট্য। আপনি এখানে আরও শিখতে পারেন

Answer 3

requireব্রাউজারে বিদ্যমান নেই, সুতরাং এই ত্রুটিটি প্রত্যাশিত। আপনার প্রয়োজনের মতো কিছু ব্যবহার করতে হবে।