Document plugin / preset workflows #6

Activity

1. brownieboy commented on Feb 25, 2016

   

   brownieboy

   on Feb 25, 2016

   More actions

   +1 for seeing the "JSX for React" documentation.

   I'm trying to use the SystemJS plugin-babel with React, but can't see how to configure it correctly. I'm not using JSPM, by the way, so is that even possible? This is as far as I got: https://github.com/brownieboy/react-systemjs-babelplugin-example

   I managed to get it transpiling ES2015 (i.e. no React) here https://github.com/brownieboy/systemjs-babelplugin-example.
2. kuhe commented on Mar 17, 2016

   

   kuhe

   on Mar 17, 2016

   More actions

   Regarding JSX & React,

   It could be mentioned that to avoid loading 300 JS files in the browser, jspm 0.17(beta) can do a bundle for example of the following contents, separate from your application code:

       require('react');
       require('react-dom');
       require('systemjs-plugin-babel');
       require('../jspm_packages/npm/babel-plugin-transform-react-jsx@6.6.0/lib/index.js');
   

   But it needs to be imported with <script charset="utf-8"></script> due to a particular RegExp.
3. stoffeastrom commented on Apr 9, 2016

   

   stoffeastrom

   on Apr 9, 2016

   More actions

   +1 for custom plugins. For example how would I use the transform-decorators-legacy babel plugin?
4. kavi87 commented on May 13, 2016

   

   kavi87

   on May 13, 2016

   More actions

   I'd love to know how to use the transform-decorators-legacy plugin as well.
5. guybedford commented on May 15, 2016

   

   guybedford

   on May 15, 2016

   MemberAuthor

   More actions

   It's worth using jspm for these cases (jspm install npm:transform-decorators-legacy) then setting the plugins config as in https://github.com/systemjs/plugin-babel#custom-presets-and-transforms.
6. EisenbergEffect commented on Jun 28, 2016

   

   EisenbergEffect

   on Jun 28, 2016

   More actions

   @guybedford How would we add the transform-decorators-legacy plugin?
7. guybedford commented on Jul 1, 2016

   

   guybedford

   on Jul 1, 2016

   MemberAuthor

   More actions

   @EisenbergEffect this can be done via:

   jspm install npm:babel-plugin-transform-decorators-legacy --dev
   

   then adding to the configuration file:

   babelOptions: {
     plugins: ['babel-plugin-transform-decorators-legacy']
   }
8. EisenbergEffect commented on Jul 1, 2016

   

   EisenbergEffect

   on Jul 1, 2016

   More actions

   I'm interested to see how I would set this up without using jspm.
9. guybedford commented on Jul 1, 2016

   

   guybedford

   on Jul 1, 2016

   MemberAuthor

   More actions

   @EisenbergEffect one approach that can work here (although isn't really a good idea) is to use jspm to create a build of the plugin (although that will then suck in all the parts of Babel itself that it needs).

   So you can do:

   jspm build babel-plugin-transform-decorators-legacy --format amd decorators-plugin-build.js

   And then change the babelOptions to reference that file to use decorators:

   babelOptions: {
     plugins: ['decorators-plugin-build.js']
   }

   That build file can then work in non-jspm SystemJS projects.
10. FullStackForger commented on Sep 2, 2016

    

    FullStackForger

    on Sep 2, 2016

    More actions

    Why would it suck in other parts of babel @guybedford?
11. super2457 commented on Sep 17, 2016

    

    super2457

    on Sep 17, 2016

    More actions

    I wasted a day here.
12. guybedford commented on Sep 19, 2016

    

    guybedford

    on Sep 19, 2016

    MemberAuthor

    More actions

    @super2457 sorry to hear that. You can use @node/babel-plugin-x as the plugin name if you will only use the transpiler for bundling and not browser loading.