javascript - 将 npm 与 Vanilla js 一起使用

Question

由于日常工作项目的治理限制，我无法使用很多不错的新 JS 库和框架。因此，对于 MVP，我们使用直接(非缩小)加载到客户端(粗略)的 vanilla JS。虽然这是向管理层展示这不是最佳方法的好方法，但我仍然必须把它拿出来。然而，我们确实在我们的开发机器上安装了 NPM 和 Node，我想用它来优化我们的 JS 成一个组合包，用哈希来打破缓存。

我的问题是如何收集一堆不相交的 JS 文件并将它们添加到新的 NPM 项目中以进行缩小，同时避免预期的变量、对象和函数被 webpack/prettify 破坏？

我尝试将 js 文件复制到 src 目录，并添加正常的导入/导出行，但我在控制台中收到一堆“找不到标识符”消息，所以我认为很多东西都在获取损坏。

我有一些使用 create-react-app 进行 React 副项目的经验，但不幸的是，这使我免于以艰难的方式设置项目的痛苦，现在我正在为我的缺乏经验付出代价。

编辑:为了更简洁，我试图将一堆现有的 js 文件打包成一个包，同时保持相同的界面。如果这不可能，请告诉我。否则，一个起点将是理想的。

Answer 1

在 browserify、babel、webpack、grunt、gulp 之前的日子里，我们只是连接文件并缩小它们。由于文件将其 API 公开为全局对象，所以一切都保持正常工作，就好像文件包含在不同的脚本标签中一样。

在 Linux 上你可以简单地这样做

cat a.js b.js c.js | uglifyjs -cm > bundle.js

文件通常以分号开头，以确保在连接它们时不会中断。

一旦配置了 babel，集成就很容易了

cat a.js b.js c.js | babel | uglifyjs -cm > bundle.js

https://babeljs.io/docs/usage/cli/