[英]Webpack lazy loading (promize) end on error
我是webpack的新手,我按照教程設置了配置文件。 到目前為止,我已經完成了我想做的所有事情,除了延遲加載...
我只是用按鈕創建了一個HMTL頁面,並將JS鏈接到它。 當我單擊按鈕時,應該導入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
有人知道我在想什么嗎? 做了一些研究但到目前為止沒有任何幫助:/謝謝您的幫助!
這是我的文件:
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
document.getElementById('button').addEventListener('click', function() {
import('jquery').then(($) => {
$('body').css('color', 'yellow');
});
});
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
{
"presets": [
["env", {
"targets": {
"browsers": ["last 2 versions", "safari >= 7", "ie >= 7"]
}
}]
],
"plugins": ["syntax-dynamic-import"]
}
.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
}
}
如果使用import().then()
您得到的不是直接jQuery,而是ES6導出的對象。 jQuery應該是默認導出,所以嘗試
import('jquery').then(({ default: $ }) => {
$('body').css('color', 'yellow');
});
這將從導出的對象中獲取默認值,並將其命名$
。
這和做的一樣
import('jquery').then((jquery) => {
const $ = jquery.default;
$('body').css('color', 'yellow');
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.