节点：将 ES6 JS 模块合并到 one.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

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

I did a quit similar thing with my sass (compiling .scss into .css 8CBA22E28EB17B5F5C6AE2A266AZ , .css.map 8CBA22E28EB17B5F5C6AE2A266AZ.map , .min.ZC7A62 .min.css , .ZC7A62 .css.min.map using clean-css ). 但是对于像我这样的 node/npm 初学者来说，对我的 JS 做同样的事情似乎很复杂（使用独立的 uglify 不起作用）。

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

编辑：经过几个小时尝试推出和 webpack 的解决方案后，谁能举个例子如何做到这一点？ 我认为合并一个目录中的所有 js 文件并缩小结果并不难。

Answer 1

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