Как мне создать "толстый" файл JS с накопительным пакетом, используя ESM? - PullRequest
Новая
       79

Как мне создать "толстый" файл JS с накопительным пакетом, используя ESM?

0 голосов
/ 19 декабря 2018

У меня есть следующий код .. 

// ui.js (generated by rollup
    import Vue from 'vue';
    import VueRouter from 'vue-router';

    (()=>{
         console.log("Wow it actually works");
         Vue.use(VueRouter);
         const routes = [
             {
                 path: '/',
                 component: Viewport
             }
         ];
         const router = new VueRouter({
             mode: "history",
             routes: routes
         });
         window.app = new Vue({ router });
         window.app.$mount('#jg-app');
    })();

<script src="ui.js" type="module"> </script>

Проблема в том, что когда я запускаю это, я получаю ...

Uncaught TypeError: Не удалось разрешить спецификатор модуля "vue».Относительные ссылки должны начинаться с "/", "./" или "../".

. Это наводит меня на мысль, что мне нужен" толстый "js, включающий зависимости.

Я также хочу сохранить все в модулях es6 и избегать введения, скажем, babel.

Есть ли способ сделать это с помощью накопительного пакета?

Обновление

Пробовал это ... 

import Vue from "./vue";

Но тогда я получаю ...

Ошибка: не удалось разрешить './vue' из src / index.js

Ответы [ 2 ]

0 голосов
/ 04 января 2019

Это не решение, это обходной путь

Конфигурация накопительного пакета не является esm, это просто способ создания пакета с включенными зависимостями.

Вы получаете один минимизированный JS-файл, совместимый с браузером.

Вот мой рабочий пример rollup.config.js (вам следует заменить input: 'src/index.js' точкой входа вашего веб-приложения и output.file местоположением сгенерированного пакета): 

import resolve from 'rollup-plugin-node-resolve';
import commonjs from 'rollup-plugin-commonjs';
import builtins from 'rollup-plugin-node-builtins';
import babel from 'rollup-plugin-babel';
import visualizer from 'rollup-plugin-visualizer';
import { terser } from "rollup-plugin-terser";


const browserPlugins = [
    resolve({browser: true}), // so Rollup can properly resolve cuid
    babel({
        exclude: 'node_modules/**',
        babelrc: false,
        presets: ['es2015-rollup'],
    }),
    // builtins(),
    commonjs(),
    visualizer(),
    terser(),
]

export default [
    // browser-friendly UMD build
    {
        // external: Object.keys(globals),
        input: 'src/index.js',
        output: {
            name: 'thinflux',
            file: './dist/browser/thinflux.min.js',
            format: 'umd'
        },
        plugins: browserPlugins,
    }
];

Еще одна вещь: express должен статически обслуживать путь output.file, а не исходные файлы

0 голосов
/ 31 декабря 2018

Насколько я могу судить, это невозможно.Вместо этого мне пришлось перенести импорт из проекта пользовательского интерфейса в проект сервера и создать статический js-файл, который выглядел следующим образом ... 

//client
import Vue from "./vue"
let app = new Vue(...);
app.$mount('#jg-app');

и импортировать версию esm.browser 

// server
app.use('/vue', express.static(__dirname + '/node_modules/vue/dist/vue.esm.browser.js'));
// template
script(src="/main.js" type="module")

Теперь Vue работает, однако такие зависимости, как Vue-Router, по-видимому, не имеют этого файла стиля es.browser.

...