使用 parcel.js 导入 select2答案

【问题标题】：Import select2 with parcel.js使用 parcel.js 导入 select2
【发布时间】：2021-04-27 09:08:03
【问题描述】：

请原谅我缺乏知识，因为我是 Web 开发的新手。

我正在尝试捆绑所有 3rd 方包，其中包括 select2 等。该捆绑包适用于 jquery、bootstrap、popper 等其他包，但 select2 未初始化或其他东西。可能是加载顺序问题？

调用$('select').select2() 会导致未捕获的类型错误。通过cdn单独加载或者手动下载都可以，看来parcel做的不对？

这几乎是一个非常“样板”的设置，因此很容易复制，但这是我目前正在尝试的：

File structure:
- node_modules
- index.html
- .sassrc       # sass configuration
- assets/       # front end assets root
  - scss/       # Place for all styles
    - site.scss
  - js/         # Place for all scripts
    - site.js
  - bundle.js   # Entry point for output bundle

// bundle.js
import './scss/site.scss';
import $ from 'jquery';
window.$ = window.jQuery = $;
import 'bootstrap';
import 'select2';

/* site.css */
@import "bootstrap/scss/bootstrap";
@import "select2/dist/css/select2";
@import "@ttskch/select2-bootstrap4-theme/dist/select2-bootstrap4";

<!-- index.html -->
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="wwwroot/dist/bundle.css">
  <script src="wwwroot/dist/bundle.js"></script>
</head>

最后

// package.js to show dependencies and the build script
{
  "name": "SideNav",
  "version": "1.0.0",
  "description": "",
  "main": "main.js",
  "scripts": {
    "build": "parcel build assets/bundle.js --out-dir wwwroot/dist/"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@ttskch/select2-bootstrap4-theme": "^1.3.5",
    "bootstrap": "^4.6.0",
    "jquery": "^3.5.1",
    "popper.js": "^1.16.1",
    "select2": "^4.0.13"
  },
  "devDependencies": {
    "parcel-bundler": "^1.12.4",
    "sass": "^1.32.5"
  }
}

在此先感谢大家的帮助。

【问题讨论】：

标签： jquery jquery-select2 parceljs

【解决方案1】：

对我来说 select2 是这样工作的：

import $ from "jquery";
import select2 from "select2";

select2($);
window.$ = $;

【讨论】：