导入 3rd 方库时的 CommonJS 汇总插件语法错误，主要与“进程”有关

Posted 2023-02-19

【中文标题】导入 3rd 方库时的 CommonJS 汇总插件语法错误，主要与“进程”有关

【英文标题】：CommonJS rollup plugin syntax error when importing 3rd party libraries, mostly related to 'process'

【发布时间】：2021-09-25 19:45:20

【问题描述】：

我一直在做一个自定义汇总配置，它采用一个 React 项目，并在 index.html 中内联 js 和 css。 当我导入一些第三方反应库（如 material-ui-color）时，我遇到了 CommonJS 的问题，它说存在语法错误。到目前为止，在我尝试安装的库中，“进程”这个词是它最常用的词。以下是 material-ui-color 问题的日志：

[!] (plugin commonjs) SyntaxError: Unexpected token (205:28) in /Users/meyerm/Documents/GitHub/button-generator-figma-plugin/node_modules/jss/dist/jss.esm.js
node_modules/jss/dist/jss.esm.js (205:28)
203:     var newValue = value;
204:
205:     if (!options || options.process !== false) 
                                 ^

我已经包含了 rollup-plugin-replace 来修复任何出现的 process.env.NODE_ENV 但这似乎是一个不同的问题。

这是我的汇总配置：

import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import babel from '@rollup/plugin-babel';
import livereload from 'rollup-plugin-livereload';
import replace from '@rollup/plugin-replace';
import  terser  from 'rollup-plugin-terser';
import postcss from 'rollup-plugin-postcss';
import html from 'rollup-plugin-bundle-html-plus';
import typescript from 'rollup-plugin-typescript';
import svgr from '@svgr/rollup';

const production = !process.env.ROLLUP_WATCH;

export default [
  /* 
  Transpiling React code and injecting into index.html for Figma  
  */
  
    input: 'src/app/index.tsx',
    output: 
      name: 'ui',
      file: 'dist/bundle.js',
      format: 'umd',
    ,
    plugins: [
      // What extensions is rollup looking for
      resolve(
        extensions: ['.jsx', '.js', '.json', '.ts', '.tsx'],
      ),

      // Manage process.env
      replace(
        preventAssignment: true,
        process: JSON.stringify(
          env: 
            isProd: production,
          ,
        ),
        'process.env.NODE_ENV': JSON.stringify(production),
      ),

      typescript( sourceMap: !production ),

      // Babel config to support React
      babel(
        presets: ['@babel/preset-react', '@babel/preset-env'],
        babelHelpers: 'runtime',
        plugins: ['@babel/plugin-transform-runtime'],
        extensions: ['.js', '.ts', 'tsx', 'jsx'],
        compact: true,
        exclude: 'node_modules/**',
      ),

      commonjs(
        include: 'node_modules/**',
      ),

      svgr(),

      // Config to allow sass and css modules
      postcss(
        extensions: ['.css, .scss, .sass'],
        modules: true,
        use: ['sass'],
      ),

      // Injecting UI code into ui.html
      html(
        template: 'src/app/index.html',
        dest: 'dist',
        filename: 'index.html',
        inline: true,
        inject: 'body',
        ignore: /code.js/,
      ),

      // If dev mode, serve and livereload
      !production && serve(),
      !production && livereload('dist'),

      // If prod mode, minify
      production && terser(),
    ],
    watch: 
      clearScreen: true,
    ,
  ,

  /* 
  Main Figma plugin code
  */
  
    input: 'src/plugin/controller.ts',
    output: 
      file: 'dist/code.js',
      format: 'iife',
      name: 'code',
    ,
    plugins: [resolve(), typescript(), commonjs( transformMixedEsModules: true ), production && terser()],
  ,
];

function serve() 
  let started = false;

  return 
    writeBundle() 
      if (!started) 
        started = true;

        // Start localhost dev server on port 5000 to work on the UI in the browser
        require('child_process').spawn('npm', ['run', 'start', '--', '--dev'], 
          stdio: ['ignore', 'inherit', 'inherit'],
          shell: true,
        );
      
    ,
  ;

有什么想法可以克服这个问题并轻松地将 3rd 方库导入项目吗？

【参考方案1】：

我建议用以下方式重写配置：

replace(
  "process.env.isProd": production,
),