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





.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box;
}







0















I have the following code..



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


The problem is when I run this I get...




Uncaught TypeError: Failed to resolve module specifier "vue". Relative references must start with either "/", "./", or "../".




This leads me to believe I need a "fat" js that includes dependencies.



I also want to keep everything in es6 modules and avoid introducing say babel.



Is there a way to do this using rollup?



Update



Tried this...



import Vue from "./vue";


But then I get...




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











share|improve this question































    0















    I have the following code..



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


    The problem is when I run this I get...




    Uncaught TypeError: Failed to resolve module specifier "vue". Relative references must start with either "/", "./", or "../".




    This leads me to believe I need a "fat" js that includes dependencies.



    I also want to keep everything in es6 modules and avoid introducing say babel.



    Is there a way to do this using rollup?



    Update



    Tried this...



    import Vue from "./vue";


    But then I get...




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











    share|improve this question



























      0












      0








      0








      I have the following code..



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


      The problem is when I run this I get...




      Uncaught TypeError: Failed to resolve module specifier "vue". Relative references must start with either "/", "./", or "../".




      This leads me to believe I need a "fat" js that includes dependencies.



      I also want to keep everything in es6 modules and avoid introducing say babel.



      Is there a way to do this using rollup?



      Update



      Tried this...



      import Vue from "./vue";


      But then I get...




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











      share|improve this question
















      I have the following code..



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


      The problem is when I run this I get...




      Uncaught TypeError: Failed to resolve module specifier "vue". Relative references must start with either "/", "./", or "../".




      This leads me to believe I need a "fat" js that includes dependencies.



      I also want to keep everything in es6 modules and avoid introducing say babel.



      Is there a way to do this using rollup?



      Update



      Tried this...



      import Vue from "./vue";


      But then I get...




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








      ecmascript-6 rollup






      share|improve this question















      share|improve this question













      share|improve this question




      share|improve this question








      edited Dec 19 '18 at 3:55







      Jackie

















      asked Dec 19 '18 at 3:41









      JackieJackie

      7,1571986178




      7,1571986178
























          2 Answers
          2






          active

          oldest

          votes


















          1














          As far as I can tell this is not possible. I instead had to move the import from the ui project to the server project and create a static js file that looked like this...



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


          and import the esm.browser version



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


          Now Vue is working, however, dependencies like Vue-Router appear to not have this es.browser style file.






          share|improve this answer































            -1














            This is not a solution, it's a workaround



            The below rollup config is not esm, it's just a way to create a bundle with dependencies included.



            You get one minified browser-compatible JS file.



            Here's my working example rollup.config.js (you should replace input: 'src/index.js' with your web app entry point and output.file with a location for the generated bundle):



            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,
            }
            ];


            One more thing: express should statically serve the output.file path, not your source files






            share|improve this answer


























            • I need to use esm this uses Babel and umd

              – Jackie
              Jan 4 at 14:06













            • well, my answer is not a solution, it's an alternative

              – Tudor Ilisoi
              Jan 6 at 10:55














            Your Answer






            StackExchange.ifUsing("editor", function () {
            StackExchange.using("externalEditor", function () {
            StackExchange.using("snippets", function () {
            StackExchange.snippets.init();
            });
            });
            }, "code-snippets");

            StackExchange.ready(function() {
            var channelOptions = {
            tags: "".split(" "),
            id: "1"
            };
            initTagRenderer("".split(" "), "".split(" "), channelOptions);

            StackExchange.using("externalEditor", function() {
            // Have to fire editor after snippets, if snippets enabled
            if (StackExchange.settings.snippets.snippetsEnabled) {
            StackExchange.using("snippets", function() {
            createEditor();
            });
            }
            else {
            createEditor();
            }
            });

            function createEditor() {
            StackExchange.prepareEditor({
            heartbeatType: 'answer',
            autoActivateHeartbeat: false,
            convertImagesToLinks: true,
            noModals: true,
            showLowRepImageUploadWarning: true,
            reputationToPostImages: 10,
            bindNavPrevention: true,
            postfix: "",
            imageUploader: {
            brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
            contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
            allowUrls: true
            },
            onDemand: true,
            discardSelector: ".discard-answer"
            ,immediatelyShowMarkdownHelp:true
            });


            }
            });














            draft saved

            draft discarded


















            StackExchange.ready(
            function () {
            StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53844269%2fhow-do-i-create-a-fat-js-file-with-rollup-using-esm%23new-answer', 'question_page');
            }
            );

            Post as a guest















            Required, but never shown

























            2 Answers
            2






            active

            oldest

            votes








            2 Answers
            2






            active

            oldest

            votes









            active

            oldest

            votes






            active

            oldest

            votes









            1














            As far as I can tell this is not possible. I instead had to move the import from the ui project to the server project and create a static js file that looked like this...



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


            and import the esm.browser version



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


            Now Vue is working, however, dependencies like Vue-Router appear to not have this es.browser style file.






            share|improve this answer




























              1














              As far as I can tell this is not possible. I instead had to move the import from the ui project to the server project and create a static js file that looked like this...



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


              and import the esm.browser version



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


              Now Vue is working, however, dependencies like Vue-Router appear to not have this es.browser style file.






              share|improve this answer


























                1












                1








                1







                As far as I can tell this is not possible. I instead had to move the import from the ui project to the server project and create a static js file that looked like this...



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


                and import the esm.browser version



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


                Now Vue is working, however, dependencies like Vue-Router appear to not have this es.browser style file.






                share|improve this answer













                As far as I can tell this is not possible. I instead had to move the import from the ui project to the server project and create a static js file that looked like this...



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


                and import the esm.browser version



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


                Now Vue is working, however, dependencies like Vue-Router appear to not have this es.browser style file.







                share|improve this answer












                share|improve this answer



                share|improve this answer










                answered Dec 31 '18 at 14:09









                JackieJackie

                7,1571986178




                7,1571986178

























                    -1














                    This is not a solution, it's a workaround



                    The below rollup config is not esm, it's just a way to create a bundle with dependencies included.



                    You get one minified browser-compatible JS file.



                    Here's my working example rollup.config.js (you should replace input: 'src/index.js' with your web app entry point and output.file with a location for the generated bundle):



                    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,
                    }
                    ];


                    One more thing: express should statically serve the output.file path, not your source files






                    share|improve this answer


























                    • I need to use esm this uses Babel and umd

                      – Jackie
                      Jan 4 at 14:06













                    • well, my answer is not a solution, it's an alternative

                      – Tudor Ilisoi
                      Jan 6 at 10:55


















                    -1














                    This is not a solution, it's a workaround



                    The below rollup config is not esm, it's just a way to create a bundle with dependencies included.



                    You get one minified browser-compatible JS file.



                    Here's my working example rollup.config.js (you should replace input: 'src/index.js' with your web app entry point and output.file with a location for the generated bundle):



                    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,
                    }
                    ];


                    One more thing: express should statically serve the output.file path, not your source files






                    share|improve this answer


























                    • I need to use esm this uses Babel and umd

                      – Jackie
                      Jan 4 at 14:06













                    • well, my answer is not a solution, it's an alternative

                      – Tudor Ilisoi
                      Jan 6 at 10:55
















                    -1












                    -1








                    -1







                    This is not a solution, it's a workaround



                    The below rollup config is not esm, it's just a way to create a bundle with dependencies included.



                    You get one minified browser-compatible JS file.



                    Here's my working example rollup.config.js (you should replace input: 'src/index.js' with your web app entry point and output.file with a location for the generated bundle):



                    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,
                    }
                    ];


                    One more thing: express should statically serve the output.file path, not your source files






                    share|improve this answer















                    This is not a solution, it's a workaround



                    The below rollup config is not esm, it's just a way to create a bundle with dependencies included.



                    You get one minified browser-compatible JS file.



                    Here's my working example rollup.config.js (you should replace input: 'src/index.js' with your web app entry point and output.file with a location for the generated bundle):



                    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,
                    }
                    ];


                    One more thing: express should statically serve the output.file path, not your source files







                    share|improve this answer














                    share|improve this answer



                    share|improve this answer








                    edited Jan 6 at 12:46

























                    answered Jan 4 at 10:22









                    Tudor IlisoiTudor Ilisoi

                    2,1731318




                    2,1731318













                    • I need to use esm this uses Babel and umd

                      – Jackie
                      Jan 4 at 14:06













                    • well, my answer is not a solution, it's an alternative

                      – Tudor Ilisoi
                      Jan 6 at 10:55





















                    • I need to use esm this uses Babel and umd

                      – Jackie
                      Jan 4 at 14:06













                    • well, my answer is not a solution, it's an alternative

                      – Tudor Ilisoi
                      Jan 6 at 10:55



















                    I need to use esm this uses Babel and umd

                    – Jackie
                    Jan 4 at 14:06







                    I need to use esm this uses Babel and umd

                    – Jackie
                    Jan 4 at 14:06















                    well, my answer is not a solution, it's an alternative

                    – Tudor Ilisoi
                    Jan 6 at 10:55







                    well, my answer is not a solution, it's an alternative

                    – Tudor Ilisoi
                    Jan 6 at 10:55




















                    draft saved

                    draft discarded




















































                    Thanks for contributing an answer to Stack Overflow!


                    • Please be sure to answer the question. Provide details and share your research!

                    But avoid



                    • Asking for help, clarification, or responding to other answers.

                    • Making statements based on opinion; back them up with references or personal experience.


                    To learn more, see our tips on writing great answers.




                    draft saved


                    draft discarded














                    StackExchange.ready(
                    function () {
                    StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53844269%2fhow-do-i-create-a-fat-js-file-with-rollup-using-esm%23new-answer', 'question_page');
                    }
                    );

                    Post as a guest















                    Required, but never shown





















































                    Required, but never shown














                    Required, but never shown












                    Required, but never shown







                    Required, but never shown

































                    Required, but never shown














                    Required, but never shown












                    Required, but never shown







                    Required, but never shown







                    Popular posts from this blog

                    Monofisismo

                    Angular Downloading a file using contenturl with Basic Authentication

                    Olmecas