Bootstrap 4,Popper.JS和WebPack - "导入和导出可能只出现在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文件夹中的umd构建dist/umd:( dist/umd/popper.js或dist/umd/popper.min.js)

以下答案帮助我解决了bootstrap 4和popper的问题,请看一下:如何使用popper 1.12.0和bootstrap 4.0 beta

另外,我正在使用AngularCLI,它使用Webpack.改变从路径dist到dist/umd已经解决了我的问题.

我希望这能帮到您.

Answer 2

使用UMD分发目标:https://github.com/FezVrasta/popper.js#dist-targets