আমি কীভাবে ওয়েবপ্যাক.কনফিগ.জেজে ES6 ব্যবহার করতে পারি?

Question

কীভাবে ওয়েবপ্যাক.কনফাইগে ES6 ব্যবহার করবেন? এই রেপোটি https://github.com/kriasoft/react-starter-kit এর মতো ?

এই ক্ষেত্রে:

এটি ব্যবহার করে

import webpack from 'webpack';

পরিবর্তে

var webpack = require('webpack');

এটি প্রয়োজনের চেয়ে বেশ কৌতূহল is

Comments

@ এটি একটি প্রশ্ন জিজ্ঞাসা করুন। আমি এটা বুঝতে পারি না। কারণ আমি যদি ওয়েবপ্যাক.config এ এস synt সিনট্যাক্স ব্যবহার করি তবে আমি ত্রুটিগুলি পাই।

— হুইশার

প্রশ্নটি কীভাবে ওয়েবপ্যাক কোডফাইজে এস 6 ব্যবহার করবেন। এটি আমার কাছে স্পষ্ট বলে মনে হচ্ছে। আমি একটি উদাহরণ দিয়ে আমার প্রশ্নটি আপডেট করি update

— হুইশার

ফাইলটি node.js দ্বারা পার্স করা হয়েছে, যা ডিফল্টরূপে es6 সমর্থন করে না। এটি চালু করার জন্য কমান্ড লাইন পতাকা রয়েছে, তবে সেগুলি কী তা আমি জানি না। আপনি নোডের পরিবর্তে io.js ব্যবহার করার চেষ্টা করতে পারেন

— কেজে তাসানকটিসিডিস

@ কেজেটসানাকটসিডিস ইঙ্গিতটির জন্য ধন্যবাদ তবে আমিও চেষ্টা করেছি

— হুইস্টার

আমি এটি চেষ্টা করে দেখিনি, তবে "নোড --হারমনি which webpack" চালানোর চেষ্টা করুন

— কেজে তাসানকটিসিডিস

Answer 1

আপনার কনফিগারেশন হিসাবে নামকরণ চেষ্টা করুন webpack.config.babel.js। আপনি প্রকল্পে বাবেল-নিবন্ধ অন্তর্ভুক্ত করা উচিত । প্রতিক্রিয়া-রাউটার-বুটস্ট্র্যাপের উদাহরণ ।

ওয়েবপ্যাক এই কাজটি করার জন্য অভ্যন্তরীণভাবে ব্যাখ্যার উপর নির্ভর করে ।

Comments

এটি আমার পক্ষে কাজ করেছে। আমি npm runএই স্ক্রিপ্টের: webpack --config webpack.config.babel.js।

— মাদুর গেসেল

আমি মনে করি এটি সরাসরি ছাড়াই এটি বাছাই করতে সক্ষম হতে পারে --config।

— জুহো ভেস্পলিনেন

আমি মনে করি এটি যুক্ত করা উচিত যে babel-loader

— মডিউলটিও

প্রকৃতপক্ষে, এটি ঠিকঠাক কাজ করে, কেবলমাত্র একটি .babelrc ফাইলটিতে আপনার বাবেলের প্রিসেটগুলি সেট করা দরকার।

— পিটার

এটিকে কাজ করতে আমি এই নির্দিষ্ট echo '{ "presets": ["es2015"] }' > .babelrc

— প্রিসেটটি ব্যবহার করেছি

Answer 2

@ পেট্রাব্য যা পরামর্শ দেয় তার বিকল্প হিসাবে আপনি 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

PS : যখন আপনাকে আরও জটিল বিল্ড স্টেপগুলি বাস্তবায়নের প্রয়োজন হবে তখন জাভাস্ক্রিপ্ট এপিআইয়ের মাধ্যমে ওয়েবপ্যাক কল করা আরও ভাল পদ্ধতির হতে পারে (কমান্ড লাইনের মাধ্যমে কল করার চেয়ে)। যেমন সার্ভার-সাইড বান্ডিল প্রস্তুত হওয়ার পরে, নোড.জেএস অ্যাপ্লিকেশন সার্ভার স্টার্টআপ হয় এবং ঠিক নোড.জেএস সার্ভার শুরু হওয়ার পরে ব্রাউজারসিঙ্ক ডেভ সার্ভারটি চালু করুন।

আরো দেখুন:

• প্রতিক্রিয়া স্টার্টার কিট ( package.json/scripts, tools/bundle.js, tools/webpack.config.js)
• প্রতিক্রিয়া স্ট্যাটিক boilerplate ( run.js, webpack.config.js, node run)
• আপনার গুলপ.জেএস এর দরকার নেই

Comments

যদিও কিছুটা জটিল, এটি হ'ল প্রতিক্রিয়া-স্টার্টার-কিটটি ব্যবহার করে। এটি সেরা উত্তর হওয়া উচিত।

— অন্ধকারবাবি 123

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

ওয়েবপ্যাক ২ দিয়ে @ জুহোর সমাধানটি পেতে আমার একটি সমস্যা হয়েছিল Web ওয়েবপ্যাক স্থানান্তর ডক্স আপনাকে বাবেল মডিউল পার্সিংটি চালু করার পরামর্শ দেয়:

এটি লক্ষণীয় গুরুত্বপূর্ণ যে আপনি বাবেলকে এই মডিউল চিহ্নগুলিকে পার্স না করতে বলবেন যাতে ওয়েবপ্যাকগুলি সেগুলি ব্যবহার করতে পারে। আপনি আপনার .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 তে ওয়েবপ্যাক কনফিগার স্নিপেট আপডেট হয়েছে (@ এক্স-ইউরি ধন্যবাদ)। পুরাতন, ওয়েবপ্যাক 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প্রত্যয় আর alচ্ছিক। এড়াতে excludeএবং পছন্দ করার চেষ্টা করুন include। স্ট্রিংগুলিতে কেবল অন্তর্ভুক্ত পথগুলি যদি কাজ অন্তর্ভুক্ত / বাদ দেয় । queryনামকরণ করা হয়েছিল options।

— এক্স-ইউরি

এছাড়াও, এটা দয়া করে পরিষ্কার যে আপনার চাই না করতে {modules: false}মধ্যে .babelrcব্যবহার করতে পাবে import's webpack.config.babel.js।

— এক্স-ইউরি

ওয়েবপ্যাকের জন্য 4 -loaderপ্রত্যয় যুক্ত করতে হবে webpack.js.org/migrate/3/…

— kmmbvnr

Answer 5

এটি সত্যিই সহজ, তবে উত্তরগুলির কোনওটি থেকে তা আমার কাছে স্পষ্ট ছিল না, তাই যদি অন্য কেউ আমার মতো বিভ্রান্ত হয়:

.babelএক্সটেনশনের আগে আপনার ফাইলের নামের অংশটি যুক্ত করুন (ধরে নিলেন যে আপনি babel-registerনির্ভরতা হিসাবে ইনস্টল করেছেন)।

উদাহরণ:

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

Comments

আমি ব্যাবেল ব্যবহার করি না কারণ ওয়েবপ্যাক নিজেই ইএস 6 মডিউল সিনট্যাক্স সমর্থন করে এবং আমার প্রকল্পটি ইএস 5 এর সাথে সামঞ্জস্য হওয়ার দরকার নেই doesn't এটি কেবলমাত্র কনফিগার ফাইল যা এখনও প্রয়োজন 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

এবং আপনি es6কনফিগার ব্যবহার করতে পারবেন !

---

কারণ কমান্ডের মতো অপশনটি webpack-dev-serverব্যবহার করুন--config-registerwebpack

---

বিঃদ্রঃ:

কনফিগার ফাইলটির নতুন নামকরণের প্রয়োজন নেই webpack.config.babel.js(স্বীকৃত উত্তরের পরামর্শ অনুসারে)। webpack.config.jsঠিক কাজ করবে।

Comments

দেখে মনে হচ্ছে ওয়েব-সার্ভ ছিন্ন করা হয়েছে। ওয়েবপ্যাক-ডেভ-সার্ভার দিয়ে এই কাজটি কীভাবে করা যায় তার কোনও ধারণা? আমি ডক্সে এটির জন্য একটি প্রয়োজনীয় বিকল্পটি দেখছি না: ওয়েবপ্যাক.জেএস.আর.এস.সি.

— দেবদেহী

@ ক্রিশ্চিয়ান রামিরেজ, --config-registerবিকল্পটি ব্যবহার করুন । এছাড়াও রেপো webpack-serveএখানে সরানো হয়েছে: github.com/shellcreen/webpack- সংরক্ষণ

— smac89

শান্ত! যে আমার জন্য কাজ করে। আমার স্ক্রিপ্টটি দেখতে কেমন তা এখানে: webpack --config-register @babel/register --config webpack/development.config.jsআমার ওয়েবপ্যাক কনফিগারেশন কোনও ফোল্ডারে থাকার কারণে ---- কনফিগ নির্দিষ্ট করতে হয়েছিল। ধন্যবাদ!

— ক্রিশ্চিয়ান রামিরেজ

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

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

— কাঁচা শক্তি

Answer 9

নাম পরিবর্তন webpack.config.jsকরুন webpack.config.babel.js।

তারপরে .babelrc এ: {"presets": ["es2015"]}

তবে, আপনি যদি ব্যাবেল-ক্লাইয়ের জন্য আলাদা বাবেল কনফিগারেশন ব্যবহার করতে চান তবে আপনার .belrc এটিকে দেখতে দেখতে কিছুটা দেখতে পাবেন:

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

প্যাকেজ.জসনে:

{
  "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}আপনি যদি বিভিন্ন envs ব্যবহার না করেন তবে ওয়েবপ্যাকটি ভেঙে যাবে।

.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 ফাইল রাখতে আপনি একটি প্লাগইন ব্যবহার করতে পারেন এমন আরও তথ্যের জন্য লিঙ্কটি পরীক্ষা করে দেখুন (এটি টিএস-নোডের উপর নির্ভর করে বলে এটি কাজ করার জন্য একটি রেকর্ড) is

Comments

এর জন্য ধন্যবাদ, ওয়েবপ্যাক.কনফিগ.জেএস এর জন্য মডিউলগুলি কাজ করতে পারা যায় নি তবে টাইপস্ক্রিপ্ট ব্যবহার করে খুশি যা এর ফলে কাজ করে।

— পল ওয়াটসন

Answer 11

মতামত দেওয়ার মতো পর্যাপ্ত প্রতিনিধি নেই তবে আমি যে কোনও টাইপসক্রিপ্ট ব্যবহারকারীদের জন্য উপরে @ সানড্রিকের অনুরূপ সমাধানটি যুক্ত করতে চেয়েছিলাম

আমার কাছে দুটি স্ক্রিপ্ট রয়েছে যা আমি ওয়েবপ্যাক কনফিগারেশনে (জেএস ফাইলগুলি) যা ES6 সিনট্যাক্স ধারণ করে তাতে নির্দেশিত ব্যবহার করি।

"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

এনপিএম স্ক্রিপ্ট সহ আমার সেরা পদ্ধতিরটি

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

এবং বাবেলের জন্য আপনার প্রয়োজনীয়তা অনুসারে বাকী স্ক্রিপ্টগুলি কনফিগার করুন

Answer 13

কয়েক দস্তাবেজ পরে ...

1. কেবল es2015 প্রিসেট ইনস্টল করুন (এনভ !!! না) এবং এটিকে যুক্ত করুন

   .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 যুক্ত করা একটি 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. মধ্যে package.json অ্যাড

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