javascript - 将 npm 与 Vanilla js 一起使用

标签 javascript npm ecmascript-5

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

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

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

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

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

最佳答案

在 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/

关于javascript - 将 npm 与 Vanilla js 一起使用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45441956/

相关文章:

Javascript - 从数组中提取随机字符串并得到未定义

javascript - Vue 3 - inject() 只能在 setup() 或功能组件内部使用

reactjs - react : create-react-app fails with error "Cannot find module ' libnpx'

git - yarn 发布失败,因为 dist 文件夹已添加到 gitignore

node.js - Node js 中的 Google 云消息传递

javascript - 不能 .join() 函数参数 - TypeError : undefined is not a function

typescript - 将 TypeScript 编译为多个目标

javascript - 末尾数字和空格的正则表达式

javascript - 了解 ECMAScript 隐式分号和空格解析

javascript - 使用 JQuery .find() 访问 Bootstrap Modal 内的输入文本字段