Node：将 ES6 JS 模块合并到一个 .min.js 文件

Question

我前段时间创建了一个包含自定义元素的小型 JS/CSS 框架。现在我想使用npm和node.js改进我的工作流程（编译、合并、最小化......） ，所以我对此非常陌生。

每个组件（模块）都编写在单独的.js文件中。一个或多个组件之间可能存在依赖关系，例如：

文件： src/modules/component_1.js

class Component_1{
    // Code ...
}
export{
    Component_1
}

文件： src/modules/component_2.js

import {Component_1} from './component_1.js';
class Component_2{
    // Code ...
}
export{
    Component_2
}

我想要的是这样的结构：

my-project/
|-- js/
|   |-- components.js 
|   |-- components.min.js
|-- src/
|   |-- modules/
|       |-- component_1.js
|       |-- component_2.js
|       |-- ...
|       |-- component_30.js

• 我希望我的.js文件src/modules/保持不变。因此，我可以使用这些文件添加新功能等，然后我可以创建新的生产 .js文件js/components.min.js。
• 我想将其实现为脚本，以便我可以通过控制台调用它，例如npm ruin build-js。
• 第 1 步：将所有.js模块合并到一个文件中。因此，import必须删除我的模块中的所有语句。
• 第 2 步：将我的 ES6 模块编译为 CJS（？）。
• 步骤 3：将结果保存为js/components.js和js/components.min.js（缩小）。

我用我的 sass 做了类似的事情（编译.scss成.css, .css.map, .min.css, .css.min.mapusing clean-css）。但对于像我这样的 Node/npm 初学者来说，用我的 JS 做同样的事情似乎很复杂（使用独立的 uglify 不起作用）。

那么我该怎么做呢？有很多插件和包，如 webpack、rollup、uglify、grunt、gulp、yeoman 等。但我绝对不知道我到底需要哪些包。

编辑：在尝试使用 rollout 和 webpack 的解决方案几个小时后，任何人都可以举例说明如何做到这一点吗？我认为合并目录中的所有 js 文件并缩小结果并不是那么困难。

Answer 1

所以你可以使用webpack来创建js包，也就是说，你可以将你的js文件混入一个包中。Webpack 还具有缩小生产中代码的功能。您可以在其文档中了解有关 webpack 的更多信息：https://webpack.js.org/concepts/ 对于特殊文件，例如 sass 文件，您可以使用加载器，例如带有 style-loader 和文件加载器的 sass-loader。