WebPacker-通过ES6 Import vs webpack加载NPM模块.ProvidePlugin（）

Question

我正在尝试在Rails中运行多个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插件

我不确定这是否是包括显示效果的最佳方法，因为它似乎会通过向每个应用程序添加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的导出。