Блог

Я пытаюсь настроить среду так, чтобы, когда я выбираю запуск prod, он запускал настройки prod, а когда я выбираю запуск dev, он запускал сервер разработки, в настоящее время мои скрипты package.json выглядят следующим образом :

   "scripts": {
    "build:dev": "cross-env NODE_ENV=developement webpack",
    "build:prod": "cross-env NODE_ENV=production webpack",
    "start:dev": "cross-env NODE_ENV=developement webpack-dev-server ",
    "start:prod": "cross-env NODE_ENV=production webpack-dev-server "
  },
 

конфигурационный файл webpack:

 const webpack = require("webpack");
const path = require("path");
const dotenv = require("dotenv");

module.exports = {
  //Entry file for webpack.config
  entry: "./src/index.js",
  //Target specific use of project ie. nodejs project we use node value
  target: process.env.NODE_ENV === "dev" ? "node" : "web",
  //Dev server meant for hosting local server for developement
  devServer: {
    contentBase: path.resolve(__dirname, "public"),
    historyApiFallback: true,
    port: 8080,
  },
  //Modules are used to set rules to build specific file types
  module: {
    rules: [
      {
        test: /.jsx?$/,
        exclude: /node_modules/,
        use: [
          {
            loader: "babel-loader",
            options: {
              presets: ["@babel/env", "@babel/react"],
              plugins: [
                "@babel/plugin-transform-runtime",
                "@babel/plugin-proposal-class-properties",
              ],
            },
          },
        ],
      },
      {
        test: /.(png|jpe?g|gif)$/i,
        loader: 'file-loader',
        options: {
          name: '[path][name].[ext]',
        },
      },
      {
        test: /.(css|sass|scss)$/,
        use: [
          "style-loader",
          {
            loader: "css-loader",
            options: {
              sourceMap: true,
              importLoaders: 2,
            },
          },
          {
            loader: "sass-loader",
            options: {
              sourceMap: true,
            },
          },
        ],
      },
      {
        test: /.svg$/,
        use: [
          {
            loader: "svg-inline-loader",
            options: {
              limit: 10000,
            },
          },
        ],
      },
      {
        test: /.tsx?$/,
        use: "ts-loader",
        exclude: /node_modules/,
      },
    ],
  },
  externals: {
    // require("jquery") is external and available
    //  on the global var jQuery
    "jquery": "jQuery"
  },
  //Changes how modues are resolved
  resolve: {
    extensions: ["*", ".js", ".jsx", ".ts", ".tsx"],
  },
  //Output is setup to serve the bundle.js file to be served to web browser
  output: {
    path: path.resolve(__dirname, "public"),
    filename: "bundle.js",
    publicPath: "/",
  },
  //Prevent bundling of certain packages
  externals: {
    "react-native": true,
  },
  //A javascript object used to do various extra things for webpack
  plugins: [
    new webpack.DefinePlugin({
      "process.env": JSON.stringify(dotenv.config().parsed),
    }),
  ],
};

 

и я это делаю:

 console.log(process.env.NODE_ENV)
 

внутри моей домашней страницы jsx, но каждый раз, когда я запускаю ее, даже когда я запускаю yarn: запускаю консоль.регистрирует разработку, а не производство, почему cross-env не может успешно изменить NODE_ENV на production, когда я запускаю это?

Чтобы скопировать переменную env в webpack , вы должны использовать webpack. DefinePlugin то, что вы сделали в своем файле конфигурации, который выглядит так, как будто вы пытаетесь скопировать все вещи в webpack.

В любом случае, если вы хотите использовать значение from cross-env , вам придется сделать то же самое с помощью DefinePlugin плагина, но ввести конкретное значение NODE_ENV следующим образом:

webpack.config.js

 {
  // ...
  plugins: [
    // ...
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV)
    }),
  ],
}