javascript - WebPacker - 通过 ES6 Import 与 webpack.ProvidePlugin() 加载 NPM 模块

Question

我正在尝试在 Rails 内运行多个 WebApp。

每个 WebApp 都有完全不同的依赖项，我希望将每个 WebApp 的包大小保持在最小大小。

我正在构建的第一个应用程序使用 Reveal.js我已经使用 yarn add Reveal

添加了它

我原以为我可以通过 packs/presentation.js 导入来包含它

console.log('Presentation System');
import 'reveal';

Reveal.initialize({
  controls: true,
  progress: true,
  history: true,
  center: true,
  transition: 'none',
});

然后我尝试了一个细微的变化 import { Reveal } from 'reveal';

  console.log('Presentation System');
  import { Reveal } from 'reveal';

  Reveal.initialize({
    controls: true,
    progress: true,
    history: true,
    center: true,
    transition: 'none',
  });

通过更改侧轨中的 WebPacker 配置，我终于让 Reveal.js 正常工作

config/webpack/environment.js

我使用以下代码将 jQuery 和 Reveal.js 添加为 webpack 插件

我不确定这是否是包含 Reveal 的最佳方式，因为它似乎会通过向每个应用程序添加 jQuery 和 Reveal 来影响我的所有应用程序，这不是我想要的，因为其他应用程序正在使用 VUE 或 Angular

// https://joey.io/how-to-use-jquery-in-rails-5-2-using-webpack/
const { environment } = require('@rails/webpacker');
const typescript =  require('./loaders/typescript');
const vue =  require('./loaders/vue');

const webpack = require('webpack')

environment.loaders.append('vue', vue);
environment.loaders.append('typescript', typescript);

module.exports = environment;

environment.plugins.prepend(
    'Provide',
    new webpack.ProvidePlugin({
      $: 'jquery',
      jQuery: 'jquery',
      jquery: 'jquery',
      Reveal: 'reveal'
    })
);

以及我现在运行来显示演示文稿的代码

$(document).ready(function() {

  Reveal.initialize({
    controls: true,
    progress: true,
    history: true,
    center: true,
    transition: 'none',
  });

});

Answer 1

怎么样import Reveal from 'reveal' ？

https://babeljs.io/docs/en/learn/#modules

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/export

通过做import { Reveal } from 'reveal'您正在尝试导入 Reveal Reveal 的命名导出模块。

但是Reveal是default导出。