WebPacker - загрузка модулей NPM через импорт ES6 против веб-пакета. ProvidePlugin () - PullRequest
0 голосов
/ 23 ноября 2018

Я экспериментирую с запуском нескольких веб-приложений внутри Rails.

У каждого веб-приложения есть совершенно разные зависимости, и я бы хотел, чтобы размеры каждого пакета были минимальными.

Первое приложениеЯ использую 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',
});

enter image description here

Затем я попробовал небольшое изменение import { Reveal } from 'reveal';

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

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

enter image description here

Я наконец-то заставил Reveal.js работать, изменив конфигурацию WebPacker в боковых направляющих

config / webpack / environment.js

Я добавил в jQuery и Reveal.js какплагины для веб-пакетов с использованием следующего кода

Я не уверен, является ли это лучшим способом включить раскрытие, так как кажется, что это повлияет на все мои приложения, добавив 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'
    })
);

и CОда, что я сейчас бегу для показа презентации

$(document).ready(function() {

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

});

1 Ответ

0 голосов
/ 23 ноября 2018

Как насчет 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.

...