相关疑难解决方法(0)

是否有可能在运行时检测当前版本的React是开发还是生产？我想做这样的事情:

if (React.isDevelopment) {
  // Development thing
} else {
  // Real thing
}

所以这是完整的错误: 您当前正在使用NODE_ENV ==='production'之外的缩小代码.这意味着您正在运行较慢的Redux开发版本.

我正在使用第三方图表库CanvasJS,它需要访问全局范围.当我在我的任何模块中导入它时,似乎实际的代码在浏览器中中断(可能是一个this问题).

我通过使用Webpack解决了这个问题,并且使用gulp将bundle.min.js与缩小的Charting库捆绑在一起.

这个工作正常,直到我尝试生产构建.我认为CanvasJS的引用可能在这个过程中被破坏了.

我的Webpack.config文件:

 var debug = process.env.NODE_ENV !== "production";
 var webpack = require('webpack');
 var path = require('path');

 module.exports = {
  context: path.join(__dirname, "public"),
  devtool: debug ? "inline-sourcemap" : null,
  entry: "./js/main.js",
  resolve: {
   alias: {
    'react': 'react-lite',
    'react-dom': 'react-lite'
   }
  }, 
  module: {
  loaders: [
    {
     test: /\.jsx?$/,
     exclude: /(node_modules|bower_components)/,
     loader: 'babel-loader',
     query: {
       presets: ['react', 'es2015', 'stage-0'],
       plugins: [ 'transform-class-properties', 'transform-decorators-legacy'],
     }
   }
 ]
},
output: {
  path: __dirname + "/public/build/", …

我已经创建了一个基本应用程序并将其部署用于生产.运行webpack -p并启动服务器后,我现在收到此控制台日志错误:

You are currently using minified code outside of NODE_ENV === 'production'. This means that you are running a slower development build of Redux. You can use loose-envify (https://github.com/zertosh/loose-envify) for browserify or DefinePlugin for webpack (http://stackoverflow.com/questions/30030031) to ensure you have the correct code for your production build.

这是我的webpack.config.js文件:

module.exports = {
  entry: [
    './src/index.js'
  ],
  output: {
    path: __dirname,
    publicPath: '/',
    filename: 'bundle.js'
  },
  module: {
    loaders: [{
      exclude: /node_modules/,
      loader: 'babel',
      query: {
        presets: ['react', 'es2015', 'stage-1']
      } …

我正在使用webpack编译我的Reactjs文件。在我的项目中，我需要对后端进行API调用。

现在我有3个可以本地化，开发和生产的环境。

所以我有一个constants.jsx文件，其中我声明了以下内容：

export const url= 'http://localhost:8002/api/v0';

因此，在我的组件中，我从上方导入url并使用它们来调用APIS，但是我需要如何根据变量是本地变量，dev变量还是prod变量来更改上面的变量。

我该如何实施？

需要<base href=""/>根据构建环境配置设置标记的href值.

例如:

分期应该有 <base href="/staging" />

产品应该有 <base href="/" />

目前的设置:

构建命令:

"build": "sh -ac '. .env.${REACT_APP_ENV}; react-scripts build'",

"build:staging": "REACT_APP_ENV=staging npm run build",

"build:prod": "REACT_APP_ENV=production npm run build",

.env.staging.js:

REACT_APP_BASE_HREF=/staging

index.html的:

....

<base href="" + process.env.REACT_APP_API_URL />

....

这在index.html中似乎不起作用.虽然类似的设置适用于JS文件

(可能是因为JS文件被解析并捆绑到一个文件中,并且捆绑器在那个时间点读取值)

事情尝试:

index.html的:

<base href=process.env.REACT_APP_API_URL />

<base href="process.env.REACT_APP_API_URL" />

<base href="%process.env.REACT_APP_API_URL%" /> (类似于PUBLIC_URL变量)

设置basename属性以及浏览器路由器也无法解决问题

我们正在使用 Webpack、React、Node.JS，但我认为这个问题比特定技术更通用。在为开发模式或生产模式（例如，使用 DefinePlugin）构建时，我可以使用 Webpack 来配置 SPA。

如何在生产模式下（在构建时配置）为不同的部署环境（例如登台与生产）配置 SPA？例如，这些不同的部署将与不同的后端服务器 API 通信。

SPA 必须以某种方式从服务器获取一些本地上下文，因为它正在被浏览器获取。或者也许我们必须在 SPA 可以安全获取的每个服务器上都有一个自定义配置文件？

我们在服务器上使用 NodeJS，这个 SPA 最终将作为同构应用程序运行，所以这可能会有所帮助。我们在 Docker 镜像中部署这些应用程序，在部署时很容易配置它们的环境。

感谢您的任何建议。

我尝试通过 process.env.env_name 从 webpack.config.js 访问环境变量，\虽然我可以通过 webpack.config.js 中的 process.env.env_name 访问 .env（本地）中的环境变量，但我可以无法访问 config/default.js 文件中声明的环境变量。任何想法？\xe2\x80\x93

在 webpack 插件的定义中，我试图提供一个覆盖函数，如果该方法存在，我的模块将选取该函数。

export const listFetchAPI = () => {
  return ( LIST_FETCH_API ? LIST_FETCH_API : '/list/');
};
export const listFetchTX = (data) => {
  return ( LIST_FETCH_TX === 'function' ? LIST_FETCH_TX(data) : data );
};

在我的 webpack 配置中，基于项目的环境或实现，我可能想也可能不想为这些功能提供覆盖。

webpackConfig.plugins.push(
  new webpack.DefinePlugin({
    LIST_FETCH_API: JSON.stringify('https://testapi.com/listFetch/')
    LIST_FETCH_TX(data) { return { ...data, test: 'HELLO!' }; }
  })
);  

我已经尝试过 ES5 和 ES6 表示法。当我构建时，我收到一个错误SyntaxError: Unexpected identifier

我在文档中没有看到您可以通过 DefinePlugin 传递方法。https://webpack.js.org/plugins/define-plugin/

谷歌搜索出现零。我的下一步是传递一个字符串值，然后使用它react-json-schema来获取组件。这似乎太复杂了，所以我希望有一种方法可以在DefinePlugin.

编辑 为了澄清起见，我正在做的是构建一个可以注册到私有 npm 注册表的通用 redux 模块。调用时，可以为该模块提供 API url …