Webpack延迟加载（承诺）以错误结束

Question

I'm very new to webpack and I followed tutorials to set up my config file. 我是webpack的新手，我按照教程设置了配置文件。 I managed to do all I wanted so far, except the lazy loading... 到目前为止，我已经完成了我想做的所有事情，除了延迟加载...

I just did a HMTL page with a button and linked the JS to it. 我只是用按钮创建了一个HMTL页面，并将JS链接到它。 When I click the button, it's supposed to import jquery and change the text color on the page, but i get this error: 当我单击按钮时，应该导入jquery并更改页面上的文本颜色，但是出现此错误：

Uncaught (in promise) TypeError: $ is not a function
    at eval (app.js?cf22:5)
    at <anonymous>
(anonymous) @ app.js?cf22:5
Promise.then (async)
(anonymous) @ app.js?cf22:4

Does anyone know what I'm missing ? 有人知道我在想什么吗？ did some research but nothing helped me so far :/ Thanks for your help ! 做了一些研究但到目前为止没有任何帮助：/谢谢您的帮助！

Here's my files: 这是我的文件：

index.html index.html

    <!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <meta http-equiv="X-UA-Compatible" content="ie=edge">
            <link rel="stylesheet" href="assets/app.css">
            <title>Test Webpack</title>
        </head>
        <body>
            <div>Hello</div>
            <button id="button">Click me</button>
        </body>
        <footer>
            <script src="assets/app.js"></script>
        </footer>
    </html>

app.js app.js

    document.getElementById('button').addEventListener('click', function() {
        import('jquery').then(($) => {
            $('body').css('color', 'yellow');
        });
    });

webpack.config.js webpack.config.js

    {
        "name": "webpack-boilerplate",
        "version": "1.0.0",
        "main": "index.js",
        "license": "MIT",
        "scripts": {
            "dev": "cross-env NODE_ENV=dev webpack-dev-server --hot",
            "prod": "cross-env NODE_ENV=prod webpack"
        },
        "devDependencies": {
           "autoprefixer": "^8.1.0",
           "babel-core": "^6.26.0",
           "babel-eslint": "^8.2.2",
           "babel-loader": "^7.1.3",
           "babel-plugin-syntax-dynamic-import": "^6.18.0",
           "babel-preset-env": "^1.6.1",
           "clean-webpack-plugin": "^0.1.18",
           "cross-env": "^5.1.3",
           "css-loader": "^0.28.10",
           "eslint": "^4.18.2",
           "eslint-loader": "^2.0.0",
           "extract-text-webpack-plugin": "^4.0.0-beta.0",
           "file-loader": "^1.1.11",
           "img-loader": "^2.0.1",
           "node-sass": "^4.7.2",
           "postcss-loader": "^2.1.1",
           "remove": "^0.1.5",
           "sass-loader": "^6.0.7",
           "style-loader": "^0.20.2",
           "uglifyjs-webpack-plugin": "^1.2.2",
           "url-loader": "^1.0.1",
           "webpack": "^4.1.0",
           "webpack-cli": "^2.0.10",
           "webpack-dev-server": "^3.1.0",
           "webpack-manifest-plugin": "^2.0.0-rc.2"
        },
        "dependencies": {
           "jquery": "^3.3.1"
        }
    }

.babelrc .babelrc

    {
        "presets": [
            ["env", {
                "targets": {
                     "browsers": ["last 2 versions", "safari >= 7", "ie >= 7"]
                 }
             }]
        ],
        "plugins": ["syntax-dynamic-import"]
    }

.eslintrc .eslintrc

    {
         "parser": "babel-eslint",
          "parserOptions": {
              "sourceType": "module",
              "allowImportExportEverywhere": true,
              "codeFrame": false
          },
          "extends": "eslint:recommended",
          "rules": {
              "semi": ["error", "always"],
              "no-console": "warn",
              "no-unused-vars": "warn"
          },
          "env": {
              "node": true,
              "browser": true,
              "es6": true
          },
          "globals": {
              "console": true
          }
      }

Answer 1

What you get if you are using import().then() is not jQuery directly, but an ES6 exported object. 如果使用import().then()您得到的不是直接jQuery，而是ES6导出的对象。 jQuery should be the default export, so try jQuery应该是默认导出，所以尝试

import('jquery').then(({ default: $ }) => {
    $('body').css('color', 'yellow');
});

This will take the default from the exported object and gives it the name $ . 这将从导出的对象中获取默认值，并将其命名$ 。
This is the same as doing 这和做的一样

import('jquery').then((jquery) => {
    const $ = jquery.default;
    $('body').css('color', 'yellow');
});

Webpack延迟加载（承诺）以错误结束

问题描述

1 个解决方案

解决方案1
0 已采纳 2018-03-07 09:49:19

Webpack延迟加载（承诺）以错误结束

问题描述

1 个解决方案

解决方案1 0 已采纳 2018-03-07 09:49:19

解决方案1
0 已采纳 2018-03-07 09:49:19