“ คุณอาจต้องใช้ตัวโหลดที่เหมาะสมเพื่อจัดการไฟล์ประเภทนี้” ด้วย Webpack และ Babel

Question 1

ฉันพยายามใช้ Webpack กับ Babel เพื่อรวบรวมเนื้อหา ES6 แต่ฉันได้รับข้อความแสดงข้อผิดพลาดต่อไปนี้:

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

นี่คือลักษณะการกำหนดค่า Webpack ของฉัน:

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

นี่คือขั้นตอนมิดเดิลแวร์ที่ใช้ประโยชน์จาก Webpack:

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

ไฟล์ index.js ทั้งหมดของฉันกำลังทำอยู่คือการนำเข้าการตอบสนอง แต่ดูเหมือนว่า 'babel-loader' จะไม่ทำงาน

ฉันใช้ 'babel-loader' 6.0.0

Question 2

คุณต้องติดตั้งes2015ค่าที่ตั้งไว้ล่วงหน้า:

npm install babel-preset-es2015

แล้วกำหนดค่าbabel-loader:

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

Question 3

ตรวจสอบให้แน่ใจว่าคุณได้ติดตั้งค่าที่ตั้งไว้ล่วงหน้าของ babel es2015แล้ว

ตัวอย่างpackage.json devDependencies คือ:

"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"
},

ตอนนี้กำหนดค่าbabel-loaderในการกำหนดค่าwebpackของคุณ:

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

เพิ่มไฟล์. babelrcในรูทของโปรเจ็กต์ของคุณโดยที่โมดูลโหนดคือ:

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

ข้อมูลเพิ่มเติม:

Question 4

หากคุณใช้ Webpack> 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"]
    ]
}

Question 5

เนื่องจากการอัปเดตและการเปลี่ยนแปลงล่วงเวลาความเข้ากันได้ของเวอร์ชันจึงทำให้เกิดปัญหากับการกำหนดค่า

webpack.config.js ของคุณควรเป็นแบบนี้คุณยังสามารถกำหนดค่าได้ว่าจะให้พอดีแค่ไหน

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

อีกสิ่งหนึ่งที่สังเกตเห็นว่าเป็นการเปลี่ยนแปลงของ args คุณควรอ่านเอกสารของ babel https://babeljs.io/docs/en/presets

.babelrc

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

หมายเหตุ: คุณต้องแน่ใจว่าคุณมี @ babel / preset-env & @ babel / preset-react ที่ติดตั้งไว้ในการอ้างอิง package.json ของคุณ

Question 6

อัปเดตทีม BABEL:

เรารู้สึกตื่นเต้นเป็นอย่างยิ่งที่คุณพยายามใช้ไวยากรณ์ ES2015 แต่แทนที่จะใช้การตั้งค่าล่วงหน้าแบบรายปีต่อเนื่องทีมงานขอแนะนำให้ใช้ babel-preset-env โดยค่าเริ่มต้นจะมีลักษณะการทำงานเหมือนกับการตั้งค่าล่วงหน้าก่อนหน้านี้ในการคอมไพล์ ES2015 + ถึง ES5

หากคุณใช้Babel เวอร์ชัน 7คุณจะต้องเรียกใช้ npm install @ babel / preset-envและมี "presets": ["@ babel / preset-env"] ใน.babelrcการกำหนดค่าของคุณ

สิ่งนี้จะรวบรวมคุณสมบัติล่าสุดทั้งหมดไปยังes5 Transpiled code:

ข้อกำหนดเบื้องต้น :

Webpack 4+
บาเบล 7+

ขั้นตอนที่ 1:: npm install --save-dev @ babel / preset-env

ขั้นตอนที่ 2:ในการคอมไพล์JSXโค้ดไปยัง es5 babel มี@babel/preset-reactแพ็คเกจสำหรับแปลงjsxไฟล์ส่วนขยายreact เป็นโค้ดที่เข้าใจได้ในเบราว์เซอร์

ขั้นตอนที่ 3: การติดตั้ง npm --save-dev @ babel / preset-react

ขั้นตอนที่ 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"
         })
    ]
}

Question 7

เมื่อใช้ typescript:

ในกรณีของฉันฉันใช้รูปแบบใหม่ของ webpack v3.11 จากหน้าเอกสารของพวกเขาฉันเพิ่งคัดลอกการกำหนดค่า css และ style loaders จากเว็บไซต์ของพวกเขา รหัสที่แสดงความคิดเห็น (API ที่ใหม่กว่า) ทำให้เกิดข้อผิดพลาดนี้โปรดดูด้านล่าง

  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'
        ]
    }

ในอาร์เรย์ของคุณสมบัติตัวโหลด

Question 8

อันนี้โยนให้ฉันหมุน Angular 7, Webpack ฉันพบบทความนี้ดังนั้นฉันจึงต้องการให้เครดิตกับบทความ https://www.edc4it.com/blog/web/helloworld-angular2.html

วิธีแก้ปัญหาคืออะไร: // ในไฟล์คอมโพเนนต์ของคุณ ใช้เทมเพลตเป็น webpack จะถือว่าเป็นเทมเพลตข้อความ: ต้องใช้ ('./ process.component.html')

สำหรับกรรมในการตีความ npm ติดตั้งเพิ่ม html-loader --save-dev {test: /.html$/, use: "html-loader"},

หวังว่านี่จะช่วยใครสักคน