构建 NPM 包时出现 `RollupError: Expression Expect`

Question

之后，我完成了环境准备，使用 ROLLUP 捆绑器为 React JS 构建第一个 NPM 包，我得到了

RollupError: Expression expected

，如下所示

错误输出

> rollup -c --environment NODE_ENV:development

development mode bundle

src/index.js → dist/index.js...
[!] RollupError: Expression expected
src/horizon-card/index.js (15:8)
13:     dataList.forEach((service)=>{
14:       serviceList.push(
15:         <li key={index}
            ^

我尝试使用大括号“{}”来修复它，但似乎问题是由于在.push<方法中使用尖括号“

”而发生的

rollup.config.js

import terser from "@rollup/plugin-terser";

const devMode = (process.env.NODE_ENV === 'development');
console.log(`${ devMode ? 'development' : 'production' } mode bundle`);


export default [
  {
    input: 'src/index.js',
    output: {
      file: "dist/index.js",
      format: 'es',
      sourcemap: devMode ? 'inline' : false,
      plugins: [
        terser({
          ecma: 2020,
          mangle: { toplevel: true },
          compress: {
            module: true,
            toplevel: true,
            unsafe_arrows: true,
            drop_console: !devMode,
            drop_debugger: !devMode
          },
          output: { quote_style: 1 }
        })
      ]
    }
  }
]

我想使用 ROLLUP 捆绑器为 ReactJS 构建 NPM 包，但我的包在 push 数组的方法中使用

HTML

标签。

Answer 1

就我而言，我使用 Vite 创建了项目，默认情况下它在其 javascript 文件上使用 .jsx 扩展名。我遇到此错误是因为我尝试从 .js 文件导入组件。更改扩展名后，错误消失了。