जब मुझे बेबल का उपयोग करना होता है, तो क्या मुझे जेएस की आवश्यकता होती है?

Question

Im ES6 के साथ प्रयोग कर रहा है, और Im का निर्माण करने के लिए gulp का उपयोग कर रहा है और ES5 को ट्रांसपाइल करने के लिए बेबल है। आउटपुट नोड में नहीं चलाया जा रहा है, बस एक .htm फ़ाइल से टैग के साथ जुड़ा हुआ है। Im सोच मुझे जोड़ने की जरूरत है

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

या कुछ इस तरह का।

Im आयात / निर्यात करने की कोशिश कर रहा है।

////////////////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

इसको संदर्भित करता है (बाद में .Pipe (babel))

var _shapes = require('shapes');

Comments

हां, क्योंकि requireब्राउज़र में मौजूद नहीं है, तो आपको कुछ बिल्ड टूल की आवश्यकता होती है जैसे आवश्यकताएं। जेएस, ब्राउज़रसाइज़ या वेबपैक।

— जॉर्डन रनिंग

आह, मेरे googling के लिए browserify जोड़ने से मुझे जवाब मिला, धन्यवाद।

— जेसन

FWIW, ध्यान दें कि त्रुटि संदेश इंगित नहीं करता है कि आपको आवश्यकता है। js। बैबेल डिफ़ॉल्ट रूप से कॉमनजेएस के लिए मॉड्यूल को परिवर्तित करता है, जो कि नोड का उपयोग करता है और जो एक requireफ़ंक्शन को परिभाषित करता है (फिर, आवश्यकता के साथ कुछ नहीं करना है)। हालाँकि, आप बाबेल को मॉड्यूल को एएमडी या यूएमडी जैसी किसी और चीज़ में बदलने के लिए कह सकते हैं , जो तब आवश्यकता के साथ काम करेगा। किसी भी तरह से, आपको ब्राउज़र में मॉड्यूल लोड करने के लिए एक सिस्टम की आवश्यकता होती है, क्योंकि ब्राउज़र डिफ़ॉल्ट रूप से (अभी तक) प्रदान नहीं करता है।

— फेलिक्स क्लिंग

यहाँ देखें: stackoverflow.com/questions/28125554/…

— टॉड

Answer 1

जब मुझे बेबल का उपयोग करना होता है, तो क्या मुझे जेएस की आवश्यकता होती है?

आपको कुछ मॉड्यूल लोडर की आवश्यकता हो सकती है, लेकिन यह आवश्यक नहीं है। आपके पास कई विकल्प हैं। निम्नलिखित आपको आरंभ करने में मदद करेगा।

---

रोलअप- जेएस रोलअप-प्लगइन- बैबेल के साथ

रोलअप एक अगली पीढ़ी का जावास्क्रिप्ट मॉड्यूल बंडल है। यह मूल रूप से ES2015 मॉड्यूल को समझता है, और एक बंडल का उत्पादन करेगा जिसे संचालित करने के लिए किसी भी मॉड्यूल लोडर की आवश्यकता नहीं है। अप्रयुक्त निर्यात को आउटपुट से ट्रिम किया जाएगा, इसे ट्री-शेकिंग कहा जाता है।

अब मैं व्यक्तिगत रूप से रोलअप का उपयोग करने की सलाह देता हूं, क्योंकि यह सबसे स्पष्ट आउटपुट का उत्पादन करता है, और सेटअप करना आसान है, हालांकि, यह उत्तर के लिए एक अलग पहलू देता है। अन्य सभी दृष्टिकोण निम्नलिखित करते हैं:

1. ईएस 6 कोड को बेबल के साथ संकलित करें, अपनी पसंद के मॉड्यूल प्रारूप का उपयोग करें
2. एक मॉड्यूल लोडर के साथ संकलित मॉड्यूल को फिर से व्यवस्थित करें या एक बंडलर का उपयोग करें जो आपके लिए निर्भरता को पीछे छोड़ देगा।

रोलअपjs के साथ चीजें वास्तव में इस तरह से काम नहीं करती हैं। यहां, बैबेल के बजाय रोलअप पहला कदम है। यह केवल डिफ़ॉल्ट रूप से ईएस 6 मॉड्यूल को समझता है। आपको एक एंट्री मॉड्यूल देना होगा, जिस पर आश्रितों का पता लगाया जा सके और उन्हें समेट लिया जाए। चूंकि ES6 एक मॉड्यूल में कई नामित निर्यात की अनुमति देता है, रोलअपज अप्रयुक्त निर्यात को छीनने के लिए पर्याप्त स्मार्ट है, इस प्रकार बंडल आकार सिकुड़ता है। दुर्भाग्य से रोलअपज-एस पार्सर समझ में नहीं आता> 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 ] ]

या आप इसे node.js से उपयोग कर सकते हैं:

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

यह एक ही बार में आपके कोड को ट्रांसपाइल और कॉन्सेप्ट करेगा। Browserify के.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अपने प्रोजेक्ट रूट में चलाएं ।

---

बेबेल + वेबपैक

कोलाहल का उपयोग कर अपने सभी कोड संकलित करें। मैं आपको एएमडी मॉड्यूल ट्रांसफार्मर ( babel-plugin-transform-es2015-modules-amdबेबल 6 में कहा जाता है) का उपयोग करने की सलाह देता हूं । उसके बाद अपने संकलित स्रोतों को वेबपैक के साथ बंडल करें।

WebPack 2 बाहर है! यह मूल ईएस 6 मॉड्यूल को समझता है, और बबिली - एस बिलिन डेड कोड एलिमिनेशन का उपयोग करके हिलाते हुए (या बल्कि अनुकरण) करेगा । अभी (सितंबर 2016) के लिए मैं अभी भी बैबेल के साथ रोलअप का उपयोग करने का सुझाव दूंगा, हालांकि मेरी राय वेबपैक की पहली रिलीज के साथ बदल सकती है। टिप्पणी में अपनी राय पर चर्चा करने के लिए स्वतंत्र महसूस करें।

---

कस्टम संकलन पाइपलाइन

कभी-कभी आप संकलन प्रक्रिया पर अधिक नियंत्रण रखना चाहते हैं। आप अपनी खुद की पाइपलाइन इस तरह से लागू कर सकते हैं:

सबसे पहले, आपको एएमडी मॉड्यूल का उपयोग करने के लिए कोलाहल को कॉन्फ़िगर करना होगा। डिफ़ॉल्ट बाबेल द्वारा कॉमनजेएस मॉड्यूल के लिए ट्रांसपाइल्स, जो ब्राउज़र में हैंडल करने के लिए थोड़ा जटिल है, हालांकि ब्राउज़र उन्हें अच्छे तरीके से संभालने के लिए प्रबंधित करता है।

• बैबल 5: { modules: 'amdStrict', ... }विकल्प का उपयोग करें
• बैबल 6: es2015-modules-amdप्लगइन का उपयोग करें

को चालू करने के लिए मत भूलना moduleIds: trueविकल्प ।

उत्पन्न मॉड्यूल नामों के लिए ट्रांसप्लड कोड की जांच करें, परिभाषित और आवश्यक मॉड्यूल के बीच अक्सर बेमेल होते हैं। SourceRoot और मॉड्यूल देखें ।

अंत में, आपके पास किसी प्रकार का मॉड्यूल लोडर होना चाहिए, लेकिन यह आवश्यक नहीं है। नहीं है almondjs एक छोटे से शिम कि अच्छी तरह से काम करता है की आवश्यकता है। आप अपना स्वयं का कार्यान्वयन भी कर सकते हैं:

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);
    }
}

अंत में, आप बस लोडर शिम और संकलित मॉड्यूल को एक साथ जोड़ सकते हैं, और उस पर एक कुरकुरा चला सकते हैं।

---

हर मॉड्यूल में बैबल के बॉयलरप्लेट कोड को डुप्लिकेट किया गया है

डिफ़ॉल्ट रूप से, ऊपर दिए गए अधिकांश तरीके प्रत्येक मॉड्यूल को व्यक्तिगत रूप से बाबेल के साथ संकलित करते हैं, और फिर उन्हें एक साथ जोड़ते हैं। यही बबलीफाई भी करता है। लेकिन यदि आप संकलित कोड को देखते हैं, तो आप देखते हैं कि प्रत्येक फ़ाइल की शुरुआत में बैबल बहुत सारे बॉयलरप्लेट सम्मिलित करता है, उनमें से अधिकांश को सभी फाइलों में दोहराया जाता है।

इसे रोकने के लिए आप babel-plugin-transform-runtimeप्लगइन का उपयोग कर सकते हैं ।

Comments

यह पूरी तरह से खूनी है; धन्यवाद। पुन :: डुप्लिकेट बैबेल बॉयलरप्लेट प्रति फ़ाइल - क्या यह मान लेना सही होगा कि gzip सभी लेकिन नकारात्मक होगा?

— आयन

मैंने खुद इसे कभी नहीं मापा, लेकिन मैं यह मानूंगा कि कोई भी वितरण से पहले बंडल को छोटा करेगा, और न्यूनतमकरण शायद स्थानीय लोगों के लिए अलग-अलग नाम पाएंगे, इसलिए वे बिल्कुल समान नहीं होंगे। Gzip को सामान्य भागों (एक अच्छा संपीड़न अनुपात के परिणामस्वरूप) को खोजना चाहिए, लेकिन ब्राउज़र को अभी भी उन्हें व्यक्तिगत रूप से पार्स करना है। अंतत: इसे ध्यान देने योग्य ओवरहेड नहीं होना चाहिए, लेकिन मेरे जैसे लोग होंगे जो केवल डुप्लिकेट किए गए कोड को पसंद नहीं करते हैं।

— तमस हेगडस

काफी उचित, प्रतिक्रिया के लिए धन्यवाद। यह शायद बहुत मायने रखता है, साथ ही, उन मामलों में जहां आपको संस्करण नियंत्रण में आउटपुट कोड को ट्रैक करना या ट्रैक करना था (जहां असम्पीडित फ़ाइल आकार गुणा होता है) या जहां आप आउटपुट को किसी भी कारण से अनारक्षित करना चाहते हैं।

— आयन

gulp-rollup इस सूची के लिए भी एक अच्छा जोड़ हो सकता है

— GGG

@GGG ने gulp उदाहरण जोड़ा। दुर्भाग्य से, उदाहरणों में से कोई भी विंडोज़ पर फिलहाल काम नहीं करता है, कोड के शीर्ष पर स्पष्टीकरण देखें।

— तामस हेगडस

Answer 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

अब आपके पास अपनी रूट डायरेक्टरी में बंडल नाम की एक फाइल होनी चाहिए। यह फाइल आपके index.html की खपत होगी। यह वेबपैक से एक न्यूनतर बंडलिंग सुविधा है। आप यहां और जान सकते हैं

Answer 3

requireब्राउज़र में मौजूद नहीं है, इसलिए यह त्रुटि अपेक्षित है। आपको आवश्यकता के अनुसार कुछ का उपयोग करने की आवश्यकता है ।js या Browserify।