Похоже на действительно глупый вопрос, на который где-то должен быть ответ, но я часами искал безрезультатно. Я новичок в ReactJS и строю с помощью Webpack, собираю конфигурации в целом. Я использую Webpack для связывания и объединения всего моего проекта, включая ReactJS. Он отлично работает, но я не могу придумать никакого способа получить пакет без минификации, чтобы я мог отлаживать проблемы, когда они возникают.
Вот моя конфигурация Webpack:
var webpack = require ('webpack'); var path = require ('path'); var BUILD_DIR = path.resolve (__ dirname, 'public/js'); var APP_DIR = path .resolve (__ dirname, 'build-source/js'); var config = {entry: APP_DIR + '\ main.js', output: {path: BUILD_DIR, filename: 'build.js'//нужен этот выходной файл для завершения un-minified}, module: {loaders: [{test:/.jsx?/, include: APP_DIR, loader: 'babel'}]}}; module.exports = config;
Я запускаю выполнение связывания с помощью npm run dev или npm run build , которые вызывают следующее из моего package.json:
{/* бла-бла */, "scripts": {"start": "node ./bin/www", "dev": "webpack -d --watch "," build ":" webpack -p "}," dependencies ": {" babel-core ":" ^ 6.16.0 "," babel-loader ":" ^ 6.2.5 "," babel-preset-react ":" ^ 6.16. 0 "," body-parser ":" ~ 1.15.1 "," cookie-parser ":" ~ 1.4.3 "," debug ":" ~ 2.2.0 "," express ":" ~ 4.13.4 " , "шлем": "^ 3.1.0", "morgan": "~ 1.7.0", "mysql": "^ 2.11.1", "querystring": "^ 0.2.0", "react": " ^ 15.3.2 "," react-dom ":" ^ 15.3.2 "," request ":" ^ 2.75.0 "," serve-favicon ":" ~ 2.3.0 "," webpack ":" ^ 1.13 .2 "}}
Что мне нужно изменить, чтобы получить un-minified пакеты JavaScript из моего исполнения Webpack?
Когда вы используете флаг -p для cli webpack, вы говорите webpack использовать UglifyJSPlugin (за кулисами)
Итак, вместо этого у меня была бы отдельная задача сборки, которая запускает webpack без флага -p и вместо этого передает следующее в вашей конфигурации.
var webpack = require ('webpack'); module.exports = {plugins: [new webpack.optimize.UglifyJsPlugin ({options: {compress: {drop_debugger: false} }})]};
Кроме того, вы можете видеть, что я передал пользовательский параметр в UglifyJsPlugin (который как раз соответствует параметрам сжатия UglifyJs).
Как не минимизировать исходный код с помощью webpack
Утилита webpack JavaScript настолько захватила современный ландшафт JavaScript, что трудно быть разработчиком JavaScript и не использовать Это. Утилиты сборки JavaScript — это то место, где они неявно реализуют передовые практики, такие как минимизация кода, кеширование и т. Д.
Недавно я отлаживал связанное приложение webpack, и быстро стало ясно, что единственный путь вперед — это отладка фактического источника, а не минимизированного кода. Дуу
Чтобы веб-пакет не уменьшал исходный код, добавьте в свой конфигурация веб-пакета:
{//.... другой веб-пакет, например вывод, оптимизация и т. д.: {Minimum: false},}
Этот простой флаг делает отладку проще, хотя бы на мгновение. Мне нравится, как webpack позволяет вам воспользоваться его набором функций, имея при этом возможность очень быстро отключить!
->
