How to use common JS modules in font-end app?











up vote
-3
down vote

favorite












I have this class:



class Validations {
static required (value) {
// code...
}

static min (value, arg) {
// code...
}

static max (value, arg) {
// code...
}
}

module.exports = Validations;


In my Node.js back-end i require it like this:



const Validations = require('./Validations.js');



I need to use it in my Vue app as well, but when I use require(), I get error:



Cannot assign to read only property 'exports' of object '#<Object>'



Is there any way to set Babel to transpile it into common JS module?










share|improve this question






















  • Yes. Yes there is.
    – Jared Smith
    Nov 21 at 15:33










  • Possible duplicate of How to use npm modules in browser? is possible to use them even in local (PC) ? - javascript
    – Jared Smith
    Nov 21 at 15:38















up vote
-3
down vote

favorite












I have this class:



class Validations {
static required (value) {
// code...
}

static min (value, arg) {
// code...
}

static max (value, arg) {
// code...
}
}

module.exports = Validations;


In my Node.js back-end i require it like this:



const Validations = require('./Validations.js');



I need to use it in my Vue app as well, but when I use require(), I get error:



Cannot assign to read only property 'exports' of object '#<Object>'



Is there any way to set Babel to transpile it into common JS module?










share|improve this question






















  • Yes. Yes there is.
    – Jared Smith
    Nov 21 at 15:33










  • Possible duplicate of How to use npm modules in browser? is possible to use them even in local (PC) ? - javascript
    – Jared Smith
    Nov 21 at 15:38













up vote
-3
down vote

favorite









up vote
-3
down vote

favorite











I have this class:



class Validations {
static required (value) {
// code...
}

static min (value, arg) {
// code...
}

static max (value, arg) {
// code...
}
}

module.exports = Validations;


In my Node.js back-end i require it like this:



const Validations = require('./Validations.js');



I need to use it in my Vue app as well, but when I use require(), I get error:



Cannot assign to read only property 'exports' of object '#<Object>'



Is there any way to set Babel to transpile it into common JS module?










share|improve this question













I have this class:



class Validations {
static required (value) {
// code...
}

static min (value, arg) {
// code...
}

static max (value, arg) {
// code...
}
}

module.exports = Validations;


In my Node.js back-end i require it like this:



const Validations = require('./Validations.js');



I need to use it in my Vue app as well, but when I use require(), I get error:



Cannot assign to read only property 'exports' of object '#<Object>'



Is there any way to set Babel to transpile it into common JS module?







javascript node.js webpack babel






share|improve this question













share|improve this question











share|improve this question




share|improve this question










asked Nov 21 at 15:27









Ondřej Cibulka

11




11












  • Yes. Yes there is.
    – Jared Smith
    Nov 21 at 15:33










  • Possible duplicate of How to use npm modules in browser? is possible to use them even in local (PC) ? - javascript
    – Jared Smith
    Nov 21 at 15:38


















  • Yes. Yes there is.
    – Jared Smith
    Nov 21 at 15:33










  • Possible duplicate of How to use npm modules in browser? is possible to use them even in local (PC) ? - javascript
    – Jared Smith
    Nov 21 at 15:38
















Yes. Yes there is.
– Jared Smith
Nov 21 at 15:33




Yes. Yes there is.
– Jared Smith
Nov 21 at 15:33












Possible duplicate of How to use npm modules in browser? is possible to use them even in local (PC) ? - javascript
– Jared Smith
Nov 21 at 15:38




Possible duplicate of How to use npm modules in browser? is possible to use them even in local (PC) ? - javascript
– Jared Smith
Nov 21 at 15:38












1 Answer
1






active

oldest

votes

















up vote
0
down vote













You can use babel, but I prefer browserify.



Here is how to do it:



npm i browseryfy --save

browserify /full-path-tofile/Validations.js:validations>bundle.js

browserify /full-path-tofile/Validations.js>main.js



  • this is the command to create the module:


Run both of these commands, place the files in the root of your project and require them in the html's head tag as scripts.
Remember, after each change, you must rebuild the files again.



To require the module you just do:



const blah = require('validations');





share|improve this answer























    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',
    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%2f53415332%2fhow-to-use-common-js-modules-in-font-end-app%23new-answer', 'question_page');
    }
    );

    Post as a guest















    Required, but never shown

























    1 Answer
    1






    active

    oldest

    votes








    1 Answer
    1






    active

    oldest

    votes









    active

    oldest

    votes






    active

    oldest

    votes








    up vote
    0
    down vote













    You can use babel, but I prefer browserify.



    Here is how to do it:



    npm i browseryfy --save

    browserify /full-path-tofile/Validations.js:validations>bundle.js

    browserify /full-path-tofile/Validations.js>main.js



    • this is the command to create the module:


    Run both of these commands, place the files in the root of your project and require them in the html's head tag as scripts.
    Remember, after each change, you must rebuild the files again.



    To require the module you just do:



    const blah = require('validations');





    share|improve this answer



























      up vote
      0
      down vote













      You can use babel, but I prefer browserify.



      Here is how to do it:



      npm i browseryfy --save

      browserify /full-path-tofile/Validations.js:validations>bundle.js

      browserify /full-path-tofile/Validations.js>main.js



      • this is the command to create the module:


      Run both of these commands, place the files in the root of your project and require them in the html's head tag as scripts.
      Remember, after each change, you must rebuild the files again.



      To require the module you just do:



      const blah = require('validations');





      share|improve this answer

























        up vote
        0
        down vote










        up vote
        0
        down vote









        You can use babel, but I prefer browserify.



        Here is how to do it:



        npm i browseryfy --save

        browserify /full-path-tofile/Validations.js:validations>bundle.js

        browserify /full-path-tofile/Validations.js>main.js



        • this is the command to create the module:


        Run both of these commands, place the files in the root of your project and require them in the html's head tag as scripts.
        Remember, after each change, you must rebuild the files again.



        To require the module you just do:



        const blah = require('validations');





        share|improve this answer














        You can use babel, but I prefer browserify.



        Here is how to do it:



        npm i browseryfy --save

        browserify /full-path-tofile/Validations.js:validations>bundle.js

        browserify /full-path-tofile/Validations.js>main.js



        • this is the command to create the module:


        Run both of these commands, place the files in the root of your project and require them in the html's head tag as scripts.
        Remember, after each change, you must rebuild the files again.



        To require the module you just do:



        const blah = require('validations');






        share|improve this answer














        share|improve this answer



        share|improve this answer








        edited Nov 21 at 16:28

























        answered Nov 21 at 16:21









        squeekyDave

        329112




        329112






























             

            draft saved


            draft discarded



















































             


            draft saved


            draft discarded














            StackExchange.ready(
            function () {
            StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53415332%2fhow-to-use-common-js-modules-in-font-end-app%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

            A CLEAN and SIMPLE way to add appendices to Table of Contents and bookmarks

            Calculate evaluation metrics using cross_val_predict sklearn

            Insert data from modal to MySQL (multiple modal on website)