在 React.JS 中导入时尝试使用常量时出错

Question

我正在研究 react，当我尝试使用const app_url时出现错误，在这一行我收到错误import MobileEsp from app_url+'/js/mdetect.js'; 这是因为 app_url，这是我的完整代码，有人可以帮我解决这个问题吗？

错误 ：

Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: /var/www/minimal-react-webpack-babel-setup/src/App.js: Unexpected token (6:22)

代码

import React from 'react';

const app_url = 'https://*******.com/';

import $ from "jquery";
import MobileEsp from app_url+'/js/mdetect.js'; 

//const App = ({ title }) =>

class App extends React.Component {

  componentDidMount() {
    if (!MobileEsp.DetectTierIphone() && !MobileEsp.DetectTierTablet()) {

      var LinkDownloadAppMac1 = "*****";
      var LinkDownloadAppWin1 = "******";
      switch (navigator.platform) {
        case 'MacIntel':
          $('#menu-download-link').attr('href', LinkDownloadAppMac1);
          break;
        default:
          $('#menu-download-link').attr('href', LinkDownloadAppWin1);
          break;

      }
    }
}

Answer 1

我认为这不是合法的语法。 即使在现代 JavaScript/ES6 JavaScript 及更高版本中。 这是因为必须静态解析 JavaScript 依赖项导入。

但是，您可以在组件中动态导入依赖项。

例如，您可以在 ComponentDidMount 生命周期钩子中导入它。

async ComponentDidMount() {
  const appUrl = 'https://*******.com/';
  const MobileEsp = await import(`${appUrl}/js/mdetect.js`);
   // do the rest here
}