ホーム>source

便利なユーティリティを使用して、個人用の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 ファイルが1つだけになるようにします。 。しかし、問題は次のようなコマンドがあることです。

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

動作しない、単に scripts/navigation.js のため  縮小版には存在せず、すべて1つのファイルに収める必要があります。

質問は、フレームワークを1つのファイルに縮小する方法です(すべてのコードを1つのファイルに手動でコピーすることなく)。スクリプトのインポート方法を変更する必要がありますか? JSの新しいインポート/エクスポート機能は何とかそれを解決しますか?一般的にこの問題はどのように解決されますか?私はnode.jsとnpmを使用しているので、おそらくこれに適したパッケージがありますか?

あなたの答え
  • 解決した方法 # 1

    ビルドシステムを使用してファイルを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 を実行します

  • 前へ java - JPAクエリ:サブクエリをグループ化条件に結合する
  • 次へ php - $_POST値を渡して個々の結果情報を出力する