如何導入從webpack.config生成的javascript導出文件？

Question

問題描述

我需要設置DEV或Production環境，以便可以在本地測試API或准備將其投入生產。

即：使用http://localhost/api/app/login或/api/app/login

現在，我可以通過將NODE_ENV變量附加到package.json中的npm腳本和webpack.config中的幾行代碼來實現此目的：

"scripts": {
    "dev": "NODE_ENV=development webpack-dev-server --history-api-fallback",
    "prod": "NODE_ENV=production webpack-dev-server -p",

webpack.config

const environment = process.env.NODE_ENV;
....
new CopyWebpackPlugin([{ from: "static" }])

^將創建一個我可以在我的services/api.js文件中使用的環境。 現在我的問題是我的Jest測試每次都會失敗，因為env是未定義的。

嘗試的解決方案-需要幫助

因此，現在我想做的是使用node實際生成一個Javascript文件，該文件實際上可以直接導入到我的services/api.js ，從而避免測試中出現未定義的env錯誤。

我可以使用webpack.config的以下更新來創建Javascript文件

const fs = require('fs');
const webpack = require('webpack')
const environment = process.env.NODE_ENV;

// fs.writeFileSync('src/consts/env.txt', environment);

const stream = fs.createWriteStream("src/consts/endpoints.js");
stream.once('open', function(fd) {
  stream.write('export const environment = () => "'+environment+'"');
  stream.end();
});

它創建的文件（src / consts / endpoints.js）：

export const environment = () => "development"

我也嘗試過這種方式：

export const environment = "development"

現在我更新的 services/api.js

import axios from 'axios'
import environment from '../consts/endpoints'
console.log('api.js environment:', environment);

但是，當我簽出localhost時，環境是不確定的。

---

我該如何解決這個問題？ 這是比賽條件嗎？ 還有另一種方法來生成我需要導入的文件嗎？

我試圖生成一個.txt文件，但是我無法在本地導入該文件，只能在雲中進行操作。

完整的webpack.config文件

const fs = require('fs');
const webpack = require('webpack')
const HtmlWebpackPlugin = require("html-webpack-plugin");
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const CopyWebpackPlugin = require("copy-webpack-plugin");
const path = require("path");
const dist = path.resolve(__dirname, "dist");
const src = path.resolve(__dirname, "src");
const environment = process.env.NODE_ENV;

// fs.writeFileSync('src/consts/env.txt', environment);

const stream = fs.createWriteStream("src/services/environment.js");
stream.once('open', function(fd) {
  stream.write('export const environment = "'+environment+'"');
  stream.end();
});

module.exports = {
  context: src,
  entry: [
    "./index.js"
  ],
  output: {
    path: dist,
    filename: "manage2.bundle.js",
    publicPath: '/static/',
  },
  devtool: 'source-map',
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        use: ["babel-loader"]
      },
      {
        test: /\.scss$/,
        use: ExtractTextPlugin.extract({
          fallbackLoader: "style-loader",
          loader: ["css-loader", "sass-loader"],
          publicPath: dist
        })
      }
    ]
  },
  devServer: {
    hot: false,
    quiet: true,
    publicPath: "",
    contentBase: path.join(__dirname, "dist"),
    compress: true,
    stats: "errors-only",
    open: true
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: "index.html"
    }),
    new ExtractTextPlugin({
      filename: "manage2.css",
      disable: false,
      allChunks: true
    }),
    new CopyWebpackPlugin([{ from: "static" }])
  ]
};
// new webpack.DefinePlugin({ env: JSON.stringify(environment) })

Answer 1

弄清楚了！

我沒有正確導入文件。

所以從webpack.config

const environment = process.env.NODE_ENV;

const stream = fs.createWriteStream("src/services/environment.js");
stream.once('open', function(fd) {
  stream.write('const env = "'+environment+'"\n');
  stream.write('export default env');
  stream.end();
});

^生成此文件（ src / services / environment.js ），其中包含：

const env = "development"
export default env

最后，在我的services / api.js文件中，我可以按自己想要的方式使用import語句，但是我沒有上面的export default 。

import axios from 'axios'
import endpoints from './endpoints'
import env from './environment'

const api = endpoints(env);
console.log('api', api);

const log = (method, err) => {
    console.error(`%c${method}`, 'background: #393939; color: #F25A43', err);
    return err;
};

export const userLogin = (username, password) => {
    const post_data = { username, password };
    return axios.post(api.login, post_data)
        .then(res => res)
        .catch((err) => log('api.userLogin', err));
};

在我的package.json中，我可以更改ENV變量以吐出"development"或"production" 。

"scripts": {
    "dev": "NODE_ENV=development webpack-dev-server --history-api-fallback",
    "prod": "NODE_ENV=production webpack-dev-server -p",