问题标签 [babelify]

我正在使用 browserify 将所有需要打包到一个适合在浏览器环境中运行的捆绑 js 文件中。当我运行npm run build-dist命令时，以下代码运行良好。我现在如何更改 package.json 文件以type="text/babel"从 index.html 文件中删除属性？

index.js：

索引.html

包.json

删除“text/babel”属性时浏览器出错：

我是 React 和 gulp 的新手，我正在尝试构建一个示例项目。我设法为 gulp 包含了一个 React 任务，以转换我的反应条目文件（App.js），但问题是，每当我在我的 App.js 中导入的 CSS 文件中插入一条规则时，我都会收到一个错误，当css文件为空时一切正常！！！

这是代码

反应文件：

这是我的 gulp 文件：

我无法browserify编译我试图使用条件渲染的反应文件。

渲染函数：

当我尝试使用 编译时browserify，出现以下错误。

我编译browserify src/index.js -o static/js/bundle.js -t [ babelify --presets [ env react ] ]

我的 .bablerc 是：

react 的文档表明条件是条件渲染的有效选项，所以我认为这是一个browserify问题。我可以设置什么选项来编译这个文件？

我对 gulp 很陌生，但我不明白为什么我的 javascript gulp 任务在导入 css 或图像时失败。

SVG图像：

CSS：

这是我的 package.json：

这是我的 .babelrc （不确定是否真的需要）：

最后是我的 gulpfile.js：

因此，我最终注释掉了图像和组件特定 css 的导入语句，并且我的 ReactJS 代码编译成功。但是，我经常将图像和 css 导入我的 React 组件。有没有办法可以设置我的 gulp 任务来解释我的 React 组件中的任何导入的 css 或图像？我觉得我的配置有问题，但我似乎无法弄清楚。

完全披露：我在消除 npm 和 node 时打开了一个与此非常相似的问题。您可以在以下位置找到该问题：npm i 和 npm update Breaking gulp, browserify builds。尽管与此问题有些相似，但该问题的根源在构建堆栈中较低，并诊断出一个相关但不相同的问题。请不要将此标记为重复！

你期待会发生什么？

gulp 将 vue.js 组件转换为函数式 JS

究竟发生了什么？

运行gulp contacts会导致捆绑包不完整，这会导致 Chrome 出现错误：

在火狐中：

这仅发生在单个组件中（这是项目的新组件），并且仅在const Axios = require('axios');存在时发生。

注释或删除该行允许构建成功完成。没有其他具有此行的组件受到影响。

使用时也会出现这种情况import Axios from 'Axios';。

文件构建不正确的第一个主要指标是包的行数。一个正确构建的包通常超过 11k LOC，而不管预编译 LOC 的数量是多少。这个特定的捆绑包大约是 1,100 LOC。

以下是在 devtools 中查看源代码时触发错误的示例：

环境：

代码和配置：

包.json

gulpfile.js

尝试的补救措施：

我试过了：

跑步：

npm update

将 node 和 npm 升级到最新版本。

debug: false在 browserify 调用中设置

从生产系统和从事同一项目的两个独立同事复制已知的工作 package.json 和 package-lock.json。使用已知的工作包*.json 文件，我运行rm -rf node_modules, npm cache clear --force, npm install, 并收到相同的结果。

根据 gulp 的文档查看了常见问题及其修复页面

创建了一个完全独立的、简单的目录来模仿受影响项目的结构，并且错误仍然存​​在。

与 npm 团队合作以消除节点或 npm 作为问题的潜在来源——我们将其缩小为 gulp 或 gulp 插件问题。

我还咨询了 Vue.js 支持团队，他们也同意这是 gulp 或 gulp 插件的问题。

这个问题最奇怪的部分是它影响了单个新组件，该组件与 30 多个同样导入或需要 Axios 的其他组件在同一构建任务中。任何帮助将不胜感激！

资料来源：

Gulp Browserify SourceMaps

吞咽，browserify，地图？

Gulp Browserify SourceMaps

node sass 版本 3.5.3 正在破坏构建

Gulp 生成的源映射在 Chrome 中不起作用

Gulp Sass with errLogToConsole: true 仍然停止我的其他监视任务

获取：SyntaxError: missing ) 在参数列表之后但无法找出 hulpfile.js 有什么问题

https://github.com/gulpjs/gulp/issues/2065

https://github.com/dlmanning/gulp-sass/wiki/Common-Issues-and-Their-Fixes

我安装了以下软件包：

我可以通过以下方式成功浏览我的 NodeJS Express 应用程序：

但是如果我尝试添加缩小：

我得到：

如果我将“babel-preset-minify”更改为“minify”，也会发生同样的情况。

这里缺少什么，所以我可以缩小我的 bundle.js？

我正在尝试将节点模块导入到我的 Vue 项目中，但出现以下错误：

我知道这可能是由于节点模块没有被 babelify 转换，但我不知道如何修复它。

我的代码可以在这里找到：

https://github.com/timothyylim/vue-date-picker-example

跑步

应该显示错误。我只是从vue-cli browserify 模板开始，并尝试引入一个日期选择器组件。

任何帮助将不胜感激！

我花了几天时间在互联网上搜索并寻找解决此问题的方法（请不要将其标记为重复！）。我正在尝试使用 ES6 导入：

我的 gulp 任务无法在“从 bulmajs 导入”行编译；我得到了可怕的“ParseError：'import'和'export'可能只出现在'sourceType：module'中”:(

这是 gulp 任务：

我很想继续使用 babel v7，但看不出我的 task/package.json 有什么问题（尤其是在下划线导入有效的情况下）。

这是我的 package.json：

}

任何帮助将不胜感激，我觉得我已经阅读了每个相关的线程/SO帖子，但仍然没有找到解决方案。

我的最终目标是在使用 Browserify 和 Babel 7 的项目中使用 Yarn Workspaces。这是我遇到的问题的最小再现。基本上，似乎子文件夹中存在 package.json 文件（这是您在使用 Yarn Workspaces 时拥有的东西之一）破坏了我的 Browserify 构建，我不知道为什么。

这是一个 GitHub 存储库，对问题进行了最少的复制。

首先，安装依赖项（可以使用yarn或者npm，没关系）：

然后确认 Browserify+Babel 构建工作：

耶，一切都好！我编译的代码在 bundle.js 中。

现在让我们在a文件夹中创建一个虚拟的 package.json：

那不应该改变构建，对吧？错误的：

我无法弄清楚为什么会这样。任何帮助，将不胜感激！

我继承了一个相当不寻常的网站，它混合了 C# 和 Node JS（使用 TypeScript）。我们在 Azure DevOps 上设置了一个持续集成环境来构建网站并将其部署到测试环境。自 3 月以来，我们不必构建网站，现在构建过程突然中断。我们不得不将 package.json 中对“gulp”的引用从“github:gulpjs/gulp#4.0”（不再存在）更改为“github:gulpjs/gulp#71c094a51c7972d26f557899ddecab0210ef3776”，但现在构建过程的步骤是调用 gulp ("node node_modules\gulp\bin\gulp.js package") 失败并出现以下错误（来自 DevOps 构建日志）：

如果我在本地运行“node node_modules\gulp\bin\gulp.js package”，我会得到以下信息：

这个链接 - https://github.com/babel/gulp-babel/issues/154 - 似乎暗示了browserify的问题（​​或者至少是browserify和babel-core之间的不兼容）？唯一的建议是放弃使用 browserify。对我来说神秘的是为什么这以前有效，但现在我们所做的只是对 gulp 的引用而失败了。

谁能向我解释导致错误的原因以及如何解决？任何帮助将不胜感激。

引发错误的 gulp 任务是这样的：

config.appMain = "App/main.ts" config.jsDest = "./wwwroot/js"

gulpfile.js 顶部的相关“要求”是：

package.json devDependencies 版本是：

我试过使用 babelify，所以 gulp 任务变成：

但是当我在本地执行“node node_modules\gulp\bin\gulp.js package”时，我得到了完全相同的错误。

如果您需要更多详细信息或代码，请告诉我。谢谢你提供的所有帮助。