如何使用 esm 创建带有汇总的 "fat" js 文件？

Question

我有以下代码..

// 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: Failed to resolve module specifier "vue". Relative references must start with either "/", "./", or "../".

这让我相信我需要一个包含依赖项的 "fat" js。

我也想把所有东西都放在es6模块里，避免引入say babel。

有没有办法使用汇总来做到这一点？

更新

试过这个...

import Vue from "./vue";

但后来我得到...

Error: Could not resolve './vue' from src/index.js

Answer 1

据我所知这是不可能的。相反，我不得不将导入从 ui 项目移动到服务器项目并创建一个看起来像这样的静态 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 样式文件。

Answer 2

这不是解决方案，而是解决方法

下面的汇总配置不是 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 路径，而不是您的源文件

如何使用 esm 创建带有汇总的 "fat" js 文件？

How do I create a "fat" js file with rollup using esm?

rollup

ecmascript-6

这不是解决方案，而是解决方法