问题标签 [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.
javascript - 使用 Webpack 将 ES6 转换为单独的文件
是否可以将 webpack 配置为等效于:
这样一个目录结构看起来像这样:
将所有文件编译为 ES5 并在lib
目录下以相同的结构输出它们:
我通过了所有文件路径的通配符并将它们作为单独的条目传递,但似乎 webpack 在定义输出文件时“忘记了”文件的位置。Output.path
仅提供[hash]
令牌,虽然Output.file
有更多选项,但仅提供和[name]
,因此至少看起来不支持这种编译。[hash]
[chunk]
为了给我的问题提供一些背景信息,我正在创建一个由 React 组件及其相关样式组成的 npm 模块。我正在使用 CSS 模块,所以我需要一种将 JavaScript 和 CSS 编译到模块的 lib 目录中的方法。
node.js - webpack 使用全局 babel-loader 预设
我想使用全局模块/预设与 webpack 一起使用(即不想在项目中安装它们)
我的配置文件:webpack.config.js
我检查了这个问题,但它对我不起作用。我对nodejs不太熟悉。我成功地使用 `resolveLoader:modules 使用全局安装中的加载器 任何帮助将不胜感激。谢谢。
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
此错误消息的来源可能是什么,我应该如何解决它。我尝试了很多教程和博客文章来找到解决方案,但都没有奏效。
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
还是我的配置文件结构不正确?
reactjs - 模块解析失败:es6 用 .JS 文件中的 JSX 反应组件
导入带有 .js 作为文件扩展名的 es6 react 组件时,Webpack Babel 加载器失败。如果将文件扩展名更改为 .jsx,则 babel 会正确编译。有什么线索吗?
编辑:
更新以下日志。
javascript - Webpack 2.3.3 - TypeError: $export 不是一个函数
我有这个 Webpack 配置:
我在命令行运行 $webpack 并得到一个输出文件,我将文件加载到浏览器中,如下所示:
如果我在浏览器中加载这个 html 文件,我会得到:
我在 Github 上查看了一堆问题,但似乎都没有解决问题。有谁知道可能出了什么问题?
我使用的是 Webpack 版本 2.3.3。
附带说明 - 我在哪里可以找到一些适用于 Node.js / NPM 模块的 polyfill?
$export
似乎是 Webpack 生成的一个函数,下面是我的输出文件中出现的一些函数:
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
约定,但显然它的名字应该可以是任何东西。
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 代码工作。
有人可以帮我吗?多谢
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: