How to use @babel/preset-typescript - 10 common examples

//     // Use the normal config
            //     return cfg.options;
            // }

            const {
                __createDll,
                __react,
                __typescript = false
            } = customOptions;
            const { presets, plugins, ...options } = cfg.options;
            // console.log({ options });

            const newPresets = [...presets];
            if (__typescript) {
                newPresets.unshift([
                    require('@babel/preset-typescript').default,
                    __react
                        ? {
                              isTSX: true,
                              allExtensions: true
                          }
                        : {}
                ]);
                // console.log(newPresets);
            }
            // .filter(preset => {
            //     if (typeof preset.file === 'object' &&
            //         /^@babel\/preset-env$/.test(preset.file.request) &&
            //         process.env.WEBPACK_BUILD_STAGE === 'server'
            //     ) return false
            //     return true
            // })

function setup(tr, babel) {
  if (babel === 'babel') {
    require('@babel/register')({
      babelrc: false,
      presets: [
        [
          require('@babel/preset-env').default,
          {targets: {node: true}},
        ],
        /\.tsx?$/.test(tr) ?
          require('@babel/preset-typescript').default :
          require('@babel/preset-flow').default,
      ],
      plugins: [
        require('@babel/plugin-proposal-class-properties').default,
      ],
      extensions: [...DEFAULT_EXTENSIONS, '.ts', '.tsx'],
      // By default, babel register only compiles things inside the current working directory.
      // https://github.com/babel/babel/blob/2a4f16236656178e84b05b8915aab9261c55782c/packages/babel-register/src/node.js#L140-L157
      ignore: [
        // Ignore parser related files
        /@babel\/parser/,
        /\/flow-parser\//,
        /\/recast\//,
        /\/ast-types\//,
      ],
    });

function createConfig(es5, prod) {
  const buildPath = 'build';

  const entry = {
    scripts: './src/entrypoints/scripts.js',
  };

  const babelOptions = {};

  babelOptions.presets =
  [
    es5 && [
      require('@babel/preset-env').default,
      { modules: false },
    ],
    require('@babel/preset-typescript').default,
  ].filter(Boolean);

  const plugins = prod ?
    [new UglifyJsPlugin({
      extractComments: true,
      sourceMap: true,
      uglifyOptions: {
        // Disabling because it broke output
        mangle: false,
      },
    }),
    ] : [];

  return {
    mode: prod ? 'production' : 'development',
    devtool: prod ? 'source-map ' : 'inline-source-map',

// Exclude transforms that make all code slower
          exclude: ['transform-typeof-symbol'],
        },
      ],
      [
        require('@babel/preset-react').default,
        {
          // Adds component stack to warning messages
          // Adds __self attribute to JSX which React will use for some warnings
          development: isEnvDevelopment || isEnvTest,
          // Will use the native built-in instead of trying to polyfill
          // behavior for any plugins that require one.
          useBuiltIns: true,
        },
      ],
      isTypeScriptEnabled && [require('@babel/preset-typescript').default],
    ].filter(Boolean),
    plugins: [
      // Strip flow types before any other transform, emulating the behavior
      // order as-if the browser supported all of the succeeding features
      // https://github.com/facebook/create-react-app/pull/5182
      // We will conditionally enable this plugin below in overrides as it clashes with
      // @babel/plugin-proposal-decorators when using TypeScript.
      // https://github.com/facebook/create-react-app/issues/5741
      isFlowEnabled && [
        require('@babel/plugin-transform-flow-strip-types').default,
        false,
      ],
      // Experimental macros support. Will be documented after it's had some time
      // in the wild.
      require('babel-plugin-macros'),
      // Necessary to include regardless of the environment because

// Exclude transforms that make all code slower
          exclude: ['transform-typeof-symbol'],
        },
      ],
      [
        require('@babel/preset-react').default,
        {
          // Adds component stack to warning messages
          // Adds __self attribute to JSX which React will use for some warnings
          development: isEnvDevelopment || isEnvTest,
          // Will use the native built-in instead of trying to polyfill
          // behavior for any plugins that require one.
          useBuiltIns: true,
        },
      ],
      isTypeScriptEnabled && [require('@babel/preset-typescript').default],
    ].filter(Boolean),
    plugins: [
      // Strip flow types before any other transform, emulating the behavior
      // order as-if the browser supported all of the succeeding features
      // https://github.com/facebook/create-react-app/pull/5182
      // We will conditionally enable this plugin below in overrides as it clashes with
      // @babel/plugin-proposal-decorators when using TypeScript.
      // https://github.com/facebook/create-react-app/issues/5741
      isFlowEnabled && [
        require('@babel/plugin-transform-flow-strip-types').default,
        false,
      ],
      // Experimental macros support. Will be documented after it's had some time
      // in the wild.
      require('babel-plugin-macros'),
      // Necessary to include regardless of the environment because

configPath: config.context,
              // Allow importing core-js in entrypoint and use browserlist to select polyfills
              useBuiltIns: 'entry',
              corejs: 3,
              modules: false,
              // Exclude transforms that make all code slower
              exclude: ['transform-typeof-symbol']
            }
          ],
          [
            require('@babel/preset-react').default,
            {
              useBuiltIns: true
            }
          ],
          [require('@babel/preset-typescript').default]
        ],
        plugins: [
          require('babel-plugin-macros'),
          [require('@babel/plugin-proposal-decorators').default, false]
        ]
      }
    },
    test: /\.tsx?|jsx?$/,
    exclude: /node_modules/
  });

  return config;
}

// Exclude transforms that make all code slower
          exclude: ['transform-typeof-symbol'],
        },
      ],
      [
        require('@babel/preset-react').default,
        {
          // Adds component stack to warning messages
          // Adds __self attribute to JSX which React will use for some warnings
          development: isEnvDevelopment || isEnvTest,
          // Will use the native built-in instead of trying to polyfill
          // behavior for any plugins that require one.
          useBuiltIns: true,
        },
      ],
      isTypeScriptEnabled && [require('@babel/preset-typescript').default],
    ].filter(Boolean),
    plugins: [
      // Strip flow types before any other transform, emulating the behavior
      // order as-if the browser supported all of the succeeding features
      // https://github.com/facebook/create-react-app/pull/5182
      // We will conditionally enable this plugin below in overrides as it clashes with
      // @babel/plugin-proposal-decorators when using TypeScript.
      // https://github.com/facebook/create-react-app/issues/5741
      isFlowEnabled && [
        require('@babel/plugin-transform-flow-strip-types').default,
        false,
      ],
      // Experimental macros support. Will be documented after it's had some time
      // in the wild.
      require('babel-plugin-macros'),
      // Necessary to include regardless of the environment because

module.exports.babelLoaderConfig = ({ latestBuild }) => {
  if (latestBuild === undefined) {
    throw Error("latestBuild not defined for babel loader config");
  }
  return {
    test: /\.m?js$|\.tsx?$/,
    use: {
      loader: "babel-loader",
      options: {
        presets: [
          !latestBuild && [
            require("@babel/preset-env").default,
            { modules: false },
          ],
          [
            require("@babel/preset-typescript").default,
            {
              jsxPragma: "h",
            },
          ],
        ].filter(Boolean),
        plugins: [
          // Part of ES2018. Converts {...a, b: 2} to Object.assign({}, a, {b: 2})
          [
            "@babel/plugin-proposal-object-rest-spread",
            { loose: true, useBuiltIns: true },
          ],
          // Only support the syntax, Webpack will handle it.
          "@babel/syntax-dynamic-import",
          [
            "@babel/transform-react-jsx",
            {

exports.default = (function (api, opts) {
    if (opts === void 0) { opts = DEFAULT_OPTS; }
    return {
        presets: [
            require('@babel/preset-env').default,
            opts.flow && [require('@babel/preset-flow').default],
            opts.typescript && [require('@babel/preset-typescript').default],
            require('@babel/preset-react').default
        ].filter(Boolean),
        plugins: [
            require('@babel/plugin-syntax-dynamic-import').default
        ]
    };
});
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi9zcmMvaW5kZXgudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7QUFLQSxJQUFNLFlBQVksR0FBVztJQUN6QixJQUFJLEVBQUUsS0FBSztJQUNYLFVBQVUsRUFBRSxLQUFLO0NBQ3BCLENBQUE7QUFFRCxtQkFBZSxVQUFDLEdBQVEsRUFBRSxJQUEyQjtJQUEzQixxQkFBQSxFQUFBLG1CQUEyQjtJQUNqRCxPQUFPO1FBQ0gsT0FBTyxFQUFFO1lBQ0wsT0FBTyxDQUFDLG1CQUFtQixDQUFDLENBQUMsT0FBTztZQUNwQyxJQUFJLENBQUMsSUFBSSxJQUFJLENBQUMsT0FBTyxDQUFDLG9CQUFvQixDQUFDLENBQUMsT0FBTyxDQUFDO1lBQ3BELElBQUksQ0FBQyxVQUFVLElBQUksQ0FBQyxPQUFPLENBQUMsMEJBQTBCLENBQUMsQ0FBQyxPQUFPLENBQUM7WUFDaEUsT0FBTyxDQUFDLHFCQUFxQixDQUFDLENBQUMsT0FBTztTQUN6QyxDQUFDLE1BQU0sQ0FBQyxPQUFPLENBQUM7UUFDakIsT0FBTyxFQUFFO1lBQ0wsT0FBTyxDQUFDLHFDQUFxQyxDQUFDLENBQUMsT0FBTztTQUN6RDtLQUNKLENBQUE7QUFDTCxDQUFDLEVBQUEifQ==

const tsOpts = { allowNamespaces: opts.tsAllowNamespaces };
  if (opts.jsxPragma) tsOpts.jsxPragma = opts.jsxPragma;
  if (opts.typescript !== false) {
    /*
    result.presets.unshift({
      plugins: [
        require("./ts-no-consts"),
        [require("@babel/plugin-transform-typescript").default, tsOpts]
      ]
    });
    */
    result.presets.unshift(
      {
        plugins: [require("./ts-no-consts")]
      },
      [require("@babel/preset-typescript").default, tsOpts]
    );
  }
  result.overrides = [
    opts.flow !== false && {
      exclude: /\.tsx?$/,
      plugins: [require("@babel/plugin-transform-flow-strip-types").default]
    },
    opts.typescript !== false && {
      test: /\.tsx?$/,
      plugins: [
        [require("@babel/plugin-proposal-decorators").default, { legacy: true }]
      ]
    }
  ].filter(Boolean);
  return result;
};