如何缩小我个人的 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 中是用于将所有 .js 文件从“/script”目录导入到 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 的新 import/export 功能是否以某种方式解决了它？这个问题一般是怎么解决的？我正在使用 node.js 和 npm，所以也许有适合这个的软件包？

Answer 1

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

有很多构建系统，例如 GruntJs , Webpack or 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

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

How to minify my personal jquery frontend microframework

javascript

import

minify