Question

我将一个库与Rollup捆绑在一起，并尝试从rollup-plugin-typescript2切换到rollup-plugin-babel来转换我的打字稿代码。

这通常可以正常工作，但是我需要添加扩展名，并且绝对路径无效。

使用打字稿编译器，我可以这样做：

import MyView from 'routes/myRoute/myView';

route位于src文件夹中，而我的tsconfig.json中有此文件夹：

...
"baseUrl": ".",
"paths": {
  "*": ["src/*"]
},
...

要使其与babel一起使用，我必须切换到相对导入并添加如下扩展名：

import MyView from './routes/myRoute/myView.tsx';

如何配置babel或/和汇总回到第一个实现？

这是我当前的汇总插件配置：

    resolve({
      extensions: ['ts', 'tsx', 'js', 'jsx', '.json'],
      customResolveOptions: {
        moduleDirectory: 'node_modules',
      },
      jail: '/src',
    }),
    babel({
      babelrc: false,
      configFile: false,
      envName: env === 'prod' ? 'production' : 'development',
      exclude: 'node_modules/**',
      extensions: ['ts', 'tsx', 'js', 'jsx', '.json'],
      plugins: [
        [
          'module-resolver',
          {
            extensions: ['ts', 'tsx', 'js', 'jsx', '.json'],
            root: ['./src'],
          },
        ],
      ],
      presets: [
        '@babel/preset-typescript',
        '@babel/preset-react',
        [
          '@babel/preset-env',
          {
            modules: false,
          },
        ],
      ],
    }),

（是的，我把扩展名放到各处，希望它能起作用）

Answer 1

您需要在.babelrc文件中定义TypeScript扩展名。您需要执行以下操作：

    class NavBar extends React.Component{
       // ...
    });
    window.NavBar = NavBar;

在这里查看详细示例：https://github.com/damassi/babel-7-typescript-example

rollupjs：使用babel和打字稿，无扩展名的绝对导入

1 个答案: