Babel css

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

  module: {
    rules: [
      {
        test: /\.m?js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      }
    ]
  }

  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ành

  module: {
    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 trong

  module: {
    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ục

  module: {
    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ào

• module: {
    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ủa

  module: {
    rules: [
      {
        test: /\.m?js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      }
    ]
  }

  6, phiên bản của

  module: {
    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ệp

  module: {
    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ường

  module: {
    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ường

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

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

  1. Mặc định

  module: {
    rules: [
      {
        test: /\.m?js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      }
    ]
  }

  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ành

  module: {
    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ệp

• 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. Mặc đị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']
          }
        }
      }
    ]
  }

  5. Đường dẫn của một mô-đun xuất một cuộc 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. 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ụng

  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 để 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ếp

  module: {
    rules: [
      {
        test: /\.m?js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      }
    ]
  }

  7, nhưng vẫn muốn tùy chỉnh

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ên

Bạ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();

0

Vì @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 động

Cá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

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 Babel

Bạ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 Babel

Ví 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 web

Trì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ải

Trong 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

Babel dùng để làm gì?

Sự khác biệt giữa Babel và Webpack là gì?

Tại sao Babel được sử dụng trong phản ứng?

Babel là trình biên dịch hay trình biên dịch?