JS压缩：将import语句编译合并到压缩文件的实现方案

我正在用Node.js开发一款面向网站的JS编译器，遇到了以下问题：

• 编译后的文件仍保留import语句，浏览器加载时抛出Uncaught SyntaxError: Cannot use import statement outside a module错误
• 旧编译方案会将import对应的文件内容合并到压缩文件中，但新方案仅直接复制import语句
• 尝试用terser和uglify-js编译，测试多个配置项均无法实现模块内容合并

当前代码示例：

import minify from '@node-minify/core';
import compressorJS from '@node-minify/terser';
import path from 'path'; // 补充缺失的模块导入

function compileJS(el, filename) {
    if (noisy) { console.log('\x1b[31mFCN compileJS (' + el + ')\x1b[0m'); }
    if (!el.includes('.min.')) {
        minify({
            compressor: compressorJS,
            type: 'js',
            input: el,
            output: path.resolve(__dirname + '/../../', outPutRouting(el.replace('.js', '.min.js'))),
            options: {
                ecma: 2015,
                sourceMap: true,
                mangle: false,
                compress: {}
            },
            callback: function(err, min) {
                if (err) {
                    console.log('\x1b[33mBug dans ' + el);
                    console.log(err);
                    console.log('\x1b[0m');
                }
                uploadFile(el);
            }
        })
    }
}

需求：实现将import导入的内容合并到压缩文件中，而非保留原语句。

核心说明 #

Terser（及uglify-js）仅负责代码的压缩、混淆和语法转换，不具备模块解析与依赖合并的能力，所以无论怎么配置都无法处理import语句的合并需求。你需要引入模块打包工具完成依赖合并，再配合压缩工具处理。

可选方案 #

1. 用Rollup先打包再压缩（推荐，配置简单）

Rollup是专注于ES模块的轻量打包工具，适合处理单文件或类库的依赖合并，可直接集成Terser压缩。

步骤：

• 安装依赖：

  npm install rollup rollup-plugin-terser --save-dev
  

• 修改编译逻辑，替换原@node-minify的调用：

  import { rollup } from 'rollup';
  import { terser } from 'rollup-plugin-terser';
  import path from 'path';
  
  async function compileJS(el, filename) {
      if (noisy) { console.log('\x1b[31mFCN compileJS (' + el + ')\x1b[0m'); }
      if (!el.includes('.min.')) {
          try {
              const bundle = await rollup({
                  input: el,
                  // 若依赖第三方npm包，需添加@rollup/plugin-node-resolve和@rollup/plugin-commonjs插件
              });
  
              const outputPath = path.resolve(__dirname + '/../../', outPutRouting(el.replace('.js', '.min.js')));
              await bundle.write({
                  file: outputPath,
                  format: 'iife', // 输出自执行函数，浏览器可直接运行
                  sourcemap: true,
                  plugins: [terser({
                      ecma: 2015,
                      mangle: false
                  })]
              });
  
              uploadFile(el);
          } catch (err) {
              console.log('\x1b[33mBug dans ' + el);
              console.log(err);
              console.log('\x1b[0m');
          }
      }
  }
  

2. 使用Webpack完成打包+压缩

Webpack功能更全面，适合复杂项目的模块打包，内置Terser压缩能力。

步骤：

• 安装依赖：

  npm install webpack webpack-cli --save-dev
  

• API调用示例：

  import webpack from 'webpack';
  import path from 'path';
  
  function compileJS(el, filename) {
      if (noisy) { console.log('\x1b[31mFCN compileJS (' + el + ')\x1b[0m'); }
      if (!el.includes('.min.')) {
          const outputPath = path.resolve(__dirname + '/../../', outPutRouting(el.replace('.js', '.min.js')));
          const compiler = webpack({
              entry: el,
              output: {
                  filename: path.basename(outputPath),
                  path: path.dirname(outputPath)
              },
              mode: 'production', // production模式自动开启压缩
              devtool: 'source-map',
              optimization: {
                  minimize: true,
                  minimizer: [
                      new webpack.optimize.TerserPlugin({
                          terserOptions: {
                              ecma: 2015,
                              mangle: false
                          }
                      })
                  ]
              }
          });
  
          compiler.run((err, stats) => {
              if (err || stats.hasErrors()) {
                  console.log('\x1b[33mBug dans ' + el);
                  console.log(err || stats.toString('errors-only'));
                  console.log('\x1b[0m');
                  return;
              }
              uploadFile(el);
          });
      }
  }
  

3. 扩展现有@node-minify流程（步骤繁琐，不推荐）

如果坚持使用@node-minify，需要分三步处理：

1. 用Babel将ES模块转为CommonJS
2. 用Browserify将CommonJS模块合并为单文件
3. 最后用@node-minify/terser压缩文件

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