twitter-bootstrap - Bootstrap 4、Popper.JS 和 WebPack—— "import and export may appear only with sourceType: module"

Question

我有一个项目与 bootstrap@4.0.0-alpha6 完美配合.我刚刚尝试将此项目升级到 bootstrap@4.0.0-beta并注意到对 Popper.js 而不是 Tether 的新依赖。

我更新了我的 package.json 以包含 popper.js@^1.11.0并从以下位置更新了我的代码:

window.Tether = require("tether");
require("bootstrap");

至:

window.Popper = require("popper.js");
require("bootstrap");

现在我收到以下错误:

./~/popper.js/dist/esm/popper.js
Module build failed: SyntaxError: 'import' and 'export' may appear only with 'sourceType: module' (2429:0)
    at Parser.pp$4.raise (/project/node_modules/acorn/dist/acorn.js:2610:13)
    at Parser.pp$1.parseStatement (/project/node_modules/acorn/dist/acorn.js:782:16)
    at Parser.pp$1.parseTopLevel (/project/node_modules/acorn/dist/acorn.js:690:23)
    at Parser.parse (/project/node_modules/acorn/dist/acorn.js:543:15)
    at parse (/project/node_modules/acorn/dist/acorn.js:3670:37)
    at module.exports (/project/node_modules/falafel/index.js:22:15)
    at /project/node_modules/static-module/index.js:30:13
    at ConcatStream.<anonymous> (/project/node_modules/concat-stream/index.js:36:43)
    at emitNone (events.js:91:20)
    at ConcatStream.emit (events.js:185:7)
 @ ./resources/assets/js/common/bootstrap.js 12:16-36
 @ ./resources/assets/js/website/app.js

我不太熟悉或不擅长使用 WebPack。它是由 Laravel 5.4 强加给我的，所以我一直在挣扎直到这一点。我的 webpack.config.js文件看起来像这样:

module.exports = {
  devtool: "source-map",
  module: {
    loaders: [
      {
        test: /\.js/,
        loader: "transform?brfs"
      }
    ]
  }
}

Answer 1

您必须使用位于 popper.js 的 dist/umd 文件夹中的 umd 构建:( dist/umd/popper.js 或 dist/umd/popper.min.js )

以下答案帮助我解决了 bootstrap 4 和 popper 的问题，请看这里:How to use popper 1.12.0 with bootstrap 4.0 beta

另外，我正在使用 AngularCLI，它使用 Webpack。将路径从 dist 更改为 dist/umd 解决了我的问题。

我希望这能帮到您。