javascript - table - html tutorial pdf




বাবেল 6 পুনর্নির্মাণকালীন সময় সংজ্ঞায়িত করা হয় না (20)

উত্তোলিত কার্যাদি সম্পর্কে সতর্ক থাকুন

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

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

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

এই

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

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

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

.babelrc ফাইল

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

প্যাকেজ.জসন ফাইল

"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;

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


হালনাগাদ

আপনি যদি 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 ব্রাউজারের শেষ 2 সংস্করণে যাওয়া ভাল।

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

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

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

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


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

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

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

import 'babel-polyfill';

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

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

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


আপনি একটি ত্রুটি পেয়ে যাচ্ছেন কারণ ব্যবহার্য জেনারেটরগুলি async / অপেক্ষায় রয়েছে, যা 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 ব্যবহার করতে পারেন।


আমার পুনর্গঠনকারী ছিল রুনটাইম যখন ত্রুটি সংজ্ঞায়িত করা হয় না তখন যখন আমি আমার প্রতিক্রিয়া অ্যাপ্লিকেশনটিতে 'অ্যাসিঙ্ক' ব্যবহার করি এবং 'অপেক্ষা' করতাম তখন ES7 এ একটি নতুন কীওয়ার্ড রয়েছে যার জন্য আপনি এই ডিভিনিডেন্সিগুলি ইনস্টল করুন:

`

"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 থেকে উদ্ভূত হয় / স্বীকৃত না হওয়ার জন্য অপেক্ষা করে।

আমার জন্য ত্রুটিটি আমার সেটআপে দুটি জিনিস যুক্ত করে ঠিক করা হয়েছিল:

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

    ...
    
    entry: ['babel-polyfill', './index.js'],
    
    ...
  2. জেনারেটরগুলিতে অ্যাসিঙ্ক / অপেক্ষা করার প্রশংসা করতে আমার আমার .babelrc আপডেট করতে হবে:

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

DevDependencies:

আমার প্যাকেজ.জসন ফাইলে আমার ডেভিনির্ভরতাগুলিতে কয়েকটি জিনিস ইনস্টল করতে হয়েছিল। যথা, আমি ব্যাবেল-প্লাগইন-ট্রান্সফর্ম-অ্যাসিঙ্ক-টু-জেনারেটর, ব্যাবেল-পলফিল এবং ব্যাবেল-প্রিসেট-এস ২০১৫ অনুপস্থিত ছিল:

 "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"
 }

সম্পূর্ণ কোডের সংক্ষিপ্তসার:

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


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

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

এবং সূচক html এ নির্ভরতা হিসাবে যুক্ত করুন:

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

আমি একটি সেটআপ ছিল
presets: ['es2015', 'stage-0'] ব্যবহার করে ওয়েবপ্যাক সহ presets: ['es2015', 'stage-0']
এবং মোচা যা ওয়েবপ্যাক দ্বারা সংকলিত পরীক্ষাগুলি চলছিল।

আমার async/await পরীক্ষাগুলির কাজের async/await আমাকে যা করতে হয়েছিল তা হ'ল mocha --require babel-polyfill বিকল্পটি যুক্ত করতে হবে add


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

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

.babelrc:

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

ক্রোমে আমার এই সমস্যা ছিল। RienNeVaPlu͢s এর উত্তরের মতো, এটি আমার জন্য এটি সমাধান করেছে:

npm install --save-dev regenerator-runtime

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

import 'regenerator-runtime/runtime';

babel-polyfill থেকে অতিরিক্ত 200 কেবি এড়াতে খুশি।


নিম্নলিখিত উদাহরণ অনুসারে আপনার .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"
        }
      }
    ]
  ]
}

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

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

এটিতে ES 6 এর অন্যান্য বিল্ট-ইনগুলির সাথে async / অপেক্ষা করার জন্য সমর্থন অন্তর্ভুক্ত রয়েছে।

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

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

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

বাবেল-পলিফিল ইনস্টল করে আমি এই ত্রুটিটি ঠিক করেছি

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';

পরীক্ষার জন্য আমি আমার পরীক্ষার স্ক্রিপ্টে বাবেল-পলফিলের প্রয়োজনীয়তা অন্তর্ভুক্ত করেছি

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

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

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

  // ...
};

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


মোচা + বাবেল চালানোর চেষ্টা করার সময় আমি এই সমস্যাটির মুখোমুখি হয়েছিলাম। আমার কাছে একটি .babelrc ছিল যা .babelrc কাজ করেছিল (অন্যান্য উত্তরগুলি এখানে দেখুন, সেগুলি বেশ সম্পূর্ণ), তবে আমার npm run test কমান্ডটি এখনও regeneratorRuntime is not defined সম্পর্কে অভিযোগ করে npm run test regeneratorRuntime is not defined । সুতরাং আমি আমার package.json পরিবর্তন করেছি

"scripts": {
  "test": "mocha --require babel-polyfill --require babel-core/register tests/*.js"
}

আরও পড়ুন: https://babeljs.io/en/setup/#mocha-4


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

আমার ক্ষেত্রে এই ত্রুটিটি Mocha পরীক্ষার দ্বারা ছুঁড়ে ফেলা হয়েছিল।

নিম্নলিখিত সমস্যার সমাধান

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


লক্ষ্যযুক্ত ব্রাউজারগুলিকে আমার ইতিমধ্যে এসাইক / অপেক্ষার সমর্থন করা দরকার, তবে মোচা টেস্টগুলি লেখার সময়, সঠিক বিন্যাস ছাড়াই আমার এখনও এই ত্রুটি হয়েছিল got

আমি যে সমস্ত নিবন্ধগুলি দেখেছি সেগুলির বেশিরভাগ পুরানো, এতে স্বীকৃত উত্তর এবং উচ্চ ভোট প্রাপ্ত উত্তরগুলি রয়েছে, অর্থাত আপনার polyfill , polyfill babel-regenerator-runtime , babel-plugin-transform-runtime । ইত্যাদি যদি আপনার টার্গেট ব্রাউজার (গুলি) ইতিমধ্যে async / প্রত্যাশাকে সমর্থন করে (অবশ্যই আপনার যদি পলিফিলের প্রয়োজন না হয়)

আমি webpack ব্যবহার করতে চাই না।

টাইলার লংয়ের উত্তর আসলে সঠিক পথে রয়েছে কারণ তিনি babel-preset-env এনভির পরামর্শ দিয়েছিলেন (তবে তিনি প্রথমদিকে পলিফিলের কথা উল্লেখ করার সাথে সাথে আমি এটি বাদ দিয়েছিলাম)। আমি এখনও ReferenceError: regeneratorRuntime is not defined পেয়েছি ReferenceError: regeneratorRuntime is not defined প্রথমে ReferenceError: regeneratorRuntime is not defined করা হয়নি তখন আমি বুঝতে পারি এটি লক্ষ্য কারণ আমি সেট করেছিলাম না। নোডের জন্য লক্ষ্য নির্ধারণের পরে আমি পুনরায় উত্পাদককে সংশোধন করি রণটাইম ত্রুটি :

  "scripts": {
    //"test": "mocha --compilers js:babel-core/register"
    //https://github.com/mochajs/mocha/wiki/compilers-deprecation
    "test": "mocha --require babel-core/register"
  },
  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-preset-env": "^1.7.0",
    "mocha": "^5.2.0"
  },
  //better to set it .bablerc, I list it here for brevity and it works too.
  "babel": {
    "presets": [
      ["env",{
        "targets": {
          "node": "current"
           "chrome": 66,
           "firefox": 60,
        },
        "debug":true
      }]
    ]
  }

লোকেরা babel-polyfill সংস্করণ 7 ব্যবহার করতে webpack web webpack ভের 3 ^ দিয়ে webpack করুন ^

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

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

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

babel-regenerator-runtime এখন deprecated , পরিবর্তে একজনকে regenerator-runtime ব্যবহার করা উচিত।

webpack এবং webpack সহ রানটাইম জেনারেটরটি ব্যবহার করতে:

regenerator-runtime ইনস্টল করুন:

npm i -D regenerator-runtime

এবং তারপরে ওয়েবপ্যাক কনফিগারেশনের মধ্যে যুক্ত করুন:

entry: [
  'regenerator-runtime/runtime',
  YOUR_APP_ENTRY
]

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

// 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 কেবি এর পরিবর্তে প্রায় 20 babel-polyfill নেমে আসে।





babeljs