Question

我已遵循推荐的React / Babel配置，但是无法在IE 11中加载我的网站。

仍然存在的错误：

这些是与我相关的文件：

.babelrc

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": {
          "browsers": [
            "last 2 versions"
          ]
        },
        "modules": "commonjs",
        "useBuiltIns" : "entry"
      }
    ],
    [
      "@babel/preset-react"
    ]
  ],
  "plugins": [
    "@babel/plugin-transform-runtime",
    [
      "import",
      {
        "libraryName": "antd",
        "style": false
      }
    ],
    "@babel/syntax-dynamic-import",
    "react-hot-loader/babel"
  ]
}

index.tsx

import 'react-app-polyfill/ie11';
import 'react-app-polyfill/stable';
...

tsconfig.json

    {
      "compilerOptions": {
        "outDir": "build/dist",
        "target": "es2015",
        "lib": [
          "es6",
          "dom"
        ],
        "esModuleInterop": true,
        "module": "esnext",
        "sourceMap": true,
        "allowJs": true,
        "jsx": "react",
        "downlevelIteration": true,
        "alwaysStrict": true,
        "moduleResolution": "node",
        "resolveJsonModule": true,
        "rootDir": "src",
        "forceConsistentCasingInFileNames": true,
        "noImplicitReturns": true,
        "noImplicitThis": true,
        "noImplicitAny": true,
        "strictNullChecks": true,
        "suppressImplicitAnyIndexErrors": true,
        "noUnusedLocals": true,
        "allowSyntheticDefaultImports": true,
        "skipLibCheck": true,

        // Similar to webpack's resolve.alias for the tsc compilation stage
        "baseUrl": ".",
        "paths": {
          "~/*": ["./src/*"]
        }
      },
      "include": [
        "./src/**/*",
        "./typings/**/*.d.ts"
      ],
      "exclude": [
        "./node_modules",
        "./dist"
      ]
    }

package.json
{
  ...
  "dependencies": {
    "antd": "^3.6.6",
    "apollo-boost": "^0.1.16",
    "apollo-cache-persist": "^0.1.1",
    "bootstrap": "^4.0.0",
    "bootstrap-daterangepicker": "^3.0.3",
    "classnames": "^2.2.5",
    "core-js": "^3.1.4",
    "cucumber": "^5.1.0",
    "debug": "^3.1.0",
    "file-saver": "^2.0.1",
    "graphql": "^0.11.0",
    "history": "^4.6.3",
    "jquery": "^3.3.1",
    "moment": "^2.22.2",
    "moment-timezone": "^0.5.21",
    "prop-types": "^15.7.2",
    "react": "^16.4.1",
    "react-adopt": "^0.6.0",
    "react-apollo": "^2.2.4",
    "react-app-polyfill": "^1.0.1",
    "react-bootstrap-daterangepicker": "^4.1.0",
    "react-data-export": "^0.5.0",
    "react-day-picker": "^7.3.0",
    "react-dom": "^16.4.1",
    "react-hot-loader": "^4.3.4",
    "react-infinite": "^0.13.0",
    "react-markdown": "^3.3.4",
    "react-moment": "^0.7.9",
    "react-redux": "^5.0.7",
    "react-resize-detector": "^3.0.1",
    "react-router": "^4.3.1",
    "react-router-dom": "^4.3.1",
    "react-router-redux": "next",
    "react-select": "^1.2.1",
    "react-switch": "^3.0.4",
    "react-toggle": "^4.0.2",
    "react-virtualized-select": "^3.1.3",
    "reactstrap": "^5.0.0-beta.3",
    "redux": "^3.7.2",
    "redux-observable": "^0.19.0",
    "reselect": "^3.0.1",
    "rxjs": "^5.5.10",
    "ts-loader": "^6.0.4",
    "typescript-fsa": "^2.5.0",
    "typescript-fsa-reducers": "^0.4.4",
    "uuid": "^3.2.1",
    "xlsx": "^0.14.2"
  },
  "devDependencies": {
    "@babel/core": "^7.4.4",
    "@babel/plugin-syntax-dynamic-import": "^7.2.0",
    "@babel/plugin-transform-runtime": "^7.4.4",
    "@babel/preset-env": "^7.4.4",
    "@babel/preset-react": "^7.0.0",
    "@babel/register": "^7.4.4",
    "@babel/runtime": "^7.4.4",
    "@types/classnames": "^2.2.3",
    "@types/debug": "^0.0.30",
    "@types/geojson": "^7946.0.4",
    "@types/jest": "^22.2.3",
    "@types/lodash": "^4.14.106",
    "@types/moment-timezone": "^0.5.6",
    "@types/node": "^10.5.2",
    "@types/rc-slider": "^8.2.3",
    "@types/react": "^16.4.6",
    "@types/react-bootstrap-daterangepicker": "^0.0.26",
    "@types/react-csv": "^1.1.1",
    "@types/react-dom": "^16.0.6",
    "@types/react-redux": "^6.0.4",
    "@types/react-resize-detector": "^2.2.0",
    "@types/react-router-dom": "^4.2.7",
    "@types/react-router-redux": "5.0.15",
    "@types/react-select": "^1.2.9",
    "@types/react-toggle": "^4.0.1",
    "@types/react-virtualized-select": "^3.0.5",
    "@types/reactstrap": "^5.0.20",
    "@types/uuid": "^3.4.3",
    "@types/webpack-env": "^1.13.0",
    "apollo": "^1.7.1",
    "app-root-path": "^2.0.1",
    "autoprefixer": "9.0.1",
    "babel-loader": "^8.0.6",
    "babel-plugin-import": "^1.11.2",
    "babel-plugin-transform-eval": "^6.22.0",
    "babel-preset-env": "^1.7.0",
    "case-sensitive-paths-webpack-plugin": "2.0.0",
    "chalk": "1.1.3",
    "cli-highlight": "1.1.4",
    "connect-history-api-fallback": "^1.5.0",
    "copy-webpack-plugin": "^4.5.2",
    "css-loader": "0.28.1",
    "dotenv": "6.0.0",
    "file-loader": "^1.1.11",
    "fork-ts-checker-notifier-webpack-plugin": "^0.4.0",
    "fork-ts-checker-webpack-plugin": "^0.4.3",
    "fs-extra": "3.0.1",
    "html-webpack-plugin": "3.2.0",
    "jest": "22.4.3",
    "koa-connect": "^2.0.1",
    "less": "^3.8.0",
    "less-loader": "^4.1.0",
    "mini-css-extract-plugin": "^0.4.1",
    "object-assign": "4.1.1",
    "postcss-flexbugs-fixes": "4.0.0",
    "postcss-loader": "2.1.6",
    "promise": "7.1.1",
    "rimraf": "^2.6.2",
    "source-map-loader": "^0.2.3",
    "style-loader": "0.17.0",
    "sw-precache-webpack-plugin": "0.11.5",
    "tslint": "^5.11.0",
    "tslint-loader": "^3.6.0",
    "tslint-react": "^3.2.0",
    "typescript": "^3.4.1",
    "typings-for-css-modules-loader": "^1.7.0",
    "url-loader": "^1.0.1",
    "webpack": "^4.16.3",
    "webpack-cli": "^3.1.0",
    "webpack-dev-server": "^3.1.5",
    "webpack-manifest-plugin": "2.0.3",
    "webpack-merge": "^4.1.3",
    "webpack-serve": "^2.0.2",
    "whatwg-fetch": "2.0.4"
  },
  "scripts": {
    "start": "webpack-dev-server --config webpack.dev.config.js --content-base /advanced --port 3000"
  }
}

Answer 1

尝试在环境目标中添加 Internet Explorer 可能有助于解决该问题。

SELECT distinct R.idno, R.lastname, R.firstname, R.middlename, R.fingerscanno,
       LD.CHECKTIME, LD.CHECKTYPE,LD.USERID
FROM physicianmasterfile As R
LEFT JOIN CHECKINOUT AS LD on LD.USERID = R.fingerscanno
WHERE  
       CONVERT(DATE, LD.CHECKTIME) = CONVERT(DATE, SYSDATETIME()) AND
       YEAR(LD.CHECKTIME) = YEAR(SYSDATETIME()) AND
       LD.CHECKTYPE='I'
ORDER BY R.idno desc

参考：

（1）Babel docs

Answer 2

似乎未读取babel配置（仍然不确定原因）。我使用<?php include_once "config/connect.php"; $eid=$_REQUEST['eid']; $q="Select * from email where eid='$eid'"; $qr=mysqli_query($mysql,$q) or die($q.mysqli_error($mysql)); while($r=mysqli_fetch_object($qr)) { $id = $r->id; $emails = $r->email; $message1 = $r->body; $subject1 = $r->subject; $attechment = $r->attechment; } $url = 'https://api.sendgrid.com/'; $user = 'username'; $pass = 'password'; $fileName = $attechment; //$filePath = dirname('/uploads/attechment'); $filePath = 'http://localhost/projects5/crm1/folder/dash/uploads/attechment'; //$list = array('$emails'); $json_string = array( 'to' => array($emails), 'category' => 'test_category' ); $params = array( 'api_user' => $user, 'api_key' => $pass, 'to' => $emails, 'x-smtpapi' => json_encode($json_string), 'subject' => $subject1, 'html' => '<p> the HTML </p>', 'text' => 'the plain text', 'from' => 'example@wephyre.com', //'files['.$fileName.']' => '@'.$filePath.'/'.$fileName 'files['.$fileName.']' => file_get_contents($filePath.'/'.$fileName) ); print_r($params); $request = $url.'api/mail.send.json'; // Generate curl request $session = curl_init($request); // Tell curl to use HTTP POST curl_setopt ($session, CURLOPT_POST, true); // Tell curl that this is the body of the POST curl_setopt ($session, CURLOPT_POSTFIELDS, $params); // Tell curl not to return headers, but do return the response curl_setopt($session, CURLOPT_HEADER, false); // Tell PHP not to use SSLv3 (instead opting for TLS) curl_setopt($session, CURLOPT_SSLVERSION, CURL_SSLVERSION_TLSv1_2); curl_setopt($session, CURLOPT_RETURNTRANSFER, true); // obtain response $response = curl_exec($session); curl_close($session); // print everything out print_r($response); ?>来解决此问题。我的最终文件：

babel.config.js：

babel.config.js

也遵循了有关Pollyfills的指南：https://github.com/facebook/create-react-app/releases?after=v2.0.5 （向module.exports = function (api) { api.cache(true); const presets = [ [ "@babel/preset-env", { "targets": { "browsers": [ "last 2 versions", "ie 11" ] }, "modules": "commonjs", "useBuiltIns" : "usage" } ], [ "@babel/preset-react" ] ]; const plugins = [ [ "import", { "libraryName": "antd", "style": false } ], "@babel/syntax-dynamic-import", "react-hot-loader/babel" ]; return { presets, plugins }; }添加了正确的导入）

使用React Babel 7打字稿的IE 11“期望的：”

2 个答案: