“Bạn có thể cần một trình tải thích hợp để xử lý loại tệp này” với Webpack và Babel

Tôi đang cố gắng sử dụng Webpack với Babel để biên dịch nội dung ES6, nhưng tôi nhận được thông báo lỗi sau:

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

Đây là cấu hình Webpack của tôi trông như thế nào:

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

Đây là bước phần mềm trung gian sử dụng 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);
});

Tất cả những gì tệp index.js của tôi đang thực hiện là nhập phản ứng, nhưng có vẻ như 'trình tải babel' không hoạt động.

Tôi đang sử dụng 'babel-loader' 6.0.0.

Bạn cần cài đặt cài đặt es2015trước:

npm install babel-preset-es2015

và sau đó định cấu hình babel-loader:

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

Đảm bảo rằng bạn đã cài đặt sẵn babel es2015 .

Một ví dụ package.json devDependencies là:

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

Bây giờ hãy định cấu hình trình tải babel trong cấu hình gói web của bạn:

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

thêm tệp .babelrc vào thư mục gốc của dự án của bạn nơi chứa các mô-đun nút:

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

Thêm thông tin:

• babeljs.io - sử dụng babel với webpack

• babeljs.io - tài liệu trên .babelrc

• react-webpack-cookbook - định cấu hình react với webpack

• repo phản ứng-webpack-ví dụ

Nếu bạn đang sử dụng Webpack> 3 thì bạn chỉ cần cài đặt babel-preset-env, vì tài khoản cài đặt trước này dành cho es2015, es2016 và 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',
            }
        }]
    }
};

Thao tác này lấy cấu hình của nó từ .babelrctệp của tôi :

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

Do các bản cập nhật và thay đổi ngoài giờ, tính tương thích của phiên bản bắt đầu gây ra sự cố với cấu hình.

Webpack.config.js của bạn sẽ giống như thế này, bạn cũng có thể định cấu hình mức độ phù hợp của bạn.

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

Một điều khác cần lưu ý đó là sự thay đổi của args, bạn nên đọc tài liệu babel https://babeljs.io/docs/en/presets

.babelrc

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

NB: bạn phải đảm bảo rằng bạn đã cài đặt @ babel / preset-env & @ babel / preset-react ở trên trong các phần phụ thuộc package.json của mình

CẬP NHẬT ĐỘI NGŨ NHÃN:

Chúng tôi rất vui khi bạn đang cố gắng sử dụng cú pháp ES2015, nhưng thay vì tiếp tục đặt trước hàng năm, nhóm nghiên cứu khuyên bạn nên sử dụng babel-preset-env. Theo mặc định, nó có hành vi giống như các cài đặt trước để biên dịch ES2015 + sang ES5

Nếu bạn đang sử dụng Babel phiên bản 7, bạn sẽ cần chạy npm install @ babel / preset-env và có "cài đặt trước": ["@ babel / preset-env"] trong .babelrccấu hình của bạn .

Điều này sẽ biên dịch tất cả các tính năng mới nhất để ES5 transpiled mã:

Điều kiện tiên quyết :

1. Webpack 4+
2. Babel 7+

Bước 1:: npm install --save-dev @ babel / preset-env

Bước 2: Để biên dịch JSXmã sang es5, babel cung cấp @babel/preset-reactgói để chuyển đổi jsxtệp mở rộng phản ứng thành mã dễ hiểu của trình duyệt gốc.

Bước 3: Cài đặt npm --save-dev @ babel / preset-react

Bước 4: Tạo .babelrctệp bên trong đường dẫn đường dẫn gốc của dự án của bạn nơi webpack.config.jstồn tại.

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

Bước-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"
         })
    ]
}

Khi sử dụng Typecript:

Trong trường hợp của tôi, tôi đã sử dụng cú pháp mới hơn của webpack v3.11 từ trang tài liệu của họ, tôi vừa sao chép biểu mẫu cấu hình trình tải kiểu css và trang web của họ. Mã nhận xét ra (API mới hơn) gây ra lỗi này, hãy xem bên dưới.

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

Cách đúng là đặt điều này:

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

trong mảng thuộc tính bộ tải.

Cái này ném cho tôi một vòng quay. Angular 7, Webpack Tôi đã tìm thấy bài viết này vì vậy tôi muốn ghi công cho Bài viết https://www.edc4it.com/blog/web/helloworld-angular2.html

Giải pháp là gì: // trên tệp thành phần của bạn. sử dụng mẫu làm webpack sẽ coi nó như mẫu văn bản: request ('./ process.component.html')

để nghiệp giải thích nó npm, hãy cài đặt thêm html-loader --save-dev {test: /.html$/, sử dụng: "html-loader"},

Hy vọng điều này sẽ giúp ai đó