Adakah webpack menyokong es6?

Pek web menyokong es6. Webpack 2 menyokong sintaks modul ES6 asli, yang bermaksud pembangun boleh menggunakan import dan eksport tanpa memperkenalkan alat tambahan seperti babel. Tetapi jika anda menggunakan ciri ES6+ yang lain, anda masih perlu memperkenalkan alat babel.

Persekitaran pengendalian tutorial ini: sistem Windows 7, ECMAScript versi 6, komputer Dell G3.

Kaedah modul

---

Apabila webpack membungkus aplikasi anda, anda boleh memilih daripada pelbagai gaya sintaks modul, termasuk ES6, CommonJS dan AMD.

Walaupun pek web menyokong berbilang sintaks modul, kami masih mengesyorkan menggunakan sintaks yang konsisten sebanyak mungkin untuk mengelakkan beberapa gelagat dan pepijat yang pelik. Sebenarnya, webpack mendayakan semakan konsistensi sintaks apabila fail package.json terdekat mengandungi medan "jenis" dengan nilai "modul" atau "commonjs". Sila ambil perhatian ini sebelum membaca:

• Tetapkan "jenis": "modul" untuk .mjs atau .js dalam package.json

  • CommonJS ialah tidak dibenarkan, sebagai contoh, anda tidak boleh menggunakan require, module.exports atau exports

  • Apabila mengimport fail, adalah wajib untuk menulis sambungan, contohnya, anda harus menggunakan import '. /src/App.mjs' dan bukannya import './src/App' (anda boleh melumpuhkan peraturan ini dengan menetapkan Rule.resolve.fullySpecified)

• Tetapkan "type": "commonjs" dalam package.json untuk .cjs atau .js

  • Kedua-dua import dan eksport tidak tersedia

• Tetapkan "jenis": "modul" untuk .wasm dalam package.json

  • Apabila memperkenalkan fail wasm, anda mesti menulis sambungan fail

ES6 (disyorkan)

---

webpack 2 menyokong sintaks modul ES6 asli, yang bermaksud anda tidak perlu memperkenalkan alatan tambahan seperti babel. , anda boleh menggunakan import dan eksport. Tetapi ambil perhatian bahawa jika anda menggunakan ciri ES6+ yang lain, anda masih perlu mengimport babel. webpack menyokong kaedah berikut:

import

Gunakan import untuk mengimport secara statik modul lain yang dieksport melalui eksport.

import MyModule from './my-module.js';
import { NamedExport } from './other-module.js';

Amaran:

Kata kunci di sini adalah statik. Dalam pernyataan import standard, pernyataan modul tidak boleh memperkenalkan modul lain dalam cara dinamik yang "mempunyai logik atau mengandungi pembolehubah". Maklumat lanjut tentang import dan penggunaan dinamik import().

Anda juga memperkenalkan URI Data melalui import:

import 'data:text/javascript;charset=utf-8;base64,Y29uc29sZS5sb2coJ2lubGluZSAxJyk7';
import {
  number,
  fn,
} from 'data:text/javascript;charset=utf-8;base64,ZXhwb3J0IGNvbnN0IG51bWJlciA9IDQyOwpleHBvcnQgY29uc3QgZm4gPSAoKSA9PiAiSGVsbG8gd29ybGQiOw==';

eksport

Keseluruhan modul dieksport secara lalai Atau dinamakan modul eksport.

// 具名导出
export var Count = 5;
export function Multiply(a, b) {
  return a * b;
}

// 默认导出
export default {
  // Some data...
};

import()

function(string path):Promise

Modul pemuatan dinamik. Titik di mana import dipanggil dianggap sebagai titik perpecahan, bermakna modul yang diminta dan semua submodul yang dirujuknya akan dibahagikan kepada satu bahagian.

Petua:

Spesifikasi pemuat ES2015 mentakrifkan kaedah import(), yang boleh memuatkan modul ES2015 secara dinamik pada masa jalan.

if (module.hot) {
  import('lodash').then((_) => {
    // Do something with lodash (a.k.a '_')...
  });
}

Amaran: Ciri

import() bergantung pada Promise terbina dalam. Jika anda ingin menggunakan import() dalam penyemak imbas lama, ingat untuk menggunakan pustaka polyfill seperti es6-promise atau promise-polyfill untuk pra-populasi (shim) persekitaran Promise. Ungkapan

dalam

import() tidak boleh menggunakan pernyataan import dinamik sepenuhnya, seperti import(foo). adalah kerana foo boleh menjadi sebarang laluan ke mana-mana fail dalam sistem atau projek anda.

import() mesti mengandungi sekurang-kurangnya beberapa maklumat laluan tentang modul. Pembungkusan boleh dihadkan kepada direktori atau set fail tertentu, supaya apabila menggunakan ungkapan dinamik - setiap modul yang mungkin diminta dalam panggilan import() disertakan. Contohnya, import(`./locale/${language}.json`) akan membungkus setiap fail .json dalam direktori .locale ke dalam bongkah baharu. Pada masa jalan, selepas bahasa pembolehubah telah dinilai, mana-mana fail seperti english.json atau german.json boleh digunakan.

// 想象我们有一个从 cookies 或其他存储中获取语言的方法
const language = detectVisitorLanguage();
import(`./locale/${language}.json`).then((module) => {
  // do something with the translations
});

Petua:

Menggunakan pilihan webpackInclude dan webpackExclude membolehkan anda menambah corak ekspresi biasa untuk mengurangkan bilangan fail yang diimport oleh webpack.

Komen Ajaib

Ulasan sebaris membolehkan ciri ini. Dengan menambahkan ulasan pada import, kita boleh melakukan perkara seperti menamakan bahagian atau memilih mod lain.

// 单个目标
import(
  /* webpackChunkName: "my-chunk-name" */
  /* webpackMode: "lazy" */
  /* webpackExports: ["default", "named"] */
  'module'
);

// 多个可能的目标
import(
  /* webpackInclude: /\.json$/ */
  /* webpackExclude: /\.noimport\.json$/ */
  /* webpackChunkName: "my-chunk-name" */
  /* webpackMode: "lazy" */
  /* webpackPrefetch: true */
  /* webpackPreload: true */
  `./locale/${language}`
);

import(/* webpackIgnore: true */ 'ignored-module.js');

: Apabila ditetapkan kepada benar, penghuraian import dinamik dilumpuhkan. webpackIgnore

Amaran:

Nota: Menetapkan webpackAbaikan kepada benar tidak akan melakukan pemisahan kod.

webpackChunkName: Nama bongkah baharu. Bermula dengan webpack 2.6.0, pemegang tempat [indeks] dan [permintaan] menyokong nombor tambahan atau nama fail yang dihuraikan sebenar masing-masing. Selepas menambahkan anotasi ini, potongan individu yang diberikan kepada kami akan dinamakan [nama-ketulan-saya].js bukannya [id].js.

webpackMode: Bermula dengan webpack 2.6.0, anda boleh menentukan mod berbeza untuk menghuraikan import dinamik. Pilihan berikut disokong:

• 'lazy' (lalai): Hasilkan bongkah yang boleh dimuatkan malas untuk setiap modul yang diimport oleh import().

• 'lazy-once': Menghasilkan satu bongkah boleh muat malas yang boleh memenuhi semua panggilan import(). Potongan ini akan diperolehi pada panggilan import() pertama, dan import()s seterusnya akan menggunakan respons rangkaian yang sama. Harap maklum bahawa mod ini hanya masuk akal dalam beberapa pernyataan dinamik, seperti import(`./locales/${language}.json`), yang mungkin mengandungi berbilang laluan modul yang diminta.

• 'eager': Tiada potongan tambahan akan dijana. Semua modul diimport oleh bahagian semasa dan tiada permintaan rangkaian tambahan dibuat. Walau bagaimanapun, Janji dalam keadaan diselesaikan masih akan dikembalikan. Berbeza dengan import statik, modul tidak akan dilaksanakan sehingga panggilan untuk import() selesai.

• 'weak': Cuba muatkan modul jika fungsi modul telah dimuatkan dengan cara lain (iaitu, bahagian lain telah mengimport modul ini, atau skrip yang mengandungi modul telah dimuatkan). Janji masih akan dikembalikan, tetapi hanya akan berjaya diselesaikan jika bahagian itu sudah tersedia pada pelanggan. Jika modul tidak tersedia, Janji yang ditolak dikembalikan dan permintaan rangkaian tidak pernah dilaksanakan. Ini berguna untuk Rendering Universal (SSR) apabila potongan yang diperlukan sentiasa disediakan secara manual dalam permintaan awal (terbenam dalam halaman), dan bukannya apabila navigasi aplikasi dicetuskan pada import modul yang tidak diberikan pada mulanya.

webpackPrefetch: Memberitahu penyemak imbas bahawa sumber ini mungkin diperlukan untuk lompatan navigasi tertentu pada masa hadapan.

webpackPreload: Memberitahu penyemak imbas bahawa sumber itu mungkin diperlukan semasa navigasi semasa.

webpackInclude: Ungkapan biasa digunakan untuk pemadanan semasa peleraian import. Hanya modul yang sepadan akan dibungkus.

webpackExclude: Ungkapan biasa digunakan untuk pemadanan semasa peleraian import. Semua modul yang sepadan tidak akan dibungkus.

webpackExports: Beritahu pek web supaya hanya membina modul import() dinamik dengan eksport tertentu. Ia boleh mengurangkan saiz ketulan. Tersedia daripada webpack 5.0.0-beta.18 dan seterusnya.

[Cadangan berkaitan: tutorial pembelajaran javascript]

Atas ialah kandungan terperinci Adakah webpack menyokong es6?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!