javascript - 如何缩小我个人的 jquery 前端微框架

Question

我用有用的实用程序制作了我个人的 jQuery 微框架。它的目录结构如下:

/jspocket
  - jspocket.js
  /scripts
    - include.js
    - navigation.js
    - slider.js
    - popups.js
    ...

因此它被导入到 html 中是这样的:

<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="js/jspocket/jspocket.js"></script>

在 jspocket.js 中，这段代码用于将“/script”目录中的所有 .js 文件导入到 html 文件中:

$.getScript(jspocket_dir + "/scripts/navigation.js");
$.getScript(jspocket_dir + "/scripts/popups.js");
$.getScript(jspocket_dir + "/scripts/slider.js");
$.getScript(jspocket_dir + "/scripts/include.js");
...

---

现在我想创建一个缩小版的框架，这样就只有一个文件 jspocket.min.js。但问题是命令如下:

$.getScript(jspocket_dir + "/scripts/navigation.js");

将不起作用，因为 scripts/navigation.js 不存在于缩小版本中，它应该全部在一个文件中。

所以问题是如何将框架缩小到一个文件中(无需手动将所有代码复制到一个文件中)？我应该更改脚本的导入方式吗？ JS 的新导入/导出功能是否以某种方式解决了它？这个问题一般是怎么解决的？我正在使用 node.js 和 npm，所以也许有适合这个的软件包？

Answer 1

您需要使用构建系统将文件缩小到一个文件中，但将 jspocket.js 排除在该过程之外。

有很多构建系统，比如 GruntJs , Webpack或 Gulp

下面是在 Gulp 中的实现方式

// the plugins
var gulp = require('gulp')
var uglify = require("gulp-uglify");
var concat = require('gulp-concat');

// task
gulp.task('minify-js', function () {
    gulp.src([
       ./jspocket/scripts/navigation.js,
       // the rest of your files in your order
    ]) 
    .pipe(concat('jspocket.min.js'))  
    .pipe(uglify())
    .pipe(gulp.dest('dist'));
});

然后运行 ​​gulp minify-js