问题标签 [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 投票
1 回答
4193 浏览

javascript - 使用 Webpack 将 ES6 转换为单独的文件

是否可以将 webpack 配置为等效于:

这样一个目录结构看起来像这样:

将所有文件编译为 ES5 并在lib目录下以相同的结构输出它们:

我通过了所有文件路径的通配符并将它们作为单独的条目传递,但似乎 webpack 在定义输出文件时“忘记了”文件的位置。Output.path仅提供[hash]令牌,虽然Output.file有更多选项,但仅提供和[name],因此至少看起来不支持这种编译。[hash][chunk]

为了给我的问题提供一些背景信息,我正在创建一个由 React 组件及其相关样式组成的 npm 模块。我正在使用 CSS 模块,所以我需要一种将 JavaScript 和 CSS 编译到模块的 lib 目录中的方法。

0 投票
4 回答
10413 浏览

javascript - react-dom 极大地增加了 webpack 包的大小

这一定是我遇到过的 webpack 最奇怪的问题之一......

查看此捆绑包细分: 在此处输入图像描述 react 116.01KB - 足够公平

react-dom 533.24KB - 严重 WTF

我认为这可能是我的依赖项中的损坏,但是对 node_modules 进行核对并重新安装没有任何效果。我想这与 webpack 捆绑它的方式有关,但我迷失了想法。我处理 .js 导入的方式是非常标准的。

0 投票
0 回答
606 浏览

node.js - webpack 使用全局 babel-loader 预设

我想使用全局模块/预设与 webpack 一起使用(即不想在项目中安装它们)

我的配置文件:webpack.config.js

我检查了这个问题,但它对我不起作用。我对nodejs不太熟悉。我成功地使用 `resolveLoader:modules 使用全局安装中的加载器 任何帮助将不胜感激。谢谢。

0 投票
1 回答
4813 浏览

javascript - 错误:Webpack 2 无法解析 babel-loader

尝试使用 babel 设置 webpack 2 时遇到以下错误消息:

ERROR in Entry module not found: Error: Can't resolve 'babel-loader' in 'path_to_project_dir'

webpack 2 文档之后的配置文件:

我的 packages.json 中有以下开发依赖项:

我的节点和 npm 版本是:

我的操作系统是 macOS Sierra

此错误消息的来源可能是什么,我应该如何解决它。我尝试了很多教程和博客文章来找到解决方案,但都没有奏效。

0 投票
1 回答
85 浏览

webpack - 加载器在 Webpack 2 中失败。它们单独工作,但当两者都包含在配置文件中时失败

我的 webpack.config.js 文件中有以下内容:

当我运行时,webpack我收到以下错误:

我正在使用 Webpack 版本 2.3.2。

以下是我正在使用的开发依赖项:

对于babel-loader,我使用的是 beta 版本,因为建议将 7.x 版本与 Webpack 2 一起使用。以下来自Github repo

webpack 1.x | babel-loader <= 6.x

webpack 2.x | babel-loader >= 7.x(推荐)(^6.2.10 也可以,但有弃用警告)

版本 7.0.0 尚未发布,所以我正在使用测试版。我尝试过使用 6.2.10,但仍然遇到相同的错误。

当我只使用其中一个规则时,webpack 构建成功。例如,当我只有js规则(并删除 CSS 文件)时,它可以工作。

或者当我只有 CSS 规则(并删除任何 ES6 代码)时,它可以工作。

会发生什么?这可能是问题babel-loader还是我的配置文件结构不正确?

0 投票
2 回答
2125 浏览

reactjs - 模块解析失败:es6 用 .JS 文件中的 JSX 反应组件

导入带有 .js 作为文件扩展名的 es6 react 组件时,Webpack Babel 加载器失败。如果将文件扩展名更改为 .jsx,则 babel 会正确编译。有什么线索吗?

编辑:

更新以下日志。

0 投票
1 回答
4610 浏览

javascript - Webpack 2.3.3 - TypeError: $export 不是一个函数

我有这个 Webpack 配置:

我在命令行运行 $webpack 并得到一个输出文件,我将文件加载到浏览器中,如下所示:

如果我在浏览器中加载这个 html 文件,我会得到:

我在 Github 上查看了一堆问题,但似乎都没有解决问题。有谁知道可能出了什么问题?

我使用的是 Webpack 版本 2.3.3。

附带说明 - 我在哪里可以找到一些适用于 Node.js / NPM 模块的 polyfill?

$export似乎是 Webpack 生成的一个函数,下面是我的输出文件中出现的一些函数:

0 投票
1 回答
90 浏览

webpack - babel-loader:转译一个未命名为 app.js 的条目?

一段时间以来,我们一直在使用带有 babel-loader 插件的 webpack 来转译 ES。对于我们的开发环境,我们的配置文件如下所示:

我用webpack-dev-server --inline --config=webpack-dev.config.js --content-base='client'.

问题是,如果我将app.js条目更改为app2.js或其他任何内容,该文件仍由 webpack 服务器提供(在 8080 上运行),但不再被转译。

app.js就 babel-loader 而言,这个名字有什么独特/神奇之处吗?几乎我能找到的每个示例教程,包括 webpack 文档,都使用这个app.js约定,但显然它的名字应该可以是任何东西。

0 投票
1 回答
2473 浏览

node.js - 使用 webpack 2 和 babel-loader 构建 javascript async/await

我正在使用 webpack 2.3.3 使用 async/await javascript 语法构建我的 node.js 应用程序。转译是使用 babel-loader 6.4.1 完成的。我的package.json样子是这样的:

我的 webpack 配置在配置文件中使用transform-async-to-generator带有行的插件:loaders: ['babel-loader?presets[]=es2015&presets[]=stage-0&presets[]=react&plugins[]=transform-async-to-generator', 'eslint-loader']webpack/prod.js

当我运行npm run build时,构建在包含async function foo(arg) { (...) }错误的行上失败Parsing error: Unexpected token function

当我删除异步/等待代码部分时,构建成功。

我在这里这里查看了解决方案,但无法构建 async/await 代码工作。

有人可以帮我吗?多谢

0 投票
1 回答
474 浏览

javascript - babel-loader 没有编译并且没有错误

为什么我的 babel-loader 没有转译?我添加了:让 x = 'LOL'; 控制台.log(x); 到我的 src/main.js。它不输出任何错误并创建输出文件。但它不会将 es6 语法转换为 es5。

这是我的 src/main.js

我的输出文件 dist/bundle.min.js 看起来像这样(让 isnt 变成 var):

我的 webpack.config.js:

我的 package.json: