#javascript #reactjs #webpack
#javascript #reactjs #webpack
Вопрос:
Я создаю пакет файлов ReactJS с помощью Webpack.
Возможно ли определить внутри файлов JSX, какой режим Webpack используется: "none"
, "development"
, или "production"
?
Например, я хотел бы, чтобы некоторые console.log()
операторы и глобальные переменные находились в режиме разработки, но не в режиме производства.
Комментарии:
1. Я думаю, что это довольно часто используется
process.env.NODE_ENV
для этой цели.2. Возможно, вы захотите проверить плагин определения Webpack .
3. Спасибо за советы. Я нашел решение и опубликовал его ниже.
Ответ №1:
Можно создать пакет Webpack для разработки с помощью:
$ npx webpack --config webpack.config.js --mode=development
и для производства с:
$ npx webpack --config webpack.config.js --mode=production
Чтобы узнать, находится ли текущая сборка в режиме разработки или в производственном режиме, webpack.DefinePlugin()
следует использовать в webpack.config.js
:
const webpack = require('webpack');
module.exports = (env, argv) => {
return {
// other directives...
plugins: [
new webpack.DefinePlugin({
PRODUCTION: JSON.stringify(argv.mode === 'production'),
}),
],
}
};
Затем в связанных файлах JavaScript можно выполнить эту проверку:
if (PRODUCTION) {
console.log("This is a production build.");
} else {
console.log("This is a development build.");
}
Обратите внимание, что PRODUCTION
здесь будет работать не как глобальная переменная, а как переменная шаблона, разрешенная в true
или false
.