Rollup + React不编译JSX

Question

我正在尝试使用Rollup + React，但当汇总遇到JSX时，我会添加一个错误。

Unexpected token... export default () => <p>M...

我有一个触发错误的存储库。我发现的所有使用Rollup + React的文档/示例都不使用最新的Babel，因此它可能与Babel有关。

rollup.config.js:

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

export default [{
        input: 'src/index.js',
        output: {
        name: 'index',
        file: pkg.main,
        format: 'umd'
    },
    plugins: [
        resolve(),
        commonjs(),
        babel({ 
            exclude: 'node_modules/**',
            presets: ['@babel/env', '@babel/preset-react']
        })
    ],
    external: [
        'react',
        'prop-types',
    ],
    globals: {
        react: "React"
    }
},
];

.babelrc:

{
  "presets": [
  ["@babel/env", { "modules": false }], "@babel/preset-react"]
}

Answer 1

解决这个问题的方法是用两个插件的顺序交换

发自：

plugins: [
    resolve(),
    commonjs(),
    babel({ 
        exclude: 'node_modules/**',
        presets: ['@babel/env', '@babel/preset-react']
    })
],

至：

plugins: [
    resolve(),
    babel({ 
        exclude: 'node_modules/**',
        presets: ['@babel/env', '@babel/preset-react']
    }),
    commonjs()
],

谢谢vladshcherbin。

Answer 2

对于任何遇到这一问题的人，建议根据文档在babel之前放置公共内容。这个问题可以通过添加下面的commonjs({ include: /node_modules/ })来解决。

这很好地解释了为什么https://github.com/rollup/plugins/issues/805#issuecomment-779902868