từ chối trách nhiệm. babel-loader là gói của bên thứ ba do các thành viên cộng đồng duy trì, gói này có thể không có hỗ trợ, chính sách bảo mật hoặc giấy phép giống như gói webpack và gói này không được webpack duy trì
README này dành cho babel-loader v8 + Babel v7 Kiểm tra 7. nhánh x cho tài liệu với Babel v6
Gói này cho phép chuyển mã các tệp JavaScript bằng Babel và webpack
Ghi chú. Các sự cố với đầu ra phải được báo cáo trên trình theo dõi Sự cố Babel
Cài đặt
gói web 4. x. babel-loader 8. x. babel 7. x
npm install -D babel-loader @babel/core @babel/preset-env webpack
Cách sử dụng
tài liệu webpack. máy bốc xếp
Trong đối tượng cấu hình webpack của bạn, bạn sẽ cần thêm babel-loader vào danh sách các mô-đun, như vậy
module: {
rules: [
{
test: /\.m?js$/,
exclude: /[node_modules|bower_components]/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
}
}
}
]
}
Tùy chọn
Xem các tùy chọn babel
Bạn có thể chuyển các tùy chọn cho trình tải bằng cách sử dụng thuộc tính
module: {
rules: [
{
test: /\.m?js$/,
exclude: /[node_modules|bower_components]/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env'],
plugins: ['@babel/plugin-proposal-object-rest-spread']
}
}
}
]
}
Trình tải này cũng hỗ trợ tùy chọn dành riêng cho trình tải sau
cacheDirectory
. Mặc định
0. Khi được đặt, thư mục đã cho sẽ được sử dụng để lưu trữ kết quả của trình tải. Các bản dựng webpack trong tương lai sẽ cố gắng đọc từ bộ đệm để tránh phải chạy quy trình biên dịch lại Babel có khả năng tốn kém trên mỗi lần chạy. Nếu giá trị được đặt thànhmodule: { rules: [ { test: /\.m?js$/, exclude: /[node_modules|bower_components]/, use: { loader: 'babel-loader', options: { presets: ['@babel/preset-env'] } } } ] }
1 trong các tùy chọn [_______1_______2], trình tải sẽ sử dụng thư mục bộ đệm ẩn mặc định trongmodule: { rules: [ { test: /\.m?js$/, exclude: /[node_modules|bower_components]/, use: { loader: 'babel-loader', options: { presets: ['@babel/preset-env'] } } } ] }
3 hoặc dự phòng cho thư mục tệp tạm thời mặc định của hệ điều hành nếu không tìm thấy thư mụcmodule: { rules: [ { test: /\.m?js$/, exclude: /[node_modules|bower_components]/, use: { loader: 'babel-loader', options: { presets: ['@babel/preset-env'] } } } ] }
4 trong bất kỳ thư mục gốc nàomodule: { rules: [ { test: /\.m?js$/, exclude: /[node_modules|bower_components]/, use: { loader: 'babel-loader', options: { presets: ['@babel/preset-env'] } } } ] }
5. Mặc định là một chuỗi bao gồm phiên bản củamodule: { rules: [ { test: /\.m?js$/, exclude: /[node_modules|bower_components]/, use: { loader: 'babel-loader', options: { presets: ['@babel/preset-env'] } } } ] }
6, phiên bản củamodule: { rules: [ { test: /\.m?js$/, exclude: /[node_modules|bower_components]/, use: { loader: 'babel-loader', options: { presets: ['@babel/preset-env'] } } } ] }
7, nội dung của tệpmodule: { rules: [ { test: /\.m?js$/, exclude: /[node_modules|bower_components]/, use: { loader: 'babel-loader', options: { presets: ['@babel/preset-env'] } } } ] }
8 nếu nó tồn tại và giá trị của biến môi trườngmodule: { rules: [ { test: /\.m?js$/, exclude: /[node_modules|bower_components]/, use: { loader: 'babel-loader', options: { presets: ['@babel/preset-env'] } } } ] }
9 với dự phòng cho biến môi trườngmodule: { rules: [ { test: /\.m?js$/, exclude: /[node_modules|bower_components]/, use: { loader: 'babel-loader', options: { presets: ['@babel/preset-env'] } } } ] }
0. Điều này có thể được đặt thành một giá trị tùy chỉnh để buộc phá bộ nhớ cache nếu mã định danh thay đổimodule: { rules: [ { test: /\.m?js$/, exclude: /[node_modules|bower_components]/, use: { loader: 'babel-loader', options: { presets: ['@babel/preset-env'], plugins: ['@babel/plugin-proposal-object-rest-spread'] } } } ] }
1. Mặc địnhmodule: { rules: [ { test: /\.m?js$/, exclude: /[node_modules|bower_components]/, use: { loader: 'babel-loader', options: { presets: ['@babel/preset-env'], plugins: ['@babel/plugin-proposal-object-rest-spread'] } } } ] }
1. Khi được đặt, mỗi đầu ra biến đổi Babel sẽ được nén bằng Gzip. Nếu bạn muốn từ chối tính năng nén bộ đệm, hãy đặt nó thànhmodule: { rules: [ { test: /\.m?js$/, exclude: /[node_modules|bower_components]/, use: { loader: 'babel-loader', options: { presets: ['@babel/preset-env'] } } } ] }
0 -- dự án của bạn có thể hưởng lợi từ điều này nếu nó chuyển đổi hàng nghìn tệpmodule: { rules: [ { test: /\.m?js$/, exclude: /[node_modules|bower_components]/, use: { loader: 'babel-loader', options: { presets: ['@babel/preset-env'] } } } ] }
4. Mặc địnhmodule: { rules: [ { test: /\.m?js$/, exclude: /[node_modules|bower_components]/, use: { loader: 'babel-loader', options: { presets: ['@babel/preset-env'], plugins: ['@babel/plugin-proposal-object-rest-spread'] } } } ] }
5. Đường dẫn của một mô-đun xuất một cuộc gọi lạimodule: { rules: [ { test: /\.m?js$/, exclude: /[node_modules|bower_components]/, use: { loader: 'babel-loader', options: { presets: ['@babel/preset-env'], plugins: ['@babel/plugin-proposal-object-rest-spread'] } } } ] }
6. Vì bạn đã phải tạo một tệp mới để sử dụng tệp này, nên thay vào đó, bạn nên sử dụngmodule: { rules: [ { test: /\.m?js$/, exclude: /[node_modules|bower_components]/, use: { loader: 'babel-loader', options: { presets: ['@babel/preset-env'], plugins: ['@babel/plugin-proposal-object-rest-spread'] } } } ] }
8 để tạo trình tải trình bao bọc. Chỉ sử dụng điều này nếu bạn phải tiếp tục sử dụng trực tiếpmodule: { rules: [ { test: /\.m?js$/, exclude: /[node_modules|bower_components]/, use: { loader: 'babel-loader', options: { presets: ['@babel/preset-env'], plugins: ['@babel/plugin-proposal-object-rest-spread'] } } } ] }
7, nhưng vẫn muốn tùy chỉnhmodule: { rules: [ { test: /\.m?js$/, exclude: /[node_modules|bower_components]/, use: { loader: 'babel-loader', options: { presets: ['@babel/preset-env'] } } } ] }
Xử lý sự cố
trình tải babel chậm
Đảm bảo rằng bạn đang chuyển đổi càng ít tệp càng tốt. Bởi vì bạn có thể khớp với
require['@babel/runtime/core-js/promise'].default = require['bluebird'];
var promise = new Promise;
0, nên bạn có thể đang chuyển đổi thư mục module: {
rules: [
{
test: /\.m?js$/,
exclude: /[node_modules|bower_components]/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
}
}
}
]
}
4 hoặc nguồn không mong muốn khácĐể loại trừ
module: {
rules: [
{
test: /\.m?js$/,
exclude: /[node_modules|bower_components]/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
}
}
}
]
}
4, hãy xem tùy chọn require['@babel/runtime/core-js/promise'].default = require['bluebird'];
var promise = new Promise;
3 trong cấu hình require['@babel/runtime/core-js/promise'].default = require['bluebird'];
var promise = new Promise;
4 như được ghi ở trênBạn cũng có thể tăng tốc babel-loader lên gấp 2 lần bằng cách sử dụng tùy chọn cacheDirectory
. Điều này sẽ chuyển đổi bộ đệm vào hệ thống tập tin
Babel đang đưa các trình trợ giúp vào từng tệp và làm đầy mã của tôi
Babel sử dụng các trình trợ giúp rất nhỏ cho các chức năng phổ biến, chẳng hạn như
require['@babel/runtime/core-js/promise'].default = require['bluebird'];
var promise = new Promise;
6. Theo mặc định, điều này sẽ được thêm vào mọi tệp yêu cầu nóThay vào đó, bạn có thể yêu cầu thời gian chạy Babel dưới dạng một mô-đun riêng biệt để tránh trùng lặp
Cấu hình sau vô hiệu hóa tính năng chèn thời gian chạy mỗi tệp tự động trong Babel, thay vào đó, yêu cầu
require['@babel/runtime/core-js/promise'].default = require['bluebird'];
var promise = new Promise;
7 và làm cho tất cả các tham chiếu của trình trợ giúp sử dụng nóXem tài liệu để biết thêm thông tin
GHI CHÚ. Bạn phải chạy
require['@babel/runtime/core-js/promise'].default = require['bluebird'];
var promise = new Promise;
8 để đưa phần này vào dự án của mình và chính bản thân require['@babel/runtime/core-js/promise'].default = require['bluebird'];
var promise = new Promise;
9 là phần phụ thuộc với 'use strict';
var _Promise = require['@babel/runtime/core-js/promise']['default'];
require['@babel/runtime/core-js/promise']['default'] = require['bluebird'];
var promise = new _Promise[];
0Vì @babel/plugin-transform-runtime bao gồm một polyfill bao gồm thời gian chạy trình tạo lại tùy chỉnh và core-js, nên phương pháp làm mờ thông thường sau đây bằng cách sử dụng
'use strict';
var _Promise = require['@babel/runtime/core-js/promise']['default'];
require['@babel/runtime/core-js/promise']['default'] = require['bluebird'];
var promise = new _Promise[];
1 sẽ không hoạt độngCách tiếp cận sau đây cũng sẽ không hoạt động
require['@babel/runtime/core-js/promise'].default = require['bluebird'];
var promise = new Promise;
cái nào xuất ra [sử dụng
'use strict';
var _Promise = require['@babel/runtime/core-js/promise']['default'];
require['@babel/runtime/core-js/promise']['default'] = require['bluebird'];
var promise = new _Promise[];
2]'use strict';
var _Promise = require['@babel/runtime/core-js/promise']['default'];
require['@babel/runtime/core-js/promise']['default'] = require['bluebird'];
var promise = new _Promise[];
Thư viện
'use strict';
var _Promise = require['@babel/runtime/core-js/promise']['default'];
require['@babel/runtime/core-js/promise']['default'] = require['bluebird'];
var promise = new _Promise[];
3 trước đó được tham chiếu và sử dụng trước khi bị ghi đèMột cách tiếp cận là có một bước "bootstrap" trong ứng dụng của bạn, bước đầu tiên sẽ ghi đè lên toàn cầu mặc định trước ứng dụng của bạn
nút. js API cho babel
đã được chuyển sang 'use strict';
var _Promise = require['@babel/runtime/core-js/promise']['default'];
require['@babel/runtime/core-js/promise']['default'] = require['bluebird'];
var promise = new _Promise[];
5
'use strict';
var _Promise = require['@babel/runtime/core-js/promise']['default'];
require['@babel/runtime/core-js/promise']['default'] = require['bluebird'];
var promise = new _Promise[];
Nếu bạn nhận được thông báo này, điều đó có nghĩa là bạn đã cài đặt gói npm babel
và đang sử dụng ký hiệu ngắn của trình tải trong cấu hình webpack [không còn hiệu lực kể từ webpack 2. x]
{
test: /\.m?js$/,
loader: 'babel',
}
sau đó webpack sẽ cố tải gói babel
thay vì gói
module: {
rules: [
{
test: /\.m?js$/,
exclude: /[node_modules|bower_components]/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
}
}
}
]
}
7Để khắc phục điều này, bạn nên gỡ cài đặt gói npm babel
, vì gói này không được dùng trong Babel v6. [Thay vào đó, hãy cài đặt
{
test: /\.m?js$/,
loader: 'babel',
}
0 hoặc module: {
rules: [
{
test: /\.m?js$/,
exclude: /[node_modules|bower_components]/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
}
}
}
]
}
6. ] Trong trường hợp một trong các phụ thuộc của bạn đang cài đặt babel
và bạn không thể tự gỡ cài đặt nó, hãy sử dụng tên đầy đủ của trình tải trong cấu hình webpack {
test: /\.m?js$/,
loader: 'babel-loader',
}
Loại trừ các thư viện không được biên dịch
{
test: /\.m?js$/,
loader: 'babel',
}
3 và {
test: /\.m?js$/,
loader: 'babel',
}
4 sẽ gây ra lỗi nếu chúng được biên dịch bởi BabelBạn sẽ cần phải loại trừ chúng khỏi ________ 1 _______7
Tùy chỉnh cấu hình dựa trên mục tiêu webpack
Webpack hỗ trợ gói nhiều mục tiêu. Đối với các trường hợp mà bạn có thể muốn các cấu hình Babel khác nhau cho từng mục tiêu [như
{
test: /\.m?js$/,
loader: 'babel',
}
6 và {
test: /\.m?js$/,
loader: 'babel',
}
7], trình tải này cung cấp thuộc tính {
test: /\.m?js$/,
loader: 'babel',
}
8 thông qua API của BabelVí dụ: để thay đổi mục tiêu môi trường được chuyển thành
{
test: /\.m?js$/,
loader: 'babel',
}
9 dựa trên mục tiêu gói webTrình tải tùy chỉnh
module: {
rules: [
{
test: /\.m?js$/,
exclude: /[node_modules|bower_components]/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
}
}
}
]
}
7 hiển thị tiện ích trình tải-xây dựng cho phép người dùng thêm xử lý tùy chỉnh cấu hình của Babel cho từng tệp mà nó xử lýmodule: {
rules: [
{
test: /\.m?js$/,
exclude: /[node_modules|bower_components]/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env'],
plugins: ['@babel/plugin-proposal-object-rest-spread']
}
}
}
]
}
8 chấp nhận một cuộc gọi lại sẽ được gọi với phiên bản của trình tải là babel
để công cụ có thể đảm bảo rằng nó sử dụng chính xác phiên bản module: {
rules: [
{
test: /\.m?js$/,
exclude: /[node_modules|bower_components]/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
}
}
}
]
}
6 giống như chính trình tảiTrong trường hợp bạn muốn tùy chỉnh mà không thực sự có tệp để gọi
module: {
rules: [
{
test: /\.m?js$/,
exclude: /[node_modules|bower_components]/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env'],
plugins: ['@babel/plugin-proposal-object-rest-spread']
}
}
}
]
}
8, bạn cũng có thể chuyển tùy chọn module: {
rules: [
{
test: /\.m?js$/,
exclude: /[node_modules|bower_components]/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env'],
plugins: ['@babel/plugin-proposal-object-rest-spread']
}
}
}
]
}
4 bằng một chuỗi chỉ vào tệp xuất hàm gọi lại module: {
rules: [
{
test: /\.m?js$/,
exclude: /[node_modules|bower_components]/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env'],
plugins: ['@babel/plugin-proposal-object-rest-spread']
}
}
}
]
}
6 của bạn