javascript - Node : Merge ES6 JS modules to 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 文件保持不变。所以我可以使用这些文件添加新功能等，然后我可以创建新的 production .js-file 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.map 使用 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 文件，您可以使用加载器，例如 sass-loader with style-loader 和 file loader。