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

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>

问题是当我运行它时，我得到...

未捕获的TypeError：无法解析模块说明符“ vue”。相对引用必须以“ /”、“./”或“ ../”开头。

这使我相信我需要一个包含依赖项的“胖” js。

我也想将所有内容都保留在es6模块中，并避免引入“说通”。

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

更新

尝试过这个...

import Vue from "./vue";

但是我得到...

错误：无法从src / index.js中解析“ ./vue”

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'替换为Web应用程序的入口点，并将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汇总创建“胖” js文件？

2 个答案:

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