वेबपैक के लाइब्रेरी आउटपुट को बेबेल 6

Babel का 6 वां संस्करण export default के फ़ंक्शनिंग को बदलता है और विशेष रूप से 0jके साथ इसका संबंध बदलता है।वेबपैक के लाइब्रेरी आउटपुट को बेबेल 6

संक्षेप में, जब तक बैबेल 5, require('module') मॉड्यूल का डिफ़ॉल्ट निर्यात दे रहा है, अब यह हमेशा मॉड्यूल ऑब्जेक्ट को मॉड्यूल के सभी निर्यातों को वापस देता है। यदि कोई केवल डिफ़ॉल्ट चाहता है, तो उसे require('module').default का उपयोग करना होगा। As explained here, there is very good reasons behind this और इस प्रश्न का उद्देश्य इस व्यवहार को तोड़ना या हैक करना नहीं है।

हालांकि, अगर एक एक पुस्तकालय बनाने जा रहा है, वह/वह आमतौर पर नहीं एक मॉड्यूल लेकिन अपने पुस्तकालय के निर्यात मूल्य (जैसे एक समारोह है, जो कुछ मॉड्यूल प्रणाली आंतरिक रूप से प्रयोग किया जाता है) वितरित करने के लिए चाहता है। यह अच्छी तरह से webpack द्वारा के साथ निपटा जाता है और output.library विन्यास जब commonjs या AMD का उपयोग कर। चूंकि पूर्व बेबेल के संस्करणों ने सामान्य निर्यात को सामान्यज के साथ आवश्यक होने की अनुमति दी, इसलिए लेबल इस तंत्र के साथ भी संगत था। हालांकि अब यह मामला नहीं है: पुस्तकालय अब हमेशा एक ईएस 6 मॉड्यूल ऑब्जेक्ट प्रदान करता है।

यहां एक उदाहरण है।

src/main.js

export default "my lib content";

webpack.config.js

var path = require("path"); 
var webpack = require("webpack"); 

module.exports = { 
    entry: { 
    lib: [ path.resolve(__dirname, "src/main.js") ], 
    }, 
    output: { 
    path: path.join(__dirname, "dist"), 
    filename: "mylib-build.js", 
    library: 'myLib' 
    }, 
    module: { 
    loaders: [ 
     { 
     test: /\.js$/, 
     loader: "babel", 
     include: path.join(__dirname, "src"), 
     query: { presets: ['es2015'] } 
     } 
    ] 
    } 
};

test.html

<html> 
<head></head> 
<body> 
<script src="dist/mylib-build.js"></script> 
<!-- `myLib` will be attached to `window` --> 
<script> 
    console.log(JSON.stringify(myLib)); // { default: "my lib content" } 
</script> 
</body> 
</html>

यह एक बहुत ही simpl है ई उदाहरण लेकिन मैं स्पष्ट रूप से { default: "my lib content" } के बजाय mylib का स्ट्रिंग "my lib content" होना चाहता हूं।

एक समाधान परिवर्तन प्रदर्शन करने के लिए commonjs में एक निर्यात स्रोत फ़ाइल बनाने के लिए हो सकता है:

module.exports = require('./main').default;

हालांकि मैं इस समाधान काफी खराब हैं। स्रोत कोड को बदलने के बिना, इसे संकलन स्तर पर हल करने में सक्षम होना चाहिए। कोई विचार?

स्रोत

2015-11-12 Quentin Roy

* * बिल्कुल यकीन नहीं है कि आप किस प्रकार का जवाब चाहते हैं। यदि आपको लगता है कि यह एक संकलन विकल्प होना चाहिए, तो आपको इसे डेवलपर को सुझाव देना चाहिए। –

वेबपैक विन्यास बहुत शक्तिशाली है। सभी लोडर के लिए कई अलग-अलग प्लगइन्स और कई अलग-अलग पैरामीटर हैं। –

उदाहरण के लिए, यदि कोई केवल डिफ़ॉल्ट निर्यात का उपयोग करता है, तो वह [babel-plugin-transform-es2015-modules-commonjs] (http://babeljs.io/docs/plugins/transform-es2015-modules-commonjs/) का उपयोग कर सकता है और अपने सभी es6 संकुल को आमज में बदल दें। –

Webpack 2 अब es6 मॉड्यूल का समर्थन करता है जो आंशिक रूप से इस समस्या को हल करता है। Migrating from webpack 1 to webpack 2 अपेक्षाकृत दर्द रहित है। एक सिर्फ इस काम करने के लिए disable babel's es6 module to commonjs conversion को याद रखने की आवश्यकता:

.babelrc

{ 
    "presets": [ 
    ["es2015", {"modules": false}] 
    ] 
}

हालांकि, दुर्भाग्य से, यह ठीक से निर्यात डिफ़ॉल्ट के साथ काम नहीं करता है (लेकिन an issue is opened, उम्मीद है कि एक समाधान अंत में जारी किया जाएगा)।

संपादित

अच्छी खबर है! Webpack 3 output.libraryExport विकल्प है कि सीधे डिफ़ॉल्ट निर्यात बेनकाब करने के लिए इस्तेमाल किया जा सकता का समर्थन करता है: "।? एक यह एक संकलन का विकल्प है हल करने में सक्षम और स्रोत कोड को अद्यतन करने के किसी भी विचार के बिना होना चाहिए"

var path = require("path"); 
var webpack = require("webpack"); 

module.exports = { 
    entry: { 
    lib: [ path.resolve(__dirname, "src/main.js") ], 
    }, 
    output: { 
    path: path.resolve(__dirname, "dist"), 
    filename: "mylib-build.js", 
    library: "myLib", 
    // Expose the default export. 
    libraryExport: "default" 
    }, 
    module: { 
    loaders: [ 
     { 
     test: /\.js$/, 
     loader: "babel", 
     include: path.resolve(__dirname, "src") 
     } 
    ] 
    } 
};

स्रोत

2016-12-02 04:37:04

-1

आप इस समाधान का उपयोग कर सकते हैं (यह अधिक वैकल्पिक हल की तरह है, लेकिन यह आप परिवर्तन से आपके स्रोतों रखने के लिए अनुमति देते हैं):

एक लोडर callback-loader कहा जाता है। यह आपको कॉलबैक को कॉल करके बिल्डिंग समय में अपने स्रोतों को बदलने की अनुमति देता है और इसके बजाए परिणाम देता है। दूसरे शब्दों में आप बिल्डिंग समय में require('module') को स्वचालित रूप से require('module').default में बदल सकते हैं।

var webpackConfig = { 
    module: { 
     loaders: [ 
      { test: /\.js$/, exclude: /node_modules/, loader: 'callback' }, 
      ... 
     ] 
    }, 
    ... 
    callbackLoader: { 
     require: function() { 
      return 'require("' + Array.prototype.join.call(arguments, ',') + '").default'; 
     } 
    } 
};

स्रोत

2015-11-19 14:07:09 Kreozot

क्षमा करें, लेकिन यह काम नहीं करता है।यह मॉड्यूल लोड होने के तरीके को बदलता है, निर्यात नहीं किया जाता है। –

सिर्फ यह मेरा स्वयं पर जा रहा था:

यहाँ यह करने के लिए अपने config है। चाहे कोई इसे वर्कअराउंड या समाधान कहता है, वहां एक बेबेल प्लगइन प्रतीत होता है जो "इसे हल करें"।

रूप https://stackoverflow.com/a/34778391/1592572

उदाहरण config

var webpackOptions = { 
    entry: { 
     Lib1: './src/Lib1.js', 
     Lib2: './src/Lib2.js' 
    }, 
    output: { 
     filename: "Master.[name].js", 
     library: ["Master","[name]"], 
     libraryTarget: "var" 
    }, 
    module: { 
     loaders: [ 
      { 
       loader: 'babel', 
       query: { 
        presets: ['es2015'], 
        plugins: ["add-module-exports"] 
       } 
      } 
     ] 
    } 
};

यह पैदावार Master.Lib1 में संदर्भित प्लगइन babel-plugin-add-module-exports का उपयोग Master.Lib1.default के बजाय lib1 किया जाना है।

स्रोत

2016-01-15 21:32:18

मुझे लगता है कि यह एक अच्छा पर्याप्त कामकाज है। हालांकि, मुझे लगता है कि इसे केवल प्रवेश बिंदु पर ही लागू किया जाना चाहिए। बेबेल के पुराने व्यवहार को पूरी तरह बहाल करना एक बुरा विचार लगता है। –

वेबपैक के लाइब्रेरी आउटपुट को बेबेल 6

उत्तर

संबंधित मुद्दे