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 版本：#SERVICE 1:02B18:1900:FBFF:820000:0:0:0:http//www.google.ts #DESCRIPTION Hello Number One HD #SERVICE 1:02B65:19C8:FBFF:820000:0:0:0:http//www.amazon.ts #DESCRIPTION bye Number two hd #SERVICE 1:0:19:2B16:1900:FBFF:82000 0:0:0:0:http//www.linux.ts #DESCRIPTION number three hd exit #SERVICE 1:0:19:2B16:1900:FBFF:82000 0:0:0:0:http//www.goodlooking.ts #DESCRIPTION Number Three HD #SERVICE 1:02B18:1900:FBFF:820000:0:0:0:http//www.shame.ts #DESCRIPTION number One hd bye或{{1 }}）

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

另外，我正在使用AngularCLI，它使用Webpack。更改dist/umd到dist/umd/popper.js的路径已解决了我的问题。

我希望这会对你有所帮助。

Answer 2

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

Answer 3

您需要使用在节点模块中提供的popper.js文件夹的UMD发行版，并将angular-cli.json指向您的popper.js路径。

Bootstrap 4，Popper.JS和WebPack - ＆＃34;导入和导出可能只出现在sourceType：module＆＃34;

3 个答案: