babel 7 在与 typescript 插件一起使用时不会转译

Question

我似乎无法让 rollup-plugin-babel 在我的打字稿项目中工作。 .ts 代码编译和汇总包，生成地图文件但 babel 不转译它。

另外，如果我运行 npx babel lab.js --out-file lab-es5.js babel 似乎工作得很好。

这是我的 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
        }
    }
];

这是我的.babelrc

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

如果你对我做错了什么有任何线索，我很感激。

Answer 1

说明

默认情况下，@rollup/plugin-babel 启用了以下扩展：

.js
.jsx
.es6
.es
.mjs

因此，在使用@rollup/plugin-babel 和@rollup/plugin-typescript 时，有两件重要的事情需要设置。

1. 您必须告诉它使用 TypeScript 扩展（默认情况下未启用）。
2. 您必须告诉它您要转译哪些文件。

由于某些原因，文档说默认情况下，所有文件都被转译。对于具有 TypeScript 扩展名的文件，情况并非如此。所以你必须手动设置include 选项。

幸运的是，对于第二个选项，您可以告诉它使用 glob 模式。设置文件夹不起作用。

示例

这是一个例子。在这种情况下，所有要转换的 TypeScript 文件都在 src 文件夹中。

"use strict";

import babel from "@rollup/plugin-babel";
import typescript from "@rollup/plugin-typescript";

import { resolve } from "path";

export default {
    plugins: [
        typescript(),
        babel({
            extensions: [".ts"],
            include: resolve("src", "**", "*.ts")
        })
    ];
};

链接

• Rollup documentation。
• Babel plugin for Rollup documentation。
• TypeScript plugin for Rollup documentation。

Answer 2

您的.babelrc 丢失了@babel/preset-typescript。尝试安装软件包并将其添加到配置中：

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

Answer 3

查看 Microsoft 的 TypeScript-Babel-Starter 和汇总部分。

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"
  ]
}