Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Activity
    we need a automatic transformer.
    from es6 to es5
    what do you think?
    @explosivesushii_twitter
    because do you think we need to write the source code in es5?
    explosivesushi
    @explosivesushii_twitter
    You can use a local Webpack version to transpile your code to ES5 or just use ES5 on its own. The distribution folder will always be in ES5
    Your distribution folder could be a full version, min version or a folder with all the separate components as es5
    MicroDreamIT
    @MicroDreamIT

    we can make directory structure like this as Sean(core dev of webpack) suggested

    /src (converted code)
    shape.js (entry file)
        /assets
            tab.js (es-5)
    /dev-code
      /assets
          Tab.js(es-6)

    like this

    explosivesushi
    @explosivesushii_twitter
    Best is probably on root
    So you can do import { Tab } from “shapecss” in Webpack
    MicroDreamIT
    @MicroDreamIT
    because as Sean suggested us that we should no longer write code in es5.
    yes
    explosivesushi
    @explosivesushii_twitter
    Yes, you will need to compile with a local Webpack.config
    MicroDreamIT
    @MicroDreamIT
    just we need to configure the transformer that convert es6 code to es5
    exactly
    explosivesushi
    @explosivesushii_twitter
    but one question is why are you mixing the file from node modules?
    MicroDreamIT
    @MicroDreamIT
    because people use npm install shapecss. Naturally it will be on node_module.
    explosivesushi
    @explosivesushii_twitter
    yes but why would they need to compile from source?
    You can easily just .copy or concat the file using .scripts on your dist es5 file or do you want to let them choose?
    MicroDreamIT
    @MicroDreamIT
    i can use it outside personally outside.
    They need to compile from node_module. That's what we are trying to fix
    explosivesushi
    @explosivesushii_twitter
    You will have to set up a package.json with .babelrc and webpack.config.js
    MicroDreamIT
    @MicroDreamIT
    yes they can do it. What I am trying to do that it can be use everywhere. Exactly bro. Because we can make something perfect.
    explosivesushi
    @explosivesushii_twitter
    I’m sure you will figure it out
    Good luck :-)
    MicroDreamIT
    @MicroDreamIT
    I am trying my best. Because i have you.
    explosivesushi
    @explosivesushii_twitter
    I think you will learn a lot more without my help :-) so keep on going!
    MicroDreamIT
    @MicroDreamIT
    can i ask your help?
    Cristi Jora
    @cristijora
    @MicroDreamIT so what's the issue exactly ?
    I read the comments above and I can say the following:
    If you want something that can be used with npm as well as a direct script and have a nice development you probably want to write the code in es6
    and compile it to es5 for browser
    this is usually done with libraryTarget: "umd"
    Cristi Jora
    @cristijora
    also you could compile to common js which is the (require) version and es version which is the es6 version with imports
    you can see that here https://unpkg.com/vue@2.3.4/dist/
    there are basically 3 versions
    vue.js is the broswer (umd) version
    vue.common.js is the version which works with require
    vue.esm.js is the version which works with imports and code splitting/tree shaking
    then via package json you can specify the target files for each bundling type
    "main" should point to the common.js version
    while "module" should point to the esm version
    which is basically an instant cdn for any npm module
    By doing all this stuff you achieve:
    1. Automatic CDN for the browser (umd) version which can be included directly with a script tag
    2. A common js version which is linked with "main" in package.json that can be used with older bundlers (webpack 1 and browserify )
    3. An esm version which is linked via "module" in package.json that can be used with webpack 2/3 or rollup and can benefit from tree shaking and other good stuff
    Cristi Jora
    @cristijora
    So if you
    var shapecss = require('shapecss') it will get the commonjs version automatically
    import shapecss from 'shapecss' will get the esm module version automatically
    MicroDreamIT
    @MicroDreamIT
    @cristijora got it bro, now i am turning to webpack.conf with automatic es5 transformer
    MicroDreamIT
    @MicroDreamIT
    8c531aafc7d5aeee5d55e36ead2626c3bb1ce6e2
    MicroDreamIT
    @MicroDreamIT
    Please ask me any question regarding Shapecss