WebPacker

Question

我正在 Rails.运行内试验多个 WebApps。

每个 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',
  });

我终于 Reveal.js 通过更改 rails

中的 WebPacker 配置来工作

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 出口。

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

WebPacker - Load NPM modules via ES6 Import vs webpack.ProvidePlugin()

javascript

webpack

ruby-on-rails-5.2