Webpack 捆绑 lodash 抛出语法错误

发布于 2025-01-09 17:14:09 字数 991 浏览 0 评论 0原文

我是模块捆绑器的新手,请按照此视频学习如何使用 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 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文