javascript tutorial বাবল 6 regenerator রানটাইম সংজ্ঞায়িত করা হয় না




html tutorial pdf (22)

আপনি একটি ত্রুটি পেয়েছেন কারণ ASINC / অপেক্ষা ব্যবহার জেনারেটর, যা একটি ES2016 বৈশিষ্ট্য, ES2015 নয়। এটি ঠিক করার এক উপায় হল ES2016 এর জন্য বাবল প্রিসেট npm install --save babel-preset-es2016 ( npm install --save babel-preset-es2016 ) এবং ES2015 এর পরিবর্তে ES2016 কম্পাইল করুন:

"presets": [
  "es2016",
  // etc...
]

অন্য উত্তরগুলি উল্লেখ করার সাথে সাথে, আপনি polyfills ব্যবহার করতে পারেন (যদিও কোনও কোড চালানোর আগে আপনি প্রথমে পলিফিল লোড করুন কিনা তা নিশ্চিত করুন)। বিকল্পভাবে, যদি আপনি সমস্ত পলিফিল নির্ভরতা অন্তর্ভুক্ত করতে না চান তবে আপনি ব্যাবিল-রেজিনিয়ার babel-regenerator-runtime বা babel-plugin-transform-runtime ব্যবহার করতে পারেন।

আমি Async ব্যবহার করার চেষ্টা করছি, বাবল 6 থেকে স্ক্র্যাচ থেকে অপেক্ষা করছি, কিন্তু আমি regenerator পাচ্ছি না রানটাইম সংজ্ঞায়িত করা হয়।

.babelrc ফাইল

{
    "presets": [ "es2015", "stage-0" ]
}

package.json ফাইল

"devDependencies": {
    "babel-core": "^6.0.20",
    "babel-preset-es2015": "^6.0.15",
    "babel-preset-stage-0": "^6.0.15"
}

.js ফাইল

"use strict";
async function foo() {
  await bar();
}
function bar() { }
exports.default = foo;

Async / অপেক্ষা কাজ ছাড়া সাধারণত এটি ব্যবহার করে জরিমানা। কোন ধারণা কি আমি ভুল করছি?


আমার সহজ সমাধান:

npm install --save-dev babel-plugin-transform-runtime
npm install --save-dev babel-plugin-transform-async-to-generator

.babelrc

{
  "presets": [
    ["latest", {
      "es2015": {
        "loose": true
      }
    }],
    "react",
    "stage-0"
  ],
  "plugins": [
    "transform-runtime",
    "transform-async-to-generator"
  ]
}

হালনাগাদ

আপনি যদি Chrome এ লক্ষ্য সেট করেন তবে এটি কাজ করে। কিন্তু এটি অন্যান্য লক্ষ্যগুলির জন্য কাজ করে না, দয়া করে এটি দেখুন: https://github.com/babel/babel-preset-env/issues/112

তাই এই উত্তর মূল প্রশ্ন জন্য বেশ সঠিক নয় । আমি এখানে babel-preset-env একটি রেফারেন্স হিসাবে এটি রাখা হবে।

একটি সহজ সমাধান আপনার কোডের শুরুতে import 'babel-polyfill' করুন।

আপনি ওয়েবপ্যাক ব্যবহার করলে, নীচে দেখানো একটি দ্রুত সমাধান babel-polyfill হয়:

entry: {
    index: ['babel-polyfill', './index.js']
}

আমি বিশ্বাস করি আমি সর্বশেষ সর্বোত্তম অনুশীলন খুঁজে পেয়েছি।

এই প্রকল্পটি পরীক্ষা করুন: https://github.com/babel/babel-preset-env

yarn add --dev babel-preset-env

আপনার বাবেল কনফিগারেশন হিসাবে নিম্নলিখিত ব্যবহার করুন:

{
  "presets": [
    ["env", {
      "targets": {
        "browsers": ["last 2 Chrome versions"]
      }
    }]
  ]
}

তারপরে আপনার অ্যাপ্লিকেশনটি Chrome ব্রাউজারের শেষ ২ সংস্করণগুলিতে যেতে ভাল হওয়া উচিত।

এছাড়াও আপনি https://github.com/ai/browserslist অনুসারে লক্ষ্যগুলি হিসাবে নোড সেট করতে বা ব্রাউজার তালিকাটি সূক্ষ্ম-সুর করতে পারেন।

আমাকে বলুন, কীভাবে বলবেন না।

আমি সত্যিই babel-preset-env এর দর্শন পছন্দ করি: আমাকে বলুন কোন পরিবেশ আপনি সমর্থন করতে চান, আমাকে কিভাবে সমর্থন করবেন তা বলবেন না। এটা ঘোষনামূলক প্রোগ্রামিং সৌন্দর্য।

আমি async await পরীক্ষা করেছি এবং তারা কাজ করবেন। আমি জানিনা তারা কিভাবে কাজ করে এবং আমি সত্যিই জানতে চাই না। আমি আমার নিজের কোড এবং পরিবর্তে আমার ব্যবসার যুক্তি আমার সময় ব্যয় করতে চান। Babel babel-preset-env ধন্যবাদ, এটি আমাকে Babel কনফিগারেশন নরক থেকে মুক্ত করে।


1 - বাবেল-প্লাগইন-ট্রান্সফরম-অ্যাসাইন-টু-মডিউল-পদ্ধতিটি ইনস্টল করুন, বাবেল-পলিফিল, ব্লুবার্ড, বাবল-প্রিসেট-এস ২015, বাবেল-কোর:

npm install babel-plugin-transform-async-to-module-method babel-polyfill bluebird babel-preset-es2015 babel-core

2 - আপনার জেএস বাবল পলিফিল যোগ করুন:

import 'babel-polyfill';

3 - আপনার .babelrc এ প্লাগইন যোগ করুন:

{
    "presets": ["es2015"],
    "plugins": [
      ["transform-async-to-module-method", {
        "module": "bluebird",
        "method": "coroutine"
      }]
    ]
}

উত্স: http://babeljs.io/docs/plugins/transform-async-to-module-method/


babel-polyfill প্রয়োজন। Async / কাজ করার জন্য অপেক্ষা করতে আপনাকে অবশ্যই এটি ইনস্টল করতে হবে।

npm i -D babel-core babel-polyfill babel-preset-es2015 babel-preset-stage-0 babel-loader

package.json

"devDependencies": {
  "babel-core": "^6.0.20",
  "babel-polyfill": "^6.0.16",
  "babel-preset-es2015": "^6.0.15",
  "babel-preset-stage-0": "^6.0.15"
}

.babelrc

{
  "presets": [ "es2015", "stage-0" ]
}

Async / অপেক্ষা (নমুনা কোড) সঙ্গে .js।

"use strict";

export default async function foo() {
  var s = await bar();
  console.log(s);
}

function bar() {
  return "bar";
}

প্রারম্ভে ফাইল

require("babel-core/register");
require("babel-polyfill");

আপনি যদি ওয়েবপ্যাকটি ব্যবহার করেন তবে আপনাকে @ কামানের মন্তব্য অনুসারে প্রথম এন্ট্রি হিসাবে এটি রাখতে হবে:

module.exports = {
  entry: ['babel-polyfill', './test.js'],

  output: {
    filename: 'bundle.js'       
  },

  module: {
    loaders: [
      { test: /\.jsx?$/, loader: 'babel', }
    ]
  }
};

আপনি বাবেল দিয়ে পরীক্ষা চালাতে চান তাহলে ব্যবহার করুন:

mocha --compilers js:babel-core/register --require babel-polyfill

Hoisted ফাংশন সতর্ক থাকুন

আমার একই ফাইলের মধ্যে আমার 'পলিফিল আমদানি' এবং আমার 'অ্যাসাইন ফাংশন' উভয় ছিল, তবে আমি ফাংশন সিনট্যাক্সটি ব্যবহার করছিলাম যা এটি পলিফিলের উপরে তুলে ধরে যা আমাকে ReferenceError: regeneratorRuntime is not defined ত্রুটি ReferenceError: regeneratorRuntime is not defined

এই কোড পরিবর্তন করুন

import "babel-polyfill"
async function myFunc(){ }

এই

import "babel-polyfill"
var myFunc = async function(){}

এটি পলিফিল আমদানি উপরে আটকানো প্রতিরোধ।


Babel7 ব্যবহারকারী এবং পার্সেলজেএস> = 1.10.0 ব্যবহারকারীদের জন্য

npm i @babel/runtime-corejs2
npm i --save-dev @babel/plugin-transform-runtime @babel/core

.babelrc

{
  "plugins": [
    ["@babel/plugin-transform-runtime", {
      "corejs": 2
    }]
  ]
}

https://github.com/parcel-bundler/parcel/issues/1762 থেকে নেওয়া হয়েছে


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

.babelrc

{
    "presets": [
        [
            "env",
            {
                "modules": false,
                "targets": {
                    "browsers": ["last 2 versions"]
                }
            }
        ]
    ],
    "plugins": ["external-helpers",
        [
            "transform-runtime",
            {
                "polyfill": false,
                "regenerator": true
            }
        ]]
}

rollup.config.js

import resolve from 'rollup-plugin-node-resolve';
import babel from 'rollup-plugin-babel';
import uglify from 'rollup-plugin-uglify';
import commonjs from 'rollup-plugin-commonjs';


export default {
    input: 'src/entry.js',
    output: {
        file: 'dist/bundle.js',
        format: 'umd',
        name: 'MyCoolLib',
        exports: 'named'
    },
    sourcemap: true,
    plugins: [
        commonjs({
            // polyfill async/await
            'node_modules/babel-runtime/helpers/asyncToGenerator.js': ['default']
        }),
        resolve(),
        babel({
            runtimeHelpers: true,
            exclude: 'node_modules/**', // only transpile our source code
        }),
        uglify()

    ]
};

পলিফিল ছাড়াও, আমি বাবেল babel-plugin-transform-runtime ব্যবহার করি। প্লাগইন হিসাবে বর্ণনা করা হয়:

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

এটি ES 6 এর অন্যান্য অন্তর্নির্মিত পাশাপাশি অ্যাসাইন / অপেক্ষাের জন্য সমর্থন অন্তর্ভুক্ত করে।

$ npm install --save-dev babel-plugin-transform-runtime

.babelrc , রানটাইম প্লাগইন যুক্ত করুন

{
  "plugins": [
    ["transform-runtime", {
      "polyfill": false,
      "regenerator": true
    }]
  ]
}

আমি ক্রোম এই সমস্যা ছিল। RienNevaPlu͢s উত্তর অনুরূপ, এটি আমার জন্য এটি সমাধান:

npm install --save-dev regenerator-runtime

তারপর আমার কোডে:

import 'regenerator-runtime/runtime';

babel-polyfill থেকে অতিরিক্ত 200 কেবি এড়ানোর জন্য babel-polyfill


--require babel-polyfill babel-preset-stage-2 ব্যবহার করলে কেবল স্ক্রিপ্টটি শুরু করতে হবে --require babel-polyfill

আমার ক্ষেত্রে এই ত্রুটি Mocha পরীক্ষা দ্বারা নিক্ষিপ্ত হয়।

নিম্নলিখিত সমস্যা সংশোধন করা হয়েছে

mocha \"server/tests/**/*.test.js\" --compilers js:babel-register --require babel-polyfill


নিম্নলিখিত উদাহরণ অনুযায়ী আপনার .babelrc ফাইল আপডেট করুন, এটি কাজ করবে।

আপনি যদি @babel/preset-env প্যাকেজটি ব্যবহার করেন

{
  "presets": [
    [
      "@babel/preset-env", {
        "targets": {
          "node": "current"
        }
      }
    ]
  ]
}
or if you are using babel-preset-env package

{
  "presets": [
    [
      "env", {
        "targets": {
          "node": "current"
        }
      }
    ]
  ]
}

ব্যাবিলনের 7 ব্যবহারকারী

বেশিরভাগ তথ্য পূর্বে বাবেল সংস্করণগুলির জন্য ছিল, তাই আমি এই প্রায় পেয়ে কিছু সমস্যা ছিল। বাবল 7 এর জন্য, এই দুটি নির্ভরতা ইনস্টল করুন:

npm install --save @babel/runtime 
npm install --save-dev @babel/plugin-transform-runtime

এবং, .babelrc, যোগ করুন:

{
    "presets": ["@babel/preset-env"],
    "plugins": [
        ["@babel/transform-runtime"]
    ]
}

babel-polyfill সংস্করণ 7 ব্যবহার করার জন্য লোকেদের জন্য ^ webpack ver3 ^ এর সাথে এটি করুন।

Npm মডিউল npm i -D @babel/polyfill ইনস্টল করুন

তারপর আপনার entry পয়েন্ট আপনার webpack ফাইল এই কাজ

entry: ['@babel/polyfill', path.resolve(APP_DIR, 'App.js')],

আমি ES6 জেনারেটর ব্যবহার করার চেষ্টা করার সময় রোলআপ সহ gulp ব্যবহার করে এই ত্রুটিটি পাই:

gulp.task('scripts', () => {
  return rollup({
    entry: './app/scripts/main.js',
    format: "iife",
    sourceMap: true,
    plugins: [babel({
      exclude: 'node_modules/**',
      "presets": [
        [
          "es2015-rollup"
        ]
      ],
      "plugins": [
        "external-helpers"
      ]
    }),
    includePaths({
      include: {},
      paths: ['./app/scripts'],
      external: [],
      extensions: ['.js']
    })]
  })

  .pipe(source('app.js'))
  .pipe(buffer())
  .pipe(sourcemaps.init({
    loadMaps: true
  }))
  .pipe(sourcemaps.write('.'))
  .pipe(gulp.dest('.tmp/scripts'))
  .pipe(reload({ stream: true }));
});

আমি কেস babel-polyfill উপাদান হিসাবে অন্তর্ভুক্ত করতে পারে:

bower install babel-polyfill --save

এবং index.html এ নির্ভরতা হিসাবে এটি যোগ করুন:

<script src="/bower_components/babel-polyfill/browser-polyfill.js"></script>

আমার regenerator রানটাইম ত্রুটি সংজ্ঞায়িত করা হয় না যখন আমি আমার প্রতিক্রিয়া অ্যাপ্লিকেশন 'async' এবং ' await ' ব্যবহার করে 'async' এবং ' await' ব্যবহার করি ES7 এর একটি নতুন কীওয়ার্ড যা আপনাকে ব্যাবিল-প্রিসেট-২017 ব্যবহার করতে হবে এই devdependencies ইনস্টল করা উচিত:

`

"babel-preset-es2017": "^6.24.1",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-0": "^6.24.1", `

এবং এই ব্যবহার

"presets": [ "es2017" , "stage-0" , "react" ]


আমি Async ওয়েবপ্যাক / বাবল বিল্ড সঙ্গে কাজ করার অপেক্ষায় আছে:

"devDependencies": {
    "babel-preset-stage-3": "^6.11.0"
}

.babelrc:

"presets": ["es2015", "stage-3"]

বিকল্পভাবে, যদি আপনি babel-polyfill সরবরাহ করে সমস্ত মডিউলগুলির প্রয়োজন না করেন তবে আপনার ওয়েবপ্যাক কনফিগারেশনে আপনি কেবল বাবেল babel-regenerator-runtime নির্দিষ্ট করতে পারেন:

module.exports = {
  entry: ['babel-regenerator-runtime', './test.js'],

  // ...
};

এইচএমআর সহ ওয়েবপ্যাক-ডেভ সার্ভারটি ব্যবহার করার সময়, এটির দ্বারা প্রতিটি বিল্ডে প্রচুর পরিমাণে সংকলন করা ফাইলগুলির সংখ্যা কমে যায়। এই মডিউলটি babel-polyfill অংশ হিসাবে ইনস্টল করা হয়েছে যাতে আপনার যদি ইতিমধ্যেই ভাল থাকে তবে অন্যথায় আপনি এটি npm i -D babel-regenerator-runtime সাথে পৃথকভাবে ইনস্টল করতে পারেন।


আমি বাবেল-পলিফিল ইনস্টল করে এই ত্রুটি সংশোধন করা হয়েছে

npm install babel-polyfill --save

তারপর আমি আমার অ্যাপ্লিকেশন এন্ট্রি পয়েন্টে এটি আমদানি

import http from 'http';
import config from 'dotenv';
import 'babel-polyfill';
import { register } from 'babel-core';
import app from '../app';

পরীক্ষার জন্য আমি অন্তর্ভুক্ত --require babel-polyfill আমার পরীক্ষা স্ক্রিপ্ট

"test": "export NODE_ENV=test|| SET NODE_ENV=test&& mocha --compilers 
  js:babel-core/register --require babel-polyfill server/test/**.js --exit"

এমন একটি পরিস্থিতিতে যেখানে একটি babelHelpers.js ফাইল তৈরি করা হয় babel.buildExternalHelpers() ব্যবহার করে babel.buildExternalHelpers() babel-plugin-external-helpsers আমি ক্লায়েন্টের জন্য কমপক্ষে ব্যয়বহুল সমাধান babel-plugin-external-helpsers করেছি regenerator-runtime/runtime.js পরিবর্তে আউটপুট সব polyfills এর।

// runtime.js
npm install --save regenerator-runtime

// building the custom babelHelper.js
fs.writeFile(
    './babelHelpers.js',
    fs.readFileSync('node_modules/regenerator-runtime/runtime.js')
    + '\n'
    + require('babel-core').buildExternalHelpers()
)

babel-polyfill সহ এই সমাধানটি 230 কিলোবাইটের পরিবর্তে প্রায় ২0 কিলোবাইটে নেমে আসে।


নতুন উত্তর কেন আপনি আমার উত্তর অনুসরণ?

উত্তর: কারণ আমি আপনাকে সর্বশেষ আপডেট সংস্করণ এনএমপি প্রকল্পের সাথে উত্তর দিতে যাচ্ছি।

04/14/2017

"name": "es6",
 "version": "1.0.0",
   "babel-core": "^6.24.1",
    "babel-loader": "^6.4.1",
    "babel-polyfill": "^6.23.0",
    "babel-preset-es2015": "^6.24.1",
    "webpack": "^2.3.3",
    "webpack-dev-server": "^2.4.2"

যদি আপনি এই সংস্করণটি বা আরও বেশি ইউপি সংস্করণ এনএমপি ব্যবহার করেন এবং অন্য সব ... তাই কেবল পরিবর্তন করতে হবে:

webpack.config.js

module.exports = {
  entry: ["babel-polyfill", "./app/js"]
};

webpack.config.js ফাইল পরিবর্তন করার পরে শুধু এই কোডটি আপনার কোডের উপরে যুক্ত করুন।

import "babel-polyfill";

এখন সব ঠিক আছে চেক করুন। রেফারেন্স LINK

এছাড়াও তার চমৎকার উত্তর জন্য @ BrunoLM ধন্যবাদ।


আমি একটি প্রকল্প টাইপcript প্রকল্পের মধ্যে আমার প্রকল্প রূপান্তর করার পরে এই ত্রুটি পেয়েছিলাম। আমি যা বুঝি তা থেকে, সমস্যাটি অ্যাসাইন থেকে উদ্ভূত / অপেক্ষা করা হচ্ছে না।

আমার জন্য ত্রুটিটি আমার সেটআপে দুটি জিনিস যুক্ত করে সংশোধন করা হয়েছে:

  1. উপরে উল্লিখিত হিসাবে, আমি আমার ওয়েবপ্যাক এন্ট্রি অ্যারের মধ্যে বাবেল-পলিফিল যোগ করার প্রয়োজন ছিল:

    ...
    
    entry: ['babel-polyfill', './index.js'],
    
    ...
  2. জেনারেটরের মধ্যে অ্যাসাইন / অপেক্ষা করার অনুমতি দেওয়ার জন্য আমার .babelrc আপডেট করতে হবে:

    {
      "presets": ["es2015"],
      "plugins": ["transform-async-to-generator"]
    }

DevDependencies:

আমি আমার প্যাকেজ.জson ফাইলের পাশাপাশি আমার devdependencies মধ্যে কিছু জিনিস ইনস্টল করতে হয়েছে। যেমন, আমি বাবেল-প্লাগইন-ট্রান্সফর্ম-অ্যাসাইন-টু-জেনারেটর, বাবেল-পলিফিল এবং বাবেল-প্রিসেট-এস ২015 অনুপস্থিত ছিলাম:

 "devDependencies": {
    "babel-loader": "^6.2.2",
    "babel-plugin-transform-async-to-generator": "^6.5.0",
    "babel-polyfill": "^6.5.0",
    "babel-preset-es2015": "^6.5.0",
    "webpack": "^1.12.13"
 }

সম্পূর্ণ কোড জিতেছে:

আমি আপনাকে সত্যিই খুঁজে পেতে পারেন একটি সত্যিই সহায়ক এবং সংক্ষিপ্ত GitHub Gist থেকে কোড পেয়েছিলাম।





babeljs