Щойно почав використовувати browserify , але я не можу знайти документацію щодо того, як змусити його розсипати мініфікований вивід.
Отже, я виглядаю приблизно так:
$> browserify main.js > bundle.js --minified
Щойно почав використовувати browserify , але я не можу знайти документацію щодо того, як змусити його розсипати мініфікований вивід.
Отже, я виглядаю приблизно так:
$> browserify main.js > bundle.js --minified
Відповіді:
Проведіть через uglifyjs:
browserify main.js | uglifyjs > bundle.js
Ви можете встановити його за допомогою npm приблизно так:
npm install -g uglify-js
Починаючи з 3.38.x, ви можете використовувати мій плагін minifyify, щоб зменшити свій пакет і все ще мати корисні джерельні карти . Це неможливо з іншими рішеннями - найкраще, що ви можете зробити, це відобразити назад до нестиснутого пакета. Мініфікуйте карти аж до ваших окремих вихідних файлів (так, навіть до coffeescript!)
Або скористайтеся перетворенням uglifyify, яке "дає вам перевагу, застосовуючи перетворення" вичавлювання "Uglify до того, як воно буде оброблено Browserify, тобто ви можете видалити мертві шляхи коду для умовних вимог."
Провівши кілька годин, досліджуючи, як будувати нові процеси збірки, я подумав, що інші можуть отримати користь від того, що я в підсумку зробив. Я відповідаю на це старе запитання, оскільки воно видається високо в Google.
Мій випадок використання залучений трохи більше, ніж просив OP. У мене є три сценарії побудови: розробка, тестування, виробництво. Оскільки більшість професійних розробників матимуть однакові вимоги, я вважаю, що це вибачливо виходити за рамки початкового питання.
У розробці я використовую watchify для створення нестисненого набору з вихідною картою щоразу, коли змінюється файл JavaScript. Я не хочу крок uglify, оскільки я хочу, щоб збірка закінчилася до того, як я перейду на вкладку alt у браузері, щоб натиснути кнопку оновлення, і це все одно не приносить користі під час розробки. Для досягнення цього я використовую:
watchify app/index.js --debug -o app/bundle.js -v
Для тестування я хочу точно такий самий код, що і виробничий (наприклад, з погіршенням), але також хочу вихідну карту. Я досягаю цього за допомогою:
browserify app/index.js -d | uglifyjs -cm -o app/bundle.js --source-map "content=inline,filename='bundle.js',url='bundle.js.map'"
Для виробництва код стискається з uglify, і немає вихідної карти.
browserify app/index.js | uglifyjs -cm > app/bundle.js
Примітки:
Я використав ці інструкції у Windows 7, MacOS High Sierra та Ubuntu 16.04.
Я перестав використовувати minifyify, оскільки він більше не підтримується.
Є, можливо, кращі способи, ніж те, що я ділюсь. Я прочитав, очевидно, можна отримати чудове стиснення, погіршуючи всі вихідні файли перед комбінуванням з browserify. Якщо у вас є більше часу, щоб витратити на це, ніж у мене, ви можете розглянути це.
Якщо у вас уже не встановлено watchify, uglify-js або browserify, встановіть їх за допомогою npm таким чином:
npm install -g browserify
npm install -g watchify
npm install -g uglify-js
Якщо у вас встановлені старі версії, я рекомендую вам оновити. Особливо uglify-js, коли вони внесли надзвичайну зміну в аргументи командного рядка, що робить недійсним багато інформації, яка надходить у Google.
Більше не потрібно використовувати плагіни для зменшення, зберігаючи вихідну карту:
browserify main.js --debug | uglifyjs --in-source-map inline --source-map-inline > bundle.js
Мені подобається терсер, який має підтримку ES6 +, а також хорошу композицію.
browserify main.js | terser --compress --mangle > bundle.js
Встановіть глобально:
npm i -g terser