React中的Bootstrap .modal（）（没有第三方） - '不是函数'

Question

目标是能够通过JavaScript 控制Bootstrap Modal元素，而无需使用第三方库，例如反应的自举

使用create-react-app创建应用。目标是不触及webpack配置文件。

的package.json

{
  ...
  "dependencies": {
    "bootstrap": "^4.0.0",
    ...
  },
  "scripts": {
    "start": "react-scripts-ts start",
    "build": "react-scripts-ts build",
    "test": "react-scripts-ts test --env=jsdom",
    "eject": "react-scripts-ts eject"
  },
  "devDependencies": {
    "@types/bootstrap": "^4.0.1",
    ...
  },
  ...
}

index.tsx

import 'bootstrap';
import 'bootstrap/dist/css/bootstrap.min.css';

现在尝试使用.modal('hide')获取：

jQuery似乎只导入一次（使用bootstrap npm包）。所有其他功能和动画看起来都不错。

可能必须从bootstrap jQuery中明确导入Modal模块吗？

编辑：更准确地说，$似乎根本不需要方法，只能像查询选择器一样工作。

Answer 1

您需要在webpack.config中声明'$'。

...
plugins: options.plugins.concat([

    new webpack.ProvidePlugin({

      $: 'jquery',

      jQuery: 'jquery',

      'window.jQuery': 'jquery',

      tether: 'tether',

      Tether: 'tether',

      'window.Tether': 'tether',

    })
})
...

还要确保jQuery作为依赖项存在于package.json中。

"dependencies": {
    ...
    "jquery": "^3.2.1",
    ...
},

我很确定你还需要将它添加到webpack.config中的条目中。

module.exports = {
    ...
    entry: {
        vendor: [
            ...
            'jquery',
            'bootstrap',
            ... 
        ],
        ...
    },
    ...
}