Как сохранить комментарии при минимизации кода React?
У меня есть следующий JSX в приложении React:
render() {
return (
<div>
{/* A JSX comment */}
</div>
)
}
Я использую webpack для компиляции и минимизации кода.
В своих плагинах для веб-пакетов я использую UglifyJsPlugin, чтобы попытаться сохранить комментарии:
new webpack.optimize.UglifyJsPlugin( {
compress: {
warnings: false,
// Disabled because of an issue with Uglify breaking seemingly valid code:
// https://github.com/facebookincubator/create-react-app/issues/2376
// Pending further investigation:
// https://github.com/mishoo/UglifyJS2/issues/2011
comparisons: false,
},
mangle: {
safari10: true,
except: ['__', '_n', '_x', '_nx' ],
},
output: {
comments: true,
// Turned on because emoji and regex is not minified properly using default
// https://github.com/facebookincubator/create-react-app/issues/2488
ascii_only: true,
},
extractComments: false,
sourceMap: shouldUseSourceMap,
} ),
comments:true сохраняет некоторые комментарии из React, но мой комментарий из JSX /* A JSX comment */ удаляется из минимизированного кода. Как я могу предотвратить удаление этого комментария из минифицированного/производственного кода?
Также мое правило модуля Babel с включенными комментариями:
{
test: /\.(js|jsx|mjs)$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
// @remove-on-eject-begin
babelrc: false,
presets: [ require.resolve( 'babel-preset-cgb' ) ],
// @remove-on-eject-end
// This is a feature of `babel-loader` for webpack (not Babel itself).
// It enables caching results in ./node_modules/.cache/babel-loader/
// directory for faster rebuilds.
cacheDirectory: false,
comments: true,
},
},
},
нет не остаются
так что дело не в UglifyJs, а в babelили, может быть, плагине преобразования jsx
Ответы 1
Я погрузился в репозиторий Babel и нашел сообщение об ошибке
Как сохранить комментарий jsx после преобразования Babel №7153
это было исправлено в прошлом году, и исправление вошло в 7.0.0-бета.37. поэтому, если эта функция действительно важна для вас, вы должны поднять версию Babel.
[UPD] Я считаю, что это крайний случай упомянутой выше ошибки.
Как мы видим, в онлайн-песочница ваш код транспилируется в
render() {
return React.createElement("div", null);
}
но однажды я поставил хотя бы явное null:
render() {
return (
<div>
{null/* A JSX comment */}
</div>
)
}
он не будет удалять комментарии:
render() {
return React.createElement("div", null, null
/* A JSX comment */
);
}
Таким образом, комментарии удаляются только в том случае, если в том же блоке нет других токенов.
так как старая ошибка была закрыта навсегда, я поставил новую # 10118, поэтому, кто бы ни нашел эту тему в поисках решения, лучше проверьте этот билет на наличие обновлений.
Спасибо за ответ @skyboyer! Я использую Babel 7, но комментарии все еще удалены. Я также добавил свою конфигурацию веб-пакета Babel в свой вопрос, и там также установлены комментарии.
Я подал новую проблему в их гитхаб: github.com/babel/babel/issues/10118, не могли бы вы прокомментировать там, почему это вообще нужно, чтобы они могли принять во внимание при рассмотрении
Спасибо за столь крутую помощь! Добавление null перед комментариями — это здорово!
комментарии остаются, если вы не используете uglifyJs?