मैं webpack.config.js में ES6 का उपयोग कैसे कर सकता हूं?

Question

ES6 का उपयोग webpack.config में कैसे करें? जैसे यह रेपो https://github.com/kriasoft/react-starter-kit करता है?

उदाहरण के लिए:

इसका उपयोग करना

import webpack from 'webpack';

के बजाय

var webpack = require('webpack');

यह एक जरूरत के बजाय काफी जिज्ञासा है।

Comments

@ यह एक सवाल है। मेरे द्वारा इसका निर्धारण नहीं किया जा सकता। क्योंकि अगर मैं webpack.config में es6 सिंटैक्स का उपयोग करता हूं तो मुझे त्रुटियां मिलती हैं।

— व्हिज़र

सवाल यह है कि webpack.config.s में es6 का उपयोग कैसे किया जाता है। यह मुझे स्पष्ट लगता है। मैं अपने प्रश्न को एक उदाहरण के साथ अद्यतन करता हूं।

— व्हिज़र

फ़ाइल नोड.जेएस द्वारा पार्स हो जाती है, जो डिफ़ॉल्ट रूप से es6 का समर्थन नहीं करता है। इसे चालू करने के लिए कमांड लाइन के झंडे हैं, लेकिन मुझे नहीं पता कि वे क्या हैं। आप नोड के बजाय

— io.js

@KJTsanaktsidis संकेत के लिए धन्यवाद, लेकिन मैंने भी कोशिश की है

— Whisher

मैंने यह कोशिश नहीं की है, लेकिन "नोडwhich webpack

— KJ Tsanaktsidis

Answer 1

के रूप में अपने विन्यास नामकरण की कोशिश करो webpack.config.babel.js। आपके पास प्रोजेक्ट में बाबेल-रजिस्टर होना चाहिए । प्रतिक्रिया-राउटर-बूटस्ट्रैप पर उदाहरण ।

वेबपैक इस काम को करने के लिए आंतरिक रूप से व्याख्या पर निर्भर करता है ।

Comments

इसने मेरे लिए काम किया। मैं npm runइस स्क्रिप्ट webpack --config webpack.config.babel.js:।

— Mat Gessel

मुझे लगता है कि यह बिना सीधे भी इसे लेने में सक्षम हो सकता है --config।

— जुहो वेप्सलीनन

मुझे लगता है कि यह जोड़ा जाना चाहिए कि babel-loaderमॉड्यूल भी आवश्यक है

— फ्लिपकार्ट

वास्तव में, यह ठीक काम करता है, बस अपने बेबेल प्रीसेट को एक .babelrc फ़ाइल में सेट करने की आवश्यकता है।

— पीटर

मैंने इसे प्राप्त करने के लिए इस विशिष्ट प्रीसेट का उपयोग किया:echo '{ "presets": ["es2015"] }' > .babelrc

— 20

Answer 2

@Bebraw के सुझाव के विकल्प के रूप में, आप ES6 + सिंटैक्स के साथ एक जावास्क्रिप्ट स्वचालन स्क्रिप्ट बना सकते हैं:

// tools/bundle.js

import webpack from 'webpack';
import webpackConfig from './webpack.config.js'; // <-- Contains ES6+

const bundler = webpack(webpackConfig);

bundler.run(...);

और इसे कोलाहल के साथ निष्पादित करें:

$ babel-node tools/bundle

पुनश्च : जब आपको अधिक जटिल चरणों को लागू करने की आवश्यकता होती है, तो जावास्क्रिप्ट एपीआई के माध्यम से वेबपैक को कॉल करना एक बेहतर तरीका हो सकता है (इसे कमांड लाइन के माध्यम से कॉल करके)। जैसे सर्वर-साइड बंडल तैयार होने के बाद, स्टार्टअप Node.js ऐप सर्वर, और Node.js सर्वर शुरू होने के ठीक बाद, BrowserSync देव सर्वर लॉन्च करें।

यह सभी देखें:

• प्रतिक्रिया स्टार्टर किट ( package.json/scripts, tools/bundle.js, tools/webpack.config.js)
• प्रतिक्रिया स्टेटिक बॉयलरप्लेट ( run.js, webpack.config.js, node run)
• आपको गुल्प.जे की आवश्यकता नहीं हो सकती है

Comments

हालांकि थोड़ा जटिल है, यह वही है जो प्रतिक्रिया-स्टार्टर-किट का उपयोग करता है। यह सबसे अच्छा जवाब होना चाहिए।

— darkbaby123

Answer 3

एक और तरीका है एक npm स्क्रिप्ट का इस तरह से होना: "webpack": "babel-node ./node_modules/webpack/bin/webpack"और इसे इस तरह चलाना npm run webpack:।

Comments

वेबपैक पर एक कस्टम कॉन्फिगरेशन पास करते समय यह काम नहीं करता है babel-node ./node_modules/webpack/bin/webpack --config custom-webpack.config

— अभिनव सिंगी

Answer 4

मुझे वेबपोस्ट के साथ चलने वाले @ जूहो के समाधान में समस्या हो रही थी। वेबपैक माइग्रेशन डॉक्स आपको बबल मॉड्यूल पार्कों को चालू करने का सुझाव देते हैं:

यह ध्यान रखना महत्वपूर्ण है कि आप इन मॉड्यूल प्रतीकों को पार्सल नहीं करना चाहते हैं, ताकि वेबपैक उनका उपयोग कर सकें। आप इसे अपने .babelrc या बेबल-लोडर विकल्पों में निम्न सेट करके कर सकते हैं।

.babelrc:

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

अफसोस की बात है, यह स्वत: कोलाहल रजिस्टर कार्यक्षमता के साथ संघर्ष करता है। निकाला जा रहा है

{ "modules": false }

कोलाहल विन्यास से चीजें फिर से चल रही हैं। हालांकि, इसका परिणाम पेड़-झटकों को तोड़ना होगा, इसलिए एक संपूर्ण समाधान में प्रीसेट को लोडर विकल्पों में शामिल करना होगा :

module: {
    rules: [
        {
            test: /\.js$/,
            include: path.resolve('src'),
            loader: 'babel-loader',
            options: {
                babelrc: false,
                presets: [['env', {modules: false}]]
            }
        }
    ]
}

---

संपादित करें , 13 नवंबर 2017; वेबपैक 3 पर अपडेट किया गया वेबपैक कॉन्फ़िगर स्निपेट (@ x-yuri के लिए धन्यवाद)। पुराना, वेबपैक 2 स्निपेट:

{
    test: /\.js$/,
    exclude: ['node_modules'],
    loader: 'babel',
    query: {
        babelrc: false,
        presets: [
            ['es2015', { modules: false }],
        ],
    },
},

Comments

इन दिनों (वेबपैक 3), यह शायद इस तरह दिखेगा: module:{rules: [{test: /\.js$/, include: path.resolve('src'), loader: 'babel-loader', options: {babelrc: false, presets: [['env', {modules: false}]]}}]}( जिस्ट )। -loaderप्रत्यय अब वैकल्पिक नहीं है। बचने excludeऔर पसंद करने की कोशिश करें include। स्ट्रिंग्स में शामिल / बाहर काम केवल अगर पूर्ण पथ। queryका नाम बदल दिया गया options।

— x- यूरी

इसके अलावा, यह कृपया स्पष्ट है कि आप नहीं दिखाना चाहते हैं {modules: false}में .babelrcउपयोग करने के लिए सक्षम होने के लिए import'में है webpack.config.babel.js।

— x- यूरी

वेबपैक के-loader लिए 4 प्रत्यय को वापस webpack.js.org/migrate/3/… पर जोड़ना होगा

— kmmbvnr

Answer 5

यह वास्तव में आसान है, लेकिन किसी भी जवाब से यह मेरे लिए स्पष्ट नहीं था, इसलिए यदि कोई और भी मेरी तरह भ्रमित है:

.babelविस्तार से पहले अपने फ़ाइलनाम के हिस्से में संलग्न करें (यह मानते हुए कि आपने babel-registerएक निर्भरता के रूप में स्थापित किया है)।

उदाहरण:

mv webpack.config.js webpack.config.babel.js

Comments

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

— कोकोडोको

वाह यह दिलचस्प है! मुझे नहीं पता था। मुझे इसे फिर से देखना होगा। अजीब फ़ाइल को अभी भी कॉन्फ़िगर करने की आवश्यकता है

— दिमित्री मिंकोवस्की

Answer 6

यह मेरे लिए वेबपैक 4 का उपयोग करके काम किया है:

इन package.json:

"scripts": {
    "dev": "cross-env APP_ENV=dev webpack-serve --require @babel/register"
},

"devDependencies": {
    "@babel/core": "^7.0.0-rc.1",
    "@babel/register": "^7.0.0-rc.1",
    "@babel/preset-env": "^7.0.0-rc.1",
    "babel-plugin-transform-es2015-modules-commonjs": "^6.26.2"
},

"babel": {
  "presets": [
    ["@babel/preset-env", {
      "targets": {
        "node": "current"
      }
    }]
  ],
  "plugins": [
    "transform-es2015-modules-commonjs"
  ]
}

आप स्पष्ट रूप से देख सकते हैं कि प्रत्येक निर्भरता का उपयोग कैसे किया जाता है, इसलिए वहां कोई आश्चर्य नहीं है।

नोट मैं उपयोग कर रहा webpack-serveहूं-require , लेकिन यदि आप webpackइसके बजाय कमांड का उपयोग करना चाहते हैं, तो इसे बदलें webpack --config-register। किसी भी मामले में, @babel/registerयह काम करने के लिए आवश्यक है।

और बस!

yarn dev

और आप es6config में उपयोग करने में सक्षम हैं !

---

के लिए webpack-dev-server, --config-registerविकल्प का उपयोग करें जो webpackकमांड के साथ समान है

---

ध्यान दें:

सं। फ़ाइल को नाम बदलने की आवश्यकता नहीं है webpack.config.babel.js(जैसा कि स्वीकृत उत्तर द्वारा सुझाया गया है)। webpack.config.jsठीक काम करेगा।

Comments

वेब-सेवा की तरह लग रहा है पदावनत। वेबपैक-देव-सर्वर के साथ यह काम करने का कोई विचार है? मैं डॉक्स में इसके लिए कोई विकल्प नहीं देख रहा / रही हूं: webpack.js.org/configuration/dev-server/#devserver

— रामिरेज़

@ChhistianRamirez, --config-registerविकल्प का उपयोग करें । इसके अलावा रेपो के लिए webpack-serveयहां ले जाया गया: github.com/shellscape/webpack-serve

— smac89

ठंडा! मेरे लिए काम किया। यहाँ मेरी स्क्रिप्ट कैसी दिखती है: webpack --config-register @babel/register --config webpack/development.config.jsमुझे विशिष्ट --config करना पड़ा क्योंकि मेरे वेबपैक का विन्यास एक फ़ोल्डर में है। धन्यवाद!

— क्रिश्चियन रामिरेज़

Answer 7

एक और तरीका नोड के लिए तर्क की आवश्यकता का उपयोग करना है:

node -r babel-register ./node_modules/webpack/bin/webpack

इलेक्ट्रॉन-प्रतिक्रिया-बॉयलरप्लेट में इस तरह से मिला , स्क्रिप्ट build-mainऔर build-rendererस्क्रिप्ट देखें।

Comments

शानदार - केवल इलेक्ट्रॉन को देख रहा था और एक अलग सर्वर शुरू कर रहा था, आपके उत्तर ने पूरी तरह से मदद की! :)

— मैट

Answer 8

बाबेल 7 और वेबपैक 4 के लिए विन्यास

package.json

    ...
    "scripts": {
        "start": "webpack-dev-server --env.dev",
        "build": "webpack --env.prod",
    },
    "keywords": [],
    "author": "",
    "license": "ISC",
    "devDependencies": {
        "@babel/core": "^7.0.0",
        "@babel/plugin-proposal-class-properties": "^7.0.0",
        "@babel/preset-env": "^7.0.0",
        "@babel/preset-react": "^7.0.0",
        "@babel/register": "^7.0.0",
        "babel-loader": "^8.0.0",
        ...
        "webpack": "^4.17.2",
        "webpack-cli": "^3.1.0",
        "webpack-config-utils": "^2.3.1",
        "webpack-dev-server": "^3.1.8"

.babelrc

{
    "presets": ["@babel/preset-env", "@babel/preset-react"],
    "plugins": ["@babel/plugin-proposal-class-properties"]
}

webpack.config.babel.js

import webpack from 'webpack';
import { resolve } from 'path';

import { getIfUtils, removeEmpty } from 'webpack-config-utils';

export default env => {
    const { ifProd, ifNotProd } = getIfUtils(env);

    return {
        mode: ifProd('production', 'development'),
        devtool: ifNotProd('cheap-module-source-map'),
        output: {
            path: resolve(__dirname, ifProd('prod', 'dev')),
            filename: 'bundle.js'
        },

Comments

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

— कच्ची पॉवर

Answer 9

नाम बदलें webpack.config.jsकरने के लिए webpack.config.babel.js।

फिर {"presets": ["es2015"]}

हालाँकि, यदि आप babel-cli के लिए एक अलग बैबल कॉन्फिग का उपयोग करना चाहते हैं, तो आपका .babelrc कुछ इस तरह दिख सकता है:

{
  "env": {
    "babel-cli": {
      "presets": [["es2015", {"modules": false}]]
    },
    "production": {
      "presets": ["es2015"]
    },
    "development": {
      "presets": ["es2015"]
    }
  }
}

और package.json में:

{
  "scripts": {
    "babel": "BABEL_ENV='babel-cli' babel src -d dist/babel --source-maps",
    "build-dev": "NODE_ENV='development' webpack -d --progress --profile --colors",
    ...
  },
  ...
}

यह गूंगा है, लेकिन {"modules": false}अगर आप अलग-अलग एनवीएस का उपयोग नहीं करते हैं तो वेबपैक को तोड़ देगा।

.Babelrc के बारे में अधिक जानकारी के लिए, आधिकारिक डॉक्स देखें ।

Answer 10

के लिए टाइपप्रति : सीधे से https://webpack.js.org/configuration/configuration-languages/

npm install --save-dev typescript ts-node @types/node @types/webpack
# and, if using webpack-dev-server
npm install --save-dev @types/webpack-dev-server

फिर अपना लिखने के लिए आगे बढ़ें, जैसे: webpack.config.ts

import path from 'path';
import webpack from 'webpack';

const config: webpack.Configuration = {
  mode: 'production',
  entry: './foo.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'foo.bundle.js'
  }
};

export default config;

अधिक विवरण के लिए लिंक की जांच करें जहां आप एक प्लगइन का उपयोग कर सकते हैं एक अलग tsconfig फ़ाइल के लिए बस वेबपैक कॉन्फिग के लिए यदि आप कॉमनज को लक्षित नहीं कर रहे हैं (जो कि इसके लिए एक req है क्योंकि यह ts- नोड पर निर्भर है)।

Comments

इसके लिए धन्यवाद, webpack.config.js के लिए काम करने वाले मॉड्यूल नहीं मिल सकते हैं, लेकिन इसके बजाय टाइपस्क्रिप्ट का उपयोग करने के लिए खुश हैं जो काम करता है।

— पॉल वॉटसन

Answer 11

टिप्पणी करने के लिए पर्याप्त प्रतिनिधि नहीं है, लेकिन मैं ऊपर दिए गए @Sandrik के समान समाधान के लिए किसी भी टाइपस्क्रिप्ट उपयोगकर्ताओं के लिए जोड़ना चाहता था

मेरे पास दो स्क्रिप्ट हैं जो मैं वेबपैक कॉन्फिगरेशन (जेएस फाइल) की ओर इशारा करता हूं जिसमें ईएस 6 सिंटैक्स होता है।

"start-dev": "./node_modules/.bin/ts-node ./node_modules/webpack-dev-server/bin/webpack-dev-server.js --config ./webpack/webpack.config.dev.js"

तथा

"build": "./node_modules/.bin/ts-node ./node_modules/webpack/bin/webpack.js --config webpack/webpack.config.js"

Answer 12

Npm स्क्रिप्ट के साथ मेरा सबसे अच्छा तरीका है

node -r babel-register ./node_modules/webpack/bin/webpack

और बाबेल की आवश्यकता के अनुसार बाकी लिपियों को कॉन्फ़िगर करें

Answer 13

दस्तावेजों के टन के बाद ...

1. बस es2015 पूर्व निर्धारित स्थापित करें (env !!! नहीं) और इसे जोड़ें

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

2. अपने नाम बदलें webpack.config.jsकरने के लिएwebpack.config.babel.js

Answer 14

वेबपैक 4 और बैबल 7 का उपयोग करना

ES2015 का उपयोग करने के लिए एक वेबपैक कॉन्फ़िगरेशन फ़ाइल सेटअप करने के लिए कोलाहल की आवश्यकता होती है:

देव निर्भरता स्थापित करें:

npm i -D  webpack \
          webpack-cli \
          webpack-dev-server \
          @babel/core \
          @babel/register \
          @babel/preset-env
npm i -D  html-webpack-plugin

एक .babelrcफ़ाइल बनाएँ :

{
  "presets": ["@babel/preset-env"]
}

अपना वेबपैक कॉन्फिगर बनाएँ webpack.config.babel.js:

import { resolve as _resolve } from 'path';
import HtmlWebpackPlugin from 'html-webpack-plugin';

const config = {
  mode: 'development',
  devServer: {
    contentBase: './dist'
  },
  plugins: [
    new HtmlWebpackPlugin({
      filename: 'index.html',
      template: 'src/index.html'
    })
  ],
  resolve: {
    modules: [_resolve(__dirname, './src'), 'node_modules']
  }
};

export default config;

अपनी स्क्रिप्ट बनाएं package.json:

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack",
    "start": "webpack-dev-server --open"
  },

भागो npm run buildऔर npm start।

वेबपैक कॉन्फ़िगरेशन निम्न निर्देशिका संरचना के साथ एक नमूना परियोजना पर आधारित है:

├── README.md
├── package-lock.json
├── package.json
├── src
│   ├── Greeter.js
│   ├── index.html
│   └── index.js
└── webpack.config.babel.js

नमूना परियोजना: बेबेल का उपयोग करते हुए वेबपैक कॉन्फ़िगरेशन भाषा

Answer 15

वेब 6 में es6 जोड़ना एक 3 चरण प्रक्रिया है

1. में webpack.config.js ऐड

   module:{
   
             rules:[
               {
                 test: /\.js$/,
                 loader: 'babel-loader'
               }
             ]
          }
   

   2. एक .babel.rc बनाएं और उसके अंदर जोड़ें

{
    "presets": ["@babel/env", "@babel/react"],
    "plugins": [
        [
          "@babel/plugin-proposal-class-properties",
        ]
      ]
}

3. in package.json add

npm install @babel/core --save-dev
npm install @babel/preset-env --save-dev
npm install @babel/preset-react --save-dev
npm install @babel/plugin-proposal-class-properties --save-dev
npm install babel-loader --save-dev

Answer 16

आप नहीं कर सकते। आपको इसे babelया तो कॉमनजेस में बदलना है, या इसके साथ esm।

https://github.com/webpack/webpack-cli/issues/282

लेकिन तुम दौड़ सकते हो webpack -r esm @babel/register