Webpack/Babel/Preact网站中的IE11语法错误

Question

我有一个预先网站，是抛出一个语法错误的IE11。我一直为这件事绞尽脑汁。它在其他浏览器中运行良好。可悲的是，我仍然必须支持这个版本的资源管理器。我尽可能多地提供了信息。很抱歉有这么长的文件转接记录。

控制台错误

这是在控制台中显示的转移行。

eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var preact__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! preact */ \"./node_modules/preact/dist/preact.esm.js\");\n/* harmony import */ var preact_router__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! preact-router */ \"./node_modules/preact-router/dist/preact-router.es.js\");\n/* harmony import */ var _components_header_header_jsx__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./components/header/header.jsx */ \"./app/scripts/components/header/header.jsx\");\n/* harmony import */ var _components_footer_footer_jsx__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./components/footer/footer.jsx */ \"./app/scripts/components/footer/footer.jsx\");\n/* harmony import */ var history_createHashHistory__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! history/createHashHistory */ \"./node_modules/history/createHashHistory.js\");\n/* harmony import */ var history_createHashHistory__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(history_createHashHistory__WEBPACK_IMPORTED_MODULE_4__);\n/* harmony import */ var _routes_home_home_jsx__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./routes/home/home.jsx */ \"./app/scripts/routes/home/home.jsx\");\n\n\n\n\n\n\n\nconst App = () => Object(preact__WEBPACK_IMPORTED_MODULE_0__[\"h\"])(\n\t\"div\",\n\tnull,\n\tObject(preact__WEBPACK_IMPORTED_MODULE_0__[\"h\"])(_components_header_header_jsx__WEBPACK_IMPORTED_MODULE_2__[\"default\"], null),\n\tObject(preact__WEBPACK_IMPORTED_MODULE_0__[\"h\"])(\n\t\tpreact_router__WEBPACK_IMPORTED_MODULE_1__[\"default\"],\n\t\t{ history: history_createHashHistory__WEBPACK_IMPORTED_MODULE_4___default()() },\n\t\tObject(preact__WEBPACK_IMPORTED_MODULE_0__[\"h\"])(_routes_home_home_jsx__WEBPACK_IMPORTED_MODULE_5__[\"default\"], { path: \"/:code?\" })\n\t),\n\tObject(preact__WEBPACK_IMPORTED_MODULE_0__[\"h\"])(_components_footer_footer_jsx__WEBPACK_IMPORTED_MODULE_3__[\"default\"], null)\n);\n\nObject(preact__WEBPACK_IMPORTED_MODULE_0__[\"render\"])(Object(preact__WEBPACK_IMPORTED_MODULE_0__[\"h\"])(App, null), document.getElementById(\"root\"));\n\n//# sourceURL=webpack:///./app/scripts/app.jsx?");

package.json

以下是这些版本：

"babel-core": "^6.26.3",
"babel-loader": "^7.1.4",
"babel-preset-env": "^1.7.0",
"babel-preset-preact": "^1.1.0",
"preact": "^8.2.9",
"preact-dom": "^1.0.1",
"preact-router": "^2.6.1",
"webpack": "^4.12.0",
"webpack-cli": "^3.0.7"

.bablerc

{
    "presets": [
        "preact"
    ],
    "plugins": [
        "transform-class-properties",
        ["transform-react-jsx", { "pragma": "h" }]
    ]
}

app.js

import { h, render } from "preact";
import Router from "preact-router";
import Header from "./components/header/header.jsx";
import Footer from "./components/footer/footer.jsx";
import createHashHistory from "history/createHashHistory";
import Home from "./routes/home/home.jsx";

const App = () => (
    <div>
        <Header/>
        <Router history={createHashHistory()}>
            <Home path="/:code?" />
        </Router>
        <Footer/>
    </div> 
);

render(<App/>, document.getElementById("root") );

index.html

在app.js文件之前加载多填充

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/6.26.0/polyfill.min.js"></script>

webpack

// require --------------------------------------------------------------------

const path = require("path");

// exports --------------------------------------------------------------------

module.exports = {

    // mode -------------------------------------------------------------------

    mode: "development",

    // entry ------------------------------------------------------------------

    //
    // Uncomment the dependencies as needed.
    //
    entry: [
        //"whatwg-fetch",
        //"form-data",
        "./app/scripts/app.jsx"
    ],

    // output -----------------------------------------------------------------

    output: {
        path: path.resolve(__dirname, 'app'),
        filename: "builds/app.js"
    },

    // resolve ----------------------------------------------------------------

    resolve: {
        alias: {
            "app": path.resolve(__dirname, "app/scripts"),
            "json": path.resolve(__dirname, "app/json"),            
            "images": path.resolve(__dirname, "app/images")
        }
    },

    // server -----------------------------------------------------------------

    devServer: {
        contentBase: "./app"
    },

    // module -----------------------------------------------------------------

    module: {

            // rules ----------------------------------------------------------

            rules: [
                { 
                    test: /\.js$/, 
                    loader: 'babel-loader', 
                    exclude: /node_modules/ 
                },        
                { 
                    test: /\.jsx$/, 
                    loader: 'babel-loader', 
                    exclude: /node_modules/ 
                }
            ]
    }
};

Answer 1

哈！在.babelrc中缺少一个预置。我花了很长时间才在这里找到它。

{
    "presets": [
        [
            "env", {
                "targets": {
                    "browsers": ["last 2 versions", "ie >= 7"]
                }
            }
        ],
        "preact"
    ],
    "plugins": [
        "transform-class-properties",
        ["transform-react-jsx", { "pragma": "h" }]
    ]
}