ওয়েবপ্যাক এবং ব্যাবেল সহ এই ফাইলের ধরণটি পরিচালনা করতে আপনার একটি উপযুক্ত লোডার দরকার হতে পারে

Question

আমি ইএস assets টি সম্পদ সংকলন করতে বাবেলের সাথে ওয়েবপ্যাকটি ব্যবহার করার চেষ্টা করছি, তবে আমি নিম্নলিখিত ত্রুটি বার্তাটি পাচ্ছি:

You may need an appropriate loader to handle this file type.
| import React from 'react';
| /*
| import { render } from 'react-dom'

এখানে আমার ওয়েবপ্যাক কনফিগারেশনটি দেখতে কেমন:

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

module.exports = {
  entry: './index',
  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'bundle.js',
    publicPath: '/dist/'
  },
  module: {
    loaders: [
      {
        test: /\.jsx?$/,
        loader: 'babel-loader',
        exclude: /node_modules/
      }
    ]
  }
}

এখানে মিডলওয়্যার পদক্ষেপ যা ওয়েবপ্যাকটি ব্যবহার করে:

var webpack = require('webpack');
var webpackDevMiddleware = require('webpack-dev-middleware');
var config = require('./webpack.config');

var express = require('express');
var app = express();
var port = 3000;

var compiler = webpack(config);
app.use(webpackDevMiddleware(compiler, {
  noInfo: true,
  publicPath: config.output.publicPath
}));

app.get('/', function(req, res) {
  res.sendFile(__dirname + '/index.html');
});

app.listen(port, function(err) {
  console.log('Server started on http://localhost:%s', port);
});

আমার সমস্ত সূচক.জেএস ফাইলটি আমদানি করছে প্রতিক্রিয়া, তবে মনে হচ্ছে 'বাবেল-লোডার' কাজ করছে না।

আমি 'ব্যাবেল-লোডার' 6.0.0 ব্যবহার করছি।

Comments

আমারও একই সমস্যা হচ্ছে babel-preset-es2015 ইনস্টল করা আছে এবং এখনও এটিতে একটি রিঅ্যাক্টডম.রেেন্ডার () কলটিতে জেএসএক্স ব্যবহার করার সমস্যা রয়েছে: এস

— সামথিং

আপনার ফাইলের এক্সটেনশনগুলি কী? তারা কি জেএস ফাইল বা জেএসএক্স ফাইল? আপনার লোডার কেবল jsx এক্সটেনশানযুক্ত ফাইলগুলি বিবেচনা করে, সমস্যা হতে পারে

— কিউবুক

এই লিঙ্কটিতে আপনার সমস্যাটি 100% সমাধান হয়ে উঠবে [ স্ট্যাকওভারফ্লো

— প্রশ্নগুলি / 50149729/…

এই লিঙ্ক-এ আপনার সমস্যা 100% সমাধান হয়ে যাবে next.js সিএসএস আমদানি

— Mehrdad Masoumi

Answer 1

আপনাকে es2015প্রিসেটটি ইনস্টল করতে হবে :

npm install babel-preset-es2015

এবং তারপরে কনফিগার করুন babel-loader:

{
    test: /\.jsx?$/,
    loader: 'babel-loader',
    exclude: /node_modules/,
    query: {
        presets: ['es2015']
    }
}

Comments

আমি প্রিসেটগুলি ইনস্টল করেছি এবং ব্যাবেল-লোডার ইনস্টলও করেছি। এটি এখনও একই ত্রুটিটি দিচ্ছে

— উমং গুপ্ত

@ ইউজি_ আপনাকে আলাদা প্রশ্ন জিজ্ঞাসা করতে হবে। আমাদের আপনার সম্পূর্ণ কনফিগারেশন এবং সম্পূর্ণ ত্রুটি বার্তাটি দেখতে হবে।

— লগানফস্মিথ

@ ইউজি_ আপনি কি সমাধান খুঁজে পেয়েছেন?

— সরসরংল্ট

Answer 2

আপনার es2015 ব্যাবেল প্রিসেট ইনস্টল রয়েছে তা নিশ্চিত করুন ।

একটি উদাহরণ প্যাকেজ.জসন ডিভিনিডেন্সিগুলি হ'ল:

"devDependencies": {
  "babel-core": "^6.0.20",
  "babel-loader": "^6.0.1",
  "babel-preset-es2015": "^6.0.15",
  "babel-preset-react": "^6.0.15",
  "babel-preset-stage-0": "^6.0.15",
  "webpack": "^1.9.6",
  "webpack-dev-middleware": "^1.2.0",
  "webpack-hot-middleware": "^2.0.0"
},

এখন আপনার ওয়েবপ্যাক কনফিগারেশনে ব্যাবেল -লোডার কনফিগার করুন :

{ test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/ }

নোড মডিউলগুলি যেখানে আপনার প্রকল্পের মূলটিতে একটি .babelrc ফাইল যুক্ত করুন :

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

অধিক তথ্য:

• babeljs.io - ওয়েবপ্যাক সহ ব্যাবেল ব্যবহার করা

• babeljs.io - .belrc এ ডক্স

• প্রতিক্রিয়া-ওয়েবপ্যাক-কুকবুক - ওয়েবপ্যাক দিয়ে প্রতিক্রিয়া কনফিগার করুন

• একটি প্রতিক্রিয়া-ওয়েবপ্যাক-উদাহরণ রেপো

Comments

। babelrc ফাইলটি যা আমি অনুপস্থিত ছিল, ধন্যবাদ! এটি সম্পূর্ণ টিউটোরিয়াল, স্বীকৃত উত্তরটি আপনাকে এখনও পর্যন্ত পেয়ে যায়।

— মাইকে

পার্শ্ব-তথ্য: বিকল্পগুলিতে "পর্যায় -0" সম্পর্কে এতটা নিশ্চিত নয় (এছাড়াও .belrc এ কনফিগার করা যেতে পারে): কিছু বৈশিষ্ট্য এটি অফিসিয়াল ইএস-স্ট্যান্ডার্ডগুলিতে তৈরি নাও করতে পারে, তাই আমি সাধারণত আরও নিরাপদ "স্টেজ -3" ব্যবহার করি।

— ক্রিস্টোফ কলিন

Answer 3

আপনি যদি ওয়েবপ্যাক> 3 ব্যবহার করে থাকেন তবে আপনাকে কেবল ইনস্টল করতে হবে babel-preset-env, যেহেতু এই পূর্বনির্ধারিত অ্যাকাউন্টগুলি es2015, es2016 এবং es2017 এর জন্য।

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

module.exports = {
    entry: {
        app: './app/App.js',
        vendor: ["react","react-dom"]
    },
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, '../public')
    },
    module: {
        rules: [{
            test: /\.jsx?$/,
            exclude: /node_modules/,
            use: {
                loader: 'babel-loader?cacheDirectory=true',
            }
        }]
    }
};

এটি আমার .babelrcফাইল থেকে এর কনফিগারেশনটি তুলেছে :

{
    "presets": [
        [
            "env",
            {
                "targets": {
                    "browsers":["last 2 versions"],
                    "node":"current"
                }
            }
        ],["react"]
    ]
}

Answer 4

ওভারটাইমের আপডেট এবং পরিবর্তনের কারণে সংস্করণের সামঞ্জস্যতা কনফিগারেশনে সমস্যা সৃষ্টি করে।

আপনার ওয়েবপ্যাক.কমফিগ.জেএস এর মতো হওয়া উচিত আপনি কখনই ফিট হয়ে যাবেন তাও কনফিগার করতে পারেন।

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

module.exports = {
  entry: './src/js/app.js',
  devtool: 'source-map',
    mode: 'development',
  module: {
    rules: [{
      test: /\.js$/,
      exclude: /node_modules/,
      use: ["babel-loader"]
    },{
      test: /\.css$/,
      use: ['style-loader', 'css-loader']
    }]
  },
  output: {
    path: path.resolve(__dirname, './src/vendor'),
    filename: 'bundle.min.js'
  }
};

আরোগ্যের পরিবর্তনটি লক্ষ্য করার জন্য আর একটি বিষয় আপনার বাবেল ডকুমেন্টেশন https://babeljs.io/docs/en/presets পড়তে হবে

.babelrc

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

নোট: আপনার প্যাকেজ.জসন নির্ভরতাতে উপরের @ বাবেল / প্রিসিট-এনভি এবং @ বাবেল / প্রিসেট-প্রতিক্রিয়াটি ইনস্টল করা আছে তা নিশ্চিত করতে হবে

Comments

যুক্ত করা @babel/preset-reactআমার জন্য এটি স্থির করে।

— kyw

Answer 5

ব্যাবেল টিম আপডেট:

আমরা সুপার-উত্সাহিত যে আপনি ES2015 সিনট্যাক্সটি ব্যবহার করার চেষ্টা করছেন, তবে বার্ষিক প্রিসেটগুলি চালিয়ে যাওয়ার পরিবর্তে টিমটি ব্যাবেল-প্রিসেট-এনভিভ ব্যবহার করার পরামর্শ দেয়। ডিফল্টরূপে, এর ES55 + ES5 তে সংকলন করতে পূর্ববর্তী প্রিসেটগুলির মতো একই আচরণ রয়েছে

আপনি যদি বাবেল সংস্করণ 7 ব্যবহার করে থাকেন তবে আপনার কনফিগারেশনে আপনাকে এনপিএম ইনস্টল @ বাবেল / প্রিসেট- এনভ এবং চালাতে হবে এবং "প্রিসেট": ["বাবেল / প্রিসেট-এনভি"] রাখতে হবে .babelrc।

এটি এসএস 5 ট্রান্সপ্লেরড কোডে সর্বশেষতম বৈশিষ্ট্যগুলি সংকলন করবে :

পূর্বশর্ত :

1. ওয়েবপ্যাক 4+
2. বাবেল 7+

পদক্ষেপ -১:: এনপিএম ইনস্টল - সেভ-ডেভ @ বাবেল / প্রিসেট-এনভিভ

পদক্ষেপ -২:JSX এসএস 5 ব্যাবেলে কোড সংকলনের জন্য বিক্রিয়া এক্সটেনশন ফাইলটিকে স্থানীয় ব্রাউজারের বোধগম্য কোডে @babel/preset-reactরূপান্তর করতে প্যাকেজ সরবরাহ করে jsx।

পদক্ষেপ -3: এনপিএম ইনস্টল - সেভ-ডেভ @ বাবেল / প্রিসেট-প্রতিক্রিয়া

পদক্ষেপ -4:.babelrc আপনার প্রকল্পের মূল পথের ভিতরে ফাইল তৈরি করুন যেখানে webpack.config.jsউপস্থিত রয়েছে।

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

পদক্ষেপ -5: webpack.config.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    mode: 'development',
    entry: path.resolve(__dirname, 'src/index.js'),
    output: {
        path: path.resolve(__dirname, 'output'),
        filename: 'bundle.js'
    },
    resolve: {
        extensions: ['.js', '.jsx']
    },
    module: {
        rules: [{
                test: /\.(js|jsx)$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader'
                }
            },
            {
                test: /\.css$/i,
                use: ['style-loader', 'css-loader'],
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: "./public/index.html",
            filename: "./index.html"
         })
    ]
}

Answer 6

টাইপস্ক্রিপ্ট ব্যবহার করার সময়:

আমার ক্ষেত্রে আমি তাদের ডকুমেন্টেশন পৃষ্ঠা থেকে ওয়েবপ্যাক v3.11 এর নতুন সিনট্যাক্সটি ব্যবহার করেছি আমি কেবল CSS এবং স্টাইল লোডার কনফিগারেশনটি তাদের ওয়েবসাইট তৈরি করেছি। মন্তব্য করা আউট কোড (নতুন এপিআই) এর ফলে এই ত্রুটি দেখা দেয়, নীচে দেখুন।

  module: {
        loaders: [{
                test: /\.ts$/,
                loaders: ['ts-loader']
            },
            {
                test: /\.css$/,
                loaders: [
                    'style-loader',
                    'css-loader'
                ]
            }
        ]
        // ,
        // rules: [{
        //     test: /\.css$/,
        //     use: [
        //         'style-loader',
        //         'css-loader'
        //     ]
        // }]
    }

সঠিক উপায় এটি করা হয়:

    {
        test: /\.css$/,
        loaders: [
            'style-loader',
            'css-loader'
        ]
    }

লোডার সম্পত্তি অ্যারে মধ্যে।

Answer 7

এই আমাকে একটি স্পিন জন্য নিক্ষেপ। কৌণিক 7, ওয়েবপ্যাকটি আমি এই নিবন্ধটি পেয়েছি তাই আমি নিবন্ধটি https://www.edc4it.com/blog/web/heelorld-angular2.html ক্রেডিট দিতে চাই

সমাধানটি কী: আপনার উপাদান ফাইলটিতে //। ওয়েবপ্যাক হিসাবে টেমপ্লেট ব্যবহার করুন এটি পাঠ্যের টেমপ্লেট হিসাবে বিবেচনা করবে: প্রয়োজন ('

কর্মের এটি ব্যাখ্যার জন্য এনপিএম ইনস্টল করুন এইচটিএমএল-লোডার - সেভ-ডেভ {পরীক্ষা: / html$/, ব্যবহার করুন: "এইচটিএমএল-লোডার"},

আশা করি এটি কারও সাহায্য করবে