问题标签 [babel-loader]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
2 回答
580 浏览

webpack - Webpack 在使用 Babel-loader 时将绝对路径信息写入 bundle

这是我的 webpack 配置文件的一部分:`

问题:我得到了我的 js 文件的完整本地路径,如下所示 path: '/Users/username/MyProjects/projectname/src/view/dialog/Messages.js:不喜欢在我的生产包中包含。

我只使用 babel-loader 获取js文件。

我使用“webpack”:“3.8.1”。

请帮忙!

0 投票
1 回答
190 浏览

webpack - Webpack/Babel 在转译之前未检测到 javascript 错误

我已经为一个新的 React 项目配置了 webpack-dev-server。我正在使用 babel-loader 转译 ES6 代码。在以前的项目中,我们能够在转换之前检测到我们的 javascript 代码中的明显错误,例如缺少导入语句或未定义的变量。

为什么 webpack / babel-loader 没有检测到明显的错误?以及如何将 babel-loader 配置为不转换这些错误,而是登录到命令提示符?

这是我的 package.json

这是我的 .babelrc

我的 javascript 文件加载器是

0 投票
1 回答
1362 浏览

webpack - Webpack tree-shaking 可以删除未使用的 babel-polyfills 吗?

我尝试让 webpack tree-shaking删除未使用的babel-polyfill.

index.js文件包含:

在这个文件中,没有代码需要任何 es2015+ polyfill,所以我希望通过 tree-shaking 移除捆绑输出中未使用的 babel-polyfill。事实并非如此,并且捆绑包仍然包含它们(缩小)。

这是带有此代码的 git 存储库

webpack 配置:

.babelrc

我试图用 替换babel-minify-webpack-pluginuglifyjs-webpack-plugin但它给出了相同的结果。

如何使 tree-shaking 工作,并且输出不包含babel-polyfills原始代码中未使用的任何内容?

0 投票
2 回答
4343 浏览

javascript - Webpack:无法解构“未定义”或“空”的属性“咖喱”

使用浏览器的 webpack 和 babel-loader 编译我的应用程序后,在 main 函数启动之前立即出现以下错误:

错误代码是以下内容的 ES5 转译:

上述代码来自依赖ramdabluebird的私有函数库。该库在 Node.js 8.9.1 下使用和工作。

使用的webpack 配置直接来自 philipwalton 的 webpack-esnext-boilerplate(非常适合从 :D 开始)

版本:

  • babel-cli: ^6.26.0,
  • 通天塔加载器:^7.1.2,
  • 网络包:^3.8.1,
  • 浏览器:Google Chrome 版本 62.0.3202.89(官方版本)(64 位),
  • Node.js:8.9.1,
  • npm:5.5.1

错误的根源是什么,如何解决?

干杯✨</p>

0 投票
2 回答
629 浏览

reactjs - Babel Loader 和 Webpack + React 语法错误

我在我的项目中使用 React + Webpack 和 Babel Loader。

当我尝试生成捆绑代码时,会引发以下错误(对于使用 {... state} 时我拥有的每个减速器):

但是,在开发人员版本上测试应用程序时,不会显示此错误。

webpack.config.js:

.babelrc:

0 投票
2 回答
532 浏览

javascript - 无法调用 React JS webpack-dev-server api

我已经在 React 中构建了我的应用程序,并且在通过 webpack-dev-server 在生产构建中对其进行了测试后,调用 API 的可能性出现了。我正在通过 AXIOS 提出请求。

GET 请求出现以下错误:

获取http://localhost:8080/api/web/api/get-logged-navbar 404(未找到)

对于 POST 请求,它不会触发操作。

即使我使用正确的请求路径。

我的应用程序的重要文件夹的结构如下:

  • 公共(bundle.js 构建文件,以及其他样式和脚本资产都在这里)
  • src(组件和操作)
  • api(api代码在这里:Yii2)

网络包配置:

我是否需要设置代理并将 API 放在另一个服务器端口上?

0 投票
1 回答
205 浏览

angularjs - webpack 无法编译 JSX

这是我收到的错误消息(出于安全原因,我删除了部分文件路径):

现在,我要做的只是让 React 组件存在于 Angular 1.X 项目中。这是 webpack 配置的样子:

webpack.make.js

这是我的.babelrc

stage-3和都试过了stage-0,但我仍然得到同样的错误。我确保babel-preset-react通过 npm 安装。JS 文件中的 JSX 没有任何问题,因为它是一个简单的 React 组件,用作我正在使用的存储库中的示例代码。我已经到了不知道下一步该往哪里看的地步。

0 投票
1 回答
9943 浏览

webpack - babel vs babel-core vs babel-loader vs babel-preset-2015 vs babel-preset-react vs babel-polyfill

我正在为我的 React 项目设置 Webpack,在babelbabel-core、和. 我知道将 ES7 或 ES6 代码转换为 ES5 需要 Babel,但在我的版本中,我已经安装了除 Babel 之外的所有这些依赖项,它们也作为.babel-loaderbabel-preset-2015babel-preset-reactpackage.jsondevDependencies

有人可以解释所有这些之间有什么区别以及为什么我的项目需要所有这些吗?没有任何单一的依赖来替换它们吗?如果它们如此重要,为什么它们被包括在内 devDependencies

0 投票
1 回答
6173 浏览

javascript - 如何将 webpack 与 babel-loader 和 flow 一起使用

我正在为我觉得不应该太难的设置而苦苦挣扎。我希望这三种技术一起工作:

  • webpack 打包代码
  • babel 以便我能够编写现代 JavaScript
  • flow 因为类型检查很有帮助,就像测试和 linter

我已经经历了几次这样的设置,但我在网上找到的文章似乎都没有帮助。


我在我package.jsonrunflowbuild. 类型检查yarn run flow非常有效,babel-node使用yarn run start.

但是当我执行时yarn run build,通过 webpack 出现以下错误:

在我看来,类型注释没有在正确的位置正确删除。可悲的是,如果我直接在 webpack 中指定 babel 选项而不是.babelrc.

目前,这让我在使用 flow 时捆绑一堆.js文件时遇到了挫折,而我发现几个插件据说可以简单地使用flow预设来剥离流注释,这似乎是 flowtype.org 推荐的。


为了重现性,我的项目文件如下所示:

包.json

.flowconfig

.babelrc

webpack.config.js

src/main.js

0 投票
1 回答
2649 浏览

reactjs - 意外的标记。您可能需要适当的加载程序来处理此文件类型

当我尝试material-ui-dropzone在 ReactJs 中使用时,出现如下错误。

这是我的webpack.config.js文件。

这是我的package.json文件。

有人可以帮助解决这个问题吗?