如何使用Rollup打包含ES7代码的文件？遇语法错误求解决方案

这问题我碰到过！Rollup默认的解析器不支持类字段（也就是你用的static name = 'MyES7App'这种静态类属性语法）——虽然Chrome已经支持这类ESNext特性，但Rollup本身并没有将其纳入默认的语法解析范围，所以才会抛出Unexpected token错误。

因为你明确说不需要转译代码、只需要合并打包，那完全可以通过添加Rollup语法支持插件来解决，不需要做任何代码转译操作：

• 首先安装对应的语法支持插件：

  npm install --save-dev @rollup/plugin-syntax-class-properties
  

• 然后在你的rollup.config.js配置文件中引入并启用这个插件：

  import syntaxClassProperties from '@rollup/plugin-syntax-class-properties';
  
  export default {
    input: 'static/app.js', // 你的入口文件路径
    output: {
      file: 'dist/bundle.js', // 打包后的输出文件路径
      format: 'es' // 保持ES模块格式，无需转译
    },
    plugins: [
      syntaxClassProperties() // 启用类字段语法支持
    ]
  };
  

这个插件的作用仅仅是让Rollup能够识别这类ESNext语法，不会对代码做任何转译处理，打包后的代码会完全保留你原来的ES7写法，刚好符合你的需求。如果之后还遇到其他类似的ESNext语法解析错误，也可以查找对应的@rollup/plugin-syntax-*系列插件来解决。

内容的提问来源于stack exchange，提问作者Kludge