babel 7 not transpiling when used in rollup with typescript plugin












0















I Cannot seem to get rollup-plugin-babel to work in my typescript project.
The .ts code compiles and rollup packages, map files are generated but babel does not transpile it.



Also if I run npx babel lab.js --out-file lab-es5.js babel seem to work just fine.



This my rollup.config.js



import commonjs from 'rollup-plugin-commonjs';
import nodeResolve from 'rollup-plugin-node-resolve';
import typescript from 'rollup-plugin-typescript2'
import sourcemaps from 'rollup-plugin-sourcemaps';
import babel from 'rollup-plugin-babel';

var plugins = [
nodeResolve({
module: true,
jsnext: true,
main: true,
preferBuiltins: false
}),
commonjs({
include: 'node_modules/**', // Default: undefined
ignoreGlobal: false, // Default: false
}),
typescript(/*{ plugin options }*/),
babel({
exclude: 'node_modules/**',
runtimeHelpers: true
}),
sourcemaps()
];

export default [
{
input: 'src/lab.ts',
plugins,
output: {
name: "TablePager",
file: 'lab.js',
format: 'iife',
sourcemap: true
}
}
];


and this is my .babelrc



{
"presets": ["@babel/preset-env"]
}


If you have any clues as to what I am doing wrong I am greatful.










share|improve this question



























    0















    I Cannot seem to get rollup-plugin-babel to work in my typescript project.
    The .ts code compiles and rollup packages, map files are generated but babel does not transpile it.



    Also if I run npx babel lab.js --out-file lab-es5.js babel seem to work just fine.



    This my rollup.config.js



    import commonjs from 'rollup-plugin-commonjs';
    import nodeResolve from 'rollup-plugin-node-resolve';
    import typescript from 'rollup-plugin-typescript2'
    import sourcemaps from 'rollup-plugin-sourcemaps';
    import babel from 'rollup-plugin-babel';

    var plugins = [
    nodeResolve({
    module: true,
    jsnext: true,
    main: true,
    preferBuiltins: false
    }),
    commonjs({
    include: 'node_modules/**', // Default: undefined
    ignoreGlobal: false, // Default: false
    }),
    typescript(/*{ plugin options }*/),
    babel({
    exclude: 'node_modules/**',
    runtimeHelpers: true
    }),
    sourcemaps()
    ];

    export default [
    {
    input: 'src/lab.ts',
    plugins,
    output: {
    name: "TablePager",
    file: 'lab.js',
    format: 'iife',
    sourcemap: true
    }
    }
    ];


    and this is my .babelrc



    {
    "presets": ["@babel/preset-env"]
    }


    If you have any clues as to what I am doing wrong I am greatful.










    share|improve this question

























      0












      0








      0








      I Cannot seem to get rollup-plugin-babel to work in my typescript project.
      The .ts code compiles and rollup packages, map files are generated but babel does not transpile it.



      Also if I run npx babel lab.js --out-file lab-es5.js babel seem to work just fine.



      This my rollup.config.js



      import commonjs from 'rollup-plugin-commonjs';
      import nodeResolve from 'rollup-plugin-node-resolve';
      import typescript from 'rollup-plugin-typescript2'
      import sourcemaps from 'rollup-plugin-sourcemaps';
      import babel from 'rollup-plugin-babel';

      var plugins = [
      nodeResolve({
      module: true,
      jsnext: true,
      main: true,
      preferBuiltins: false
      }),
      commonjs({
      include: 'node_modules/**', // Default: undefined
      ignoreGlobal: false, // Default: false
      }),
      typescript(/*{ plugin options }*/),
      babel({
      exclude: 'node_modules/**',
      runtimeHelpers: true
      }),
      sourcemaps()
      ];

      export default [
      {
      input: 'src/lab.ts',
      plugins,
      output: {
      name: "TablePager",
      file: 'lab.js',
      format: 'iife',
      sourcemap: true
      }
      }
      ];


      and this is my .babelrc



      {
      "presets": ["@babel/preset-env"]
      }


      If you have any clues as to what I am doing wrong I am greatful.










      share|improve this question














      I Cannot seem to get rollup-plugin-babel to work in my typescript project.
      The .ts code compiles and rollup packages, map files are generated but babel does not transpile it.



      Also if I run npx babel lab.js --out-file lab-es5.js babel seem to work just fine.



      This my rollup.config.js



      import commonjs from 'rollup-plugin-commonjs';
      import nodeResolve from 'rollup-plugin-node-resolve';
      import typescript from 'rollup-plugin-typescript2'
      import sourcemaps from 'rollup-plugin-sourcemaps';
      import babel from 'rollup-plugin-babel';

      var plugins = [
      nodeResolve({
      module: true,
      jsnext: true,
      main: true,
      preferBuiltins: false
      }),
      commonjs({
      include: 'node_modules/**', // Default: undefined
      ignoreGlobal: false, // Default: false
      }),
      typescript(/*{ plugin options }*/),
      babel({
      exclude: 'node_modules/**',
      runtimeHelpers: true
      }),
      sourcemaps()
      ];

      export default [
      {
      input: 'src/lab.ts',
      plugins,
      output: {
      name: "TablePager",
      file: 'lab.js',
      format: 'iife',
      sourcemap: true
      }
      }
      ];


      and this is my .babelrc



      {
      "presets": ["@babel/preset-env"]
      }


      If you have any clues as to what I am doing wrong I am greatful.







      typescript babel rollup






      share|improve this question













      share|improve this question











      share|improve this question




      share|improve this question










      asked Nov 22 '18 at 19:45









      JGoodgiveJGoodgive

      542413




      542413
























          2 Answers
          2






          active

          oldest

          votes


















          0














          Your .babelrc is missing @babel/preset-typescript. Try installing the package and adding it to the configuration:



          {
          "presets": [
          "@babel/preset-env",
          "@babel/preset-typescript"
          ]
          }





          share|improve this answer
























          • But I am not using babel to transpile ts only to go from es6 to es5. So the preset-typescript shouldn't be needed. Am I correct?

            – JGoodgive
            Jan 13 at 16:26






          • 1





            @JGoodgive Ah sorry, I misread. Did you try setting the extensions option of rollup-plugin-babel so that it includes .ts files? Like babel({ extensions: ['.ts', '.js'], runtimeHelpers: true }).

            – denisw
            Jan 14 at 14:22





















          0














          Checkout Microsoft's TypeScript-Babel-Starter and the rollup section.



          import commonjs from 'rollup-plugin-commonjs';
          import resolve from 'rollup-plugin-node-resolve';
          import babel from 'rollup-plugin-babel';
          import pkg from './package.json';

          const extensions = [
          '.js', '.jsx', '.ts', '.tsx',
          ];

          const name = 'RollupTypeScriptBabel';

          export default {
          input: './src/index.ts',

          // Specify here external modules which you don't want to include in your bundle (for instance: 'lodash', 'moment' etc.)
          // https://rollupjs.org/guide/en#external-e-external
          external: ,

          plugins: [
          // Allows node_modules resolution
          resolve({ extensions }),

          // Allow bundling cjs modules. Rollup doesn't understand cjs
          commonjs(),

          // Compile TypeScript/JavaScript files
          babel({ extensions, include: ['src/**/*'] }),
          ],

          output: [{
          file: pkg.main,
          format: 'cjs',
          }, {
          file: pkg.module,
          format: 'es',
          }, {
          file: pkg.browser,
          format: 'iife',
          name,

          // https://rollupjs.org/guide/en#output-globals-g-globals
          globals: {},
          }],
          };


          .babelrc



          {
          "presets": [
          "@babel/env",
          "@babel/typescript"
          ],
          "plugins": [
          "@babel/proposal-class-properties",
          "@babel/proposal-object-rest-spread"
          ]
          }





          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',
            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%2f53437261%2fbabel-7-not-transpiling-when-used-in-rollup-with-typescript-plugin%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









            0














            Your .babelrc is missing @babel/preset-typescript. Try installing the package and adding it to the configuration:



            {
            "presets": [
            "@babel/preset-env",
            "@babel/preset-typescript"
            ]
            }





            share|improve this answer
























            • But I am not using babel to transpile ts only to go from es6 to es5. So the preset-typescript shouldn't be needed. Am I correct?

              – JGoodgive
              Jan 13 at 16:26






            • 1





              @JGoodgive Ah sorry, I misread. Did you try setting the extensions option of rollup-plugin-babel so that it includes .ts files? Like babel({ extensions: ['.ts', '.js'], runtimeHelpers: true }).

              – denisw
              Jan 14 at 14:22


















            0














            Your .babelrc is missing @babel/preset-typescript. Try installing the package and adding it to the configuration:



            {
            "presets": [
            "@babel/preset-env",
            "@babel/preset-typescript"
            ]
            }





            share|improve this answer
























            • But I am not using babel to transpile ts only to go from es6 to es5. So the preset-typescript shouldn't be needed. Am I correct?

              – JGoodgive
              Jan 13 at 16:26






            • 1





              @JGoodgive Ah sorry, I misread. Did you try setting the extensions option of rollup-plugin-babel so that it includes .ts files? Like babel({ extensions: ['.ts', '.js'], runtimeHelpers: true }).

              – denisw
              Jan 14 at 14:22
















            0












            0








            0







            Your .babelrc is missing @babel/preset-typescript. Try installing the package and adding it to the configuration:



            {
            "presets": [
            "@babel/preset-env",
            "@babel/preset-typescript"
            ]
            }





            share|improve this answer













            Your .babelrc is missing @babel/preset-typescript. Try installing the package and adding it to the configuration:



            {
            "presets": [
            "@babel/preset-env",
            "@babel/preset-typescript"
            ]
            }






            share|improve this answer












            share|improve this answer



            share|improve this answer










            answered Jan 8 at 21:52









            deniswdenisw

            2,1951315




            2,1951315













            • But I am not using babel to transpile ts only to go from es6 to es5. So the preset-typescript shouldn't be needed. Am I correct?

              – JGoodgive
              Jan 13 at 16:26






            • 1





              @JGoodgive Ah sorry, I misread. Did you try setting the extensions option of rollup-plugin-babel so that it includes .ts files? Like babel({ extensions: ['.ts', '.js'], runtimeHelpers: true }).

              – denisw
              Jan 14 at 14:22





















            • But I am not using babel to transpile ts only to go from es6 to es5. So the preset-typescript shouldn't be needed. Am I correct?

              – JGoodgive
              Jan 13 at 16:26






            • 1





              @JGoodgive Ah sorry, I misread. Did you try setting the extensions option of rollup-plugin-babel so that it includes .ts files? Like babel({ extensions: ['.ts', '.js'], runtimeHelpers: true }).

              – denisw
              Jan 14 at 14:22



















            But I am not using babel to transpile ts only to go from es6 to es5. So the preset-typescript shouldn't be needed. Am I correct?

            – JGoodgive
            Jan 13 at 16:26





            But I am not using babel to transpile ts only to go from es6 to es5. So the preset-typescript shouldn't be needed. Am I correct?

            – JGoodgive
            Jan 13 at 16:26




            1




            1





            @JGoodgive Ah sorry, I misread. Did you try setting the extensions option of rollup-plugin-babel so that it includes .ts files? Like babel({ extensions: ['.ts', '.js'], runtimeHelpers: true }).

            – denisw
            Jan 14 at 14:22







            @JGoodgive Ah sorry, I misread. Did you try setting the extensions option of rollup-plugin-babel so that it includes .ts files? Like babel({ extensions: ['.ts', '.js'], runtimeHelpers: true }).

            – denisw
            Jan 14 at 14:22















            0














            Checkout Microsoft's TypeScript-Babel-Starter and the rollup section.



            import commonjs from 'rollup-plugin-commonjs';
            import resolve from 'rollup-plugin-node-resolve';
            import babel from 'rollup-plugin-babel';
            import pkg from './package.json';

            const extensions = [
            '.js', '.jsx', '.ts', '.tsx',
            ];

            const name = 'RollupTypeScriptBabel';

            export default {
            input: './src/index.ts',

            // Specify here external modules which you don't want to include in your bundle (for instance: 'lodash', 'moment' etc.)
            // https://rollupjs.org/guide/en#external-e-external
            external: ,

            plugins: [
            // Allows node_modules resolution
            resolve({ extensions }),

            // Allow bundling cjs modules. Rollup doesn't understand cjs
            commonjs(),

            // Compile TypeScript/JavaScript files
            babel({ extensions, include: ['src/**/*'] }),
            ],

            output: [{
            file: pkg.main,
            format: 'cjs',
            }, {
            file: pkg.module,
            format: 'es',
            }, {
            file: pkg.browser,
            format: 'iife',
            name,

            // https://rollupjs.org/guide/en#output-globals-g-globals
            globals: {},
            }],
            };


            .babelrc



            {
            "presets": [
            "@babel/env",
            "@babel/typescript"
            ],
            "plugins": [
            "@babel/proposal-class-properties",
            "@babel/proposal-object-rest-spread"
            ]
            }





            share|improve this answer




























              0














              Checkout Microsoft's TypeScript-Babel-Starter and the rollup section.



              import commonjs from 'rollup-plugin-commonjs';
              import resolve from 'rollup-plugin-node-resolve';
              import babel from 'rollup-plugin-babel';
              import pkg from './package.json';

              const extensions = [
              '.js', '.jsx', '.ts', '.tsx',
              ];

              const name = 'RollupTypeScriptBabel';

              export default {
              input: './src/index.ts',

              // Specify here external modules which you don't want to include in your bundle (for instance: 'lodash', 'moment' etc.)
              // https://rollupjs.org/guide/en#external-e-external
              external: ,

              plugins: [
              // Allows node_modules resolution
              resolve({ extensions }),

              // Allow bundling cjs modules. Rollup doesn't understand cjs
              commonjs(),

              // Compile TypeScript/JavaScript files
              babel({ extensions, include: ['src/**/*'] }),
              ],

              output: [{
              file: pkg.main,
              format: 'cjs',
              }, {
              file: pkg.module,
              format: 'es',
              }, {
              file: pkg.browser,
              format: 'iife',
              name,

              // https://rollupjs.org/guide/en#output-globals-g-globals
              globals: {},
              }],
              };


              .babelrc



              {
              "presets": [
              "@babel/env",
              "@babel/typescript"
              ],
              "plugins": [
              "@babel/proposal-class-properties",
              "@babel/proposal-object-rest-spread"
              ]
              }





              share|improve this answer


























                0












                0








                0







                Checkout Microsoft's TypeScript-Babel-Starter and the rollup section.



                import commonjs from 'rollup-plugin-commonjs';
                import resolve from 'rollup-plugin-node-resolve';
                import babel from 'rollup-plugin-babel';
                import pkg from './package.json';

                const extensions = [
                '.js', '.jsx', '.ts', '.tsx',
                ];

                const name = 'RollupTypeScriptBabel';

                export default {
                input: './src/index.ts',

                // Specify here external modules which you don't want to include in your bundle (for instance: 'lodash', 'moment' etc.)
                // https://rollupjs.org/guide/en#external-e-external
                external: ,

                plugins: [
                // Allows node_modules resolution
                resolve({ extensions }),

                // Allow bundling cjs modules. Rollup doesn't understand cjs
                commonjs(),

                // Compile TypeScript/JavaScript files
                babel({ extensions, include: ['src/**/*'] }),
                ],

                output: [{
                file: pkg.main,
                format: 'cjs',
                }, {
                file: pkg.module,
                format: 'es',
                }, {
                file: pkg.browser,
                format: 'iife',
                name,

                // https://rollupjs.org/guide/en#output-globals-g-globals
                globals: {},
                }],
                };


                .babelrc



                {
                "presets": [
                "@babel/env",
                "@babel/typescript"
                ],
                "plugins": [
                "@babel/proposal-class-properties",
                "@babel/proposal-object-rest-spread"
                ]
                }





                share|improve this answer













                Checkout Microsoft's TypeScript-Babel-Starter and the rollup section.



                import commonjs from 'rollup-plugin-commonjs';
                import resolve from 'rollup-plugin-node-resolve';
                import babel from 'rollup-plugin-babel';
                import pkg from './package.json';

                const extensions = [
                '.js', '.jsx', '.ts', '.tsx',
                ];

                const name = 'RollupTypeScriptBabel';

                export default {
                input: './src/index.ts',

                // Specify here external modules which you don't want to include in your bundle (for instance: 'lodash', 'moment' etc.)
                // https://rollupjs.org/guide/en#external-e-external
                external: ,

                plugins: [
                // Allows node_modules resolution
                resolve({ extensions }),

                // Allow bundling cjs modules. Rollup doesn't understand cjs
                commonjs(),

                // Compile TypeScript/JavaScript files
                babel({ extensions, include: ['src/**/*'] }),
                ],

                output: [{
                file: pkg.main,
                format: 'cjs',
                }, {
                file: pkg.module,
                format: 'es',
                }, {
                file: pkg.browser,
                format: 'iife',
                name,

                // https://rollupjs.org/guide/en#output-globals-g-globals
                globals: {},
                }],
                };


                .babelrc



                {
                "presets": [
                "@babel/env",
                "@babel/typescript"
                ],
                "plugins": [
                "@babel/proposal-class-properties",
                "@babel/proposal-object-rest-spread"
                ]
                }






                share|improve this answer












                share|improve this answer



                share|improve this answer










                answered Jan 9 at 13:51









                codeBeltcodeBelt

                924811




                924811






























                    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%2f53437261%2fbabel-7-not-transpiling-when-used-in-rollup-with-typescript-plugin%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

                    Costa Masnaga

                    Fotorealismo

                    Sidney Franklin