Ionic 2 изменить имя main.js (параметр webpack.js output.filename)

ИЗМЕНИТЬ

Гораздо более простое решение, которое с меньшей вероятностью сломается, когда у ionic есть серьезные обновления.

https://gist.github.com/haydenbr/7df417a8678efc404c820c61b6ffdd24

Итак, очистка кеша с помощью ionic. Это хакерское решение, но пока оно работает. Проблема в том, что ионная система сборки иногда слишком сильно абстрагируется. Еще в октябре нас спросили, есть ли способ реализовать очистку кеша. Команда ionic ответила, что они могут подумать об этом в будущем, но с тех пор никаких действий по этому поводу не велось. Вот проблема с github.

Итак, я покажу все изменения в конфигурации webpack и package.json, а затем все объясню.

Раздел конфигурации вашего package.json должен выглядеть следующим образом.

  "config": {
    "ionic_webpack": "./webpack.config.js",
    "ionic_source_map_type": "source-map",
    "ionic_uglifyjs": "./www/uglifyjs.config.json"
  }

Для вашей конфигурации веб-пакета ваша запись и вывод могут оставаться прежними. Убедитесь, что вам требуются следующие модули, а затем вы захотите добавить следующие плагины:

var path = require('path'),
    fs = require('fs'),
    ManifestPlugin = require('webpack-manifest-plugin'),
    HtmlWebpackPlugin = require('html-webpack-plugin');

...

plugins: [
  new HtmlWebpackPlugin({
    filename: './../index.html',
    inject: 'body',
    template: './src/index.html',
    title: 'My App',
  }),
  new ManifestPlugin(),
  updateFileName
]

где updateFileName выглядит следующим образом

function updateFileName() {
  this.plugin("done", function() {
  var manifest = require(process.env.IONIC_BUILD_DIR + '/manifest.json'),
      fileName = process.env.IONIC_OUTPUT_JS_FILE_NAME;

    updateUglifyConfig(fileName, manifest);

    process.env.IONIC_OUTPUT_JS_FILE_NAME = manifest[fileName];
  });
}

function updateUglifyConfig(fileName, manifest) {
  var uglifyConfig = {
    sourceFile: manifest[fileName],
    destFileName: manifest[fileName],
    inSourceMap: manifest[fileName + '.map'],
    outSourceMap: manifest[fileName + '.map'],
    mangle: true,
    compress: true,
    comments: true
  };

  // we're writing this to www because it's specific to the current
  // build and we don't want to commit it
  fs.writeFileSync(
    path.join(__dirname, 'www', 'uglifyjs.config.json'),
    JSON.stringify(uglifyConfig, null, 4)
  );
}

Так что же здесь происходит на самом деле? Прежде всего, в package.json нам нужно сгенерировать новую конфигурацию uglify для процесса сборки ionic. Вы можете изменить имя файла в середине сборки, и пока вы назначаете новое имя process.env.IONIC_OUTPUT_JS_FILE_NAME, остальная часть сборки будет работать нормально, за исключением того, что шаг uglify будет по-прежнему искать имя по умолчанию, main.js. Мы увидим, как мы сгенерируем это ниже.

Теперь о трех подключаемых модулях, которые мы добавляем.

Первый творит магию. Это действительно настраивается. Как это настроено, он берет index.html по умолчанию, устанавливает заголовок, вставляет тег <script> для вывода javascript, а затем записывает его туда, где вы указали в свойстве имени файла. Если вы используете index.html по умолчанию, полученный из ионного стартового приложения, все, что вам нужно сделать, это избавиться от <script src="build/main.js"></script>, и он автоматически поместит новую ссылку в свое имя файла с хэшем в нем. Документы здесь.

Следующий плагин выводит для нас файл манифеста, чтобы мы могли узнать имя файла с хэшем. По умолчанию он выводит его в www/build/. Документы здесь.

Следующий плагин назначает новое имя файла для process.env.IONIC_OUTPUT_JS_FILE_NAME и генерирует для нас новую конфигурацию uglify. По сути, мы берем полученный манифест, записываем новую конфигурацию uglify в каталог www, а затем назначаем новое имя файла из того, что мы получили из манифеста.

Вот и все. Если вы не хотите, чтобы кеш очищался для разработчиков, сохраните плагин html, избавьтесь от двух других, а затем измените имя выходного файла обратно на process.env.IONIC_OUTPUT_JS_FILE_NAME. Если вы сделаете это, вам вообще не нужно будет ссылаться на основной файл js в вашем src/index.html. Он будет добавлен независимо от того, работаете ли вы с разработчиком или продуктом. Для получения дополнительной информации об использовании различных настроек веб-пакетов для разных сред, проверьте это.

ОБНОВЛЕНИЕ:

Для ионной 3:

1. Убедитесь, что у вас есть эти настройки в compilerOptions вашего tsconfig:

"module": "es2015", "target": "es5"

2. npm i cheerio --save-dev
3. в конфигурации вашего веб-пакета добавьте var cheerio = require('cheerio')
4. Избавьтесь от плагина Webpack Manifest.

5. Измените updateFileName на следующее:

   function updateFileName() {
     this.plugin("done", function(stats) {
       var buildOutput = stats.toJson()['assetsByChunkName']['main'],
           fileName = process.env.IONIC_OUTPUT_JS_FILE_NAME,
           manifest = {
             [fileName]: buildOutput[0],
             [fileName + '.map']: buildOutput[1]
           };
   
       updateUglifyConfig(fileName, manifest);
   
       process.env.IONIC_OUTPUT_JS_FILE_NAME = manifest[fileName];
       console.log('IONIC_OUTPUT_JS_FILE_NAME', process.env.IONIC_OUTPUT_JS_FILE_NAME);
     });
   }
   

6. Избавьтесь от плагина Html Webpack

7. Вместо плагина html поместите следующую функцию в массив плагинов в конфигурации вашего веб-пакета:

   function updateIndexHTML() {
   this.plugin("done", function(stats) {
   var buildOutput = stats.toJson()['assetsByChunkName']['main'],
       outputFileName = buildOutput[0],
       currentIndexHTML = fs.readFileSync(
         path.join(__dirname, 'src', 'index.html'),
         { encoding: 'utf8' }
       ),
       $ = cheerio.load(currentIndexHTML);
   
   $('body').append(`<script src="build/${outputFileName}"></script>`);
   
   fs.writeFileSync(
     path.join(process.env.IONIC_WWW_DIR, 'index.html'),
     $.html()
   );
     });
   }
   

Я нашел лучшее решение этой проблемы в ветке форума ionic (https://forum.ionicframework.com/t/file-revisions/75028/2, автор aszmyd), который также решает проблему хеширования имени файла main.css. Я внес небольшие изменения в скрипт, так как у меня нет ни oauth.html, ни kajam.js.

Преимущество этого решения в том, что оно не пытается перехватить ионную сборку, а просто работает с результатами.

(Несомненно, кто-то возражает против того, как я публикую это, но это было очень полезно для меня и, я надеюсь, для других. Я не могу представить себе веб-приложение без полной очистки кеша для всех файлов css и js. )

Чтобы запустить это, просто добавьте:

node <the-file-name.js>

в вашей сборке после завершения сборки ionic script.

#!/usr/bin/env node
'use strict';

var md5File = require('md5-file'),
    fs = require('fs');

/**
 * This script renames files inside platforms/browser/www/ folder and updates their references in html files like index.html
 * The mechanism is for improve caching. So file like `main.js` will be renamed to `main.[FILE-MD5-HASH].js` and its references
 * in html files will be updated.
 */
var buildFolder = 'www/';
var assetsFolder = buildFolder + 'build/';

var jsFiles = [
    'main'
];
var cssFiles = [
    'main'
];
var htmlFilesToUpdate = [
    'index.html'
];
var replacements = [];

jsFiles.forEach(function (file) {
    var hash = md5File.sync(assetsFolder + file + '.js');
    renameFile(file + '.js', file + '.' + hash + '.js');
});

cssFiles.forEach(function (file) {
    var hash = md5File.sync(assetsFolder + file + '.css');
    renameFile(file + '.css', file + '.' + hash + '.css');
});
htmlFilesToUpdate.forEach(function (htmlFile) {
    console.log('Update "' + htmlFile + '" with new file revisions.');
    console.log('Replacements: ' + JSON.stringify(replacements));
    replacements.forEach(function (replacementObject) {
        replaceInFile(buildFolder + htmlFile, replacementObject.from, replacementObject.to);
    });
});

function renameFile(input, output) {
    console.log('Rename "' + input + '" to "' + output + '"');
    fs.rename(assetsFolder + input, assetsFolder + output);
    if (fs.existsSync(assetsFolder + input + '.map')) {
        console.log('Rename "' + input + '.map" to "' + output + '.map"');
        fs.rename(assetsFolder + input + '.map', assetsFolder + output + '.map');
    }
    replacements.push({from: input, to: output});
}

function replaceInFile(file, regex, replacement) {
    var fileContents = fs.readFileSync(file, 'utf-8');
    fs.writeFileSync(file, fileContents.replace(regex, replacement), 'utf8');
}

Это решение отлично работает с Ionic 2.x и 3.x.

#!/usr/bin/env node

var fs = require('fs'),
    path = require('path'),
    cheerio = require('cheerio'),
    revHash = require('rev-hash');

/**
 *
 * @param string fileName
 * @returns string
 */
function hashFile(file) {

    // Get file name
    var fileName = file.replace(/\.[^/.]+$/, "");
    // Get file extension
    var re = /(?:\.([^.]+))?$/;
    var fileExtension = re.exec(file)[1];

    var filePath = path.join(buildDir, file);
    var fileHash = revHash(fs.readFileSync(filePath));
    var fileNewName = `${fileName}.${fileHash}.${fileExtension}`;
    var fileNewPath = path.join(buildDir, fileNewName);
    var fileNewRelativePath = path.join('build', fileNewName);
    //Rename file
    console.log("cache-busting.js:hashFile:Renaming " + filePath + " to " + fileNewPath);
    fs.renameSync(filePath, fileNewPath);

    return fileNewRelativePath;
}


var rootDir = path.resolve(__dirname);
var wwwRootDir = path.resolve(rootDir, 'www');
var buildDir = path.join(wwwRootDir, 'build');
var indexPath = path.join(wwwRootDir, 'index.html');
$ = cheerio.load(fs.readFileSync(indexPath, 'utf-8'));

$('head link[href="build/main.css"]').attr('href', hashFile('main.css'));
$('body script[src="build/main.js"]').attr('src', hashFile('main.js'));
$('body script[src="build/polyfills.js"]').attr('src', hashFile('polyfills.js'));
$('body script[src="build/vendor.js"]').attr('src', hashFile('vendor.js'));

fs.writeFileSync(indexPath, $.html());