时间戳

首页 > 解决方案 > 如何使用 esm 创建带有汇总的“胖”js 文件？

ecmascript-6 - 如何使用 esm 创建带有汇总的“胖”js 文件？

问题描述

我有以下代码..

// 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>

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

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

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

我还想将所有内容都保留在 es6 模块中，避免引入 say babel。

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

更新

试过这个...

import Vue from "./vue";

但后来我得到...

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

标签： ecmascript-6rollup

解决方案

据我所知，这是不可能的。相反，我不得不将导入从 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 样式文件。

推荐阅读