Webpack 捆绑 lodash 抛出语法错误
我是模块捆绑器的新手,请按照此视频学习如何使用 Webpack: https:// www.youtube.com/watch?v=5IG4UmULyoA
这是我极其简单的 package.json 文件:
{
"name": "t1",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"build": "webpack"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"lodash": "^4.17.21"
},
"devDependencies": {
"webpack": "^5.69.1",
"webpack-cli": "^4.9.2"
}
}
我安装了 lodash 并导入了它的 CamelCase 函数,如下所示src/index.js:
import { camelCase } from 'lodash';
console.log(camelCase('hello world'));
我通过 npm run build 构建了它,并在 dist/main.js 中创建了一个捆绑文件,就像我上面链接的视频中一样。
我将捆绑的 dist/main.js 脚本嵌入到我的 index.html 中,它在 main.js 第 2 行中抛出 Uncaught SyntaxError: Invalid or Unexpected token
。
在不同的浏览器中进行了测试:Opera、Chrome 和 Edge,但是没有区别,因为捆绑的 dist/main.js 看起来非常复杂和缩小,我不明白它有什么问题。
I am a newbie to module bundlers and following this video to learn how to use Webpack: https://www.youtube.com/watch?v=5IG4UmULyoA
This is my incredibly simple package.json file:
{
"name": "t1",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"build": "webpack"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"lodash": "^4.17.21"
},
"devDependencies": {
"webpack": "^5.69.1",
"webpack-cli": "^4.9.2"
}
}
I installed lodash and imported its camelCase function as followed in my src/index.js:
import { camelCase } from 'lodash';
console.log(camelCase('hello world'));
I built it by npm run build
and a bundled file in the dist/main.js is created, just like in the video that I linked above.
I embedded the bundled dist/main.js script into my index.html and it throws Uncaught SyntaxError: Invalid or unexpected token
in main.js line 2.
Tested in different browsers: Opera, Chrome and Edge but no difference and since bundled dist/main.js looks very complicated and minified, I can't understand what is wrong with it.
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论