与tsify和firebase一起使用的Babelify不会生成正确的代码

在使用 tsify 和 firebase 与 Babelify 结合时，可能会遇到生成的代码不正确的问题。这通常是由于配置不当或依赖版本不兼容引起的。以下是一些基础概念、可能的原因以及解决方案：

基础概念

Babelify: 是一个 Browserify 转换器，它允许你使用 Babel 编译代码。Browserify 是一个工具，它可以将多个 JavaScript 文件打包成一个单一的文件，并且可以处理依赖关系。
tsify: 是一个 Browserify 插件，用于将 TypeScript 代码转换为 JavaScript。
Firebase: 是一个后端即服务（BaaS）平台，提供了多种云服务，如数据库、身份验证、存储等。

可能的原因

配置错误: tsify 或 Babelify 的配置可能不正确，导致 TypeScript 代码没有被正确编译。
依赖版本不兼容: tsify、Babelify 和 Firebase 的版本可能不兼容，导致生成的代码出现问题。
TypeScript 编译选项: TypeScript 编译选项可能没有正确配置，导致生成的 JavaScript 代码不符合预期。

解决方案

1. 确保正确的配置

确保你的 package.json 和 browserify 配置文件（如 browserify.config.js）正确配置了 tsify 和 Babelify。

{
  "scripts": {
    "build": "browserify -t [ tsify --project ./tsconfig.json ] -p [ babelify --presets [ @babel/preset-env ] ] src/index.ts -o dist/bundle.js"
  },
  "devDependencies": {
    "browserify": "^17.0.0",
    "babelify": "^10.0.0",
    "tsify": "^5.0.0",
    "@babel/core": "^7.0.0",
    "@babel/preset-env": "^7.0.0",
    "typescript": "^4.0.0"
  }
}

2. 检查依赖版本

确保所有依赖的版本是兼容的。你可以使用 npm ls 命令来检查依赖树，确保没有版本冲突。

npm ls

3. 配置 TypeScript 编译选项

确保你的 tsconfig.json 文件正确配置了编译选项。

{
  "compilerOptions": {
    "target": "ES6",
    "module": "commonjs",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  },
  "include": ["src"]
}

4. 示例代码

以下是一个简单的示例，展示了如何使用 tsify 和 Babelify 打包 TypeScript 代码。

npm install browserify babelify tsify @babel/core @babel/preset-env typescript --save-dev

package.json:

{
  "scripts": {
    "build": "browserify -t [ tsify --project ./tsconfig.json ] -p [ babelify --presets [ @babel/preset-env ] ] src/index.ts -o dist/bundle.js"
  },
  "devDependencies": {
    "browserify": "^17.0.0",
    "babelify": "^10.0.0",
    "tsify": "^5.0.0",
    "@babel/core": "^7.0.0",
    "@babel/preset-env": "^7.0.0",
    "typescript": "^4.0.0"
  }
}

tsconfig.json:

{
  "compilerOptions": {
    "target": "ES6",
    "module": "commonjs",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  },
  "include": ["src"]
}

src/index.ts:

import firebase from 'firebase/app';
import 'firebase/firestore';

const firebaseConfig = {
  apiKey: "YOUR_API_KEY",
  authDomain: "YOUR_AUTH_DOMAIN",
  projectId: "YOUR_PROJECT_ID",
  storageBucket: "YOUR_STORAGE_BUCKET",
  messagingSenderId: "YOUR_MESSAGING_SENDER_ID",
  appId: "YOUR_APP_ID"
};

firebase.initializeApp(firebaseConfig);

const db = firebase.firestore();
db.collection('users').doc('user1').set({
  name: 'John Doe',
  age: 30
});

运行构建脚本：

npm run build

参考链接

通过以上步骤，你应该能够解决 tsify 和 Babelify 结合使用时生成的代码不正确的问题。

与tsify和firebase一起使用的Babelify不会生成正确的代码

、、、

在对我的构建环境进行了长时间的更改之后，我已经到达了这一点。我从来没有用过巴别塔，因为它不是必须的。但包括firebase包在内，破坏了构建，我在网上找到的所有解决方案都建议使用babel将包转换为可编译的东西。但是当我现在编译我的代码时，在运行时找不到firebase。我的ts代码： import firebase from 'firebase

浏览 22提问于2021-11-07得票数 0

1回答

browserify + tsify* + babelify；babel被忽略*

、、、、

我想把我的代码浏览，整理和修改。Browserify和另一台预告片工作，但在一起，他们没有。巴贝尔似乎被忽视了(甚至连.babelrc都不看)。我有以下的吞咽代码：const browserify = require("browserify");const

浏览 0提问于2018-12-28得票数 10

回答已采纳

10回答

SyntaxError：‘导入’和‘导出’可能只出现在'sourceType:模块‘- Gulp

、、、、

gulp');var browserify = require('browserify');var watch = require('gulp-watch'); return browser

浏览 5提问于2016-10-13得票数 81

回答已采纳

1回答

缺少带browserify + babelify* + tsify的TypeScript类型*

、、、

因此，首先，我将index.js更改为index.ts，并使用 (npm install --save @types/node)代替了旧的typings.json方式。构建安装程序使用gulp和browserify，现在按照建议的引入tsify和babelify。褐化.plugin(tsify) presets: [

浏览 8提问于2016-10-20得票数 3

回答已采纳

1回答

to 2015/ CommonJS模块压缩为一个带有Gulp的CommonJS模块

、、、、

使用browserify，我可以给它一个文件，让这个文件通过tsify和babelify运行，生成一个文件，将所有文件合并到一个文件中。我基本上想要类似的功能，但我需要它来生成一个CommonJS模块，用于与CommonJS兼容的系统，比如NodeJS，而不是浏览器。我很难找到一个选项或插件来做这件事。我是不是忽略了什么？

浏览 3提问于2017-02-03得票数 0

回答已采纳

0回答

tsify -只读browserify文件

、、

我正在使用tsify构建我的TypeScript文件。然而，目前tsify似乎正在读取我的源代码中的所有TypeScript文件，而不仅仅是我的主TypeScript文件中包含的文件(以及随后导入的文件)。如何将tsify限制为仅提供给browserify的文件gulp.task("build", function() return b

浏览 13提问于2016-12-29得票数 1

回答已采纳

3回答

SyntaxError：“导入”和“导出”可能只出现在Gulp + Babel + TypeScript +sourceType中的“sourceType:模块”

、、、、

如下所示：在我做以下工作之前，一切都很好：我想要能够使用源地图有几个已知的原因，你可能会遇到这种情况。但是在我的任务中，在运行之前运行tsify： v

浏览 1提问于2015-11-15得票数 11

2回答

我如何使用tsx与snabbdom-jsx (没有反应)？

、

我找到的所有文档都解释了如何在React中使用TypeScript，但是我对与snabbdom-jsx一起使用它很感兴趣？知道如何配置tsconfig才能工作吗？关于使用babel的文档：顶部的/** @jsx */实用化告诉Babel使用html函数而不是React.createElement默认值。html函数接受Babel传递的参数，并按照Snabbdom的补丁函数<e

浏览 3提问于2016-05-07得票数 1

回答已采纳

1回答

如何配置gulp来编译.jsx和.ts文件？

、、

我的客户端代码在react原生的.jsx文件中，我正在使用gulp来编译它们。我想转换我的项目开始使用typescript，但一次一个文件。这意味着我需要能够使用gulp编译jsx和ts。require('run-sequence'); var

浏览 0提问于2017-11-18得票数 1

1回答

导入外部库并使用类型记录生成单个文件

、

在Gulp中，我使用类型记录将文件传输到ES6，然后使用Babel生成ES5，最后使用Browserify生成包含所有模块的1个文件。/src/scripts/main.ts') .plugin(tsify, {moduleResolution: "node", target:"es5", allowJs:true,allowUnreachableCode:true"

浏览 1提问于2016-04-22得票数 0

回答已采纳

2回答

导入Typescript @types会导致browserify出错

、、、

我可以在没有它的情况下将它捆绑在一起，但是我得到了类型错误。看起来像这样：visual studio代码可以识别出它是一个类型，因为intellisence没有给我任何错误。在没有导入的情况下，它可以工作，但我得到了一堆类型错误。如何让browserify与import语句一起捆绑？以下是我对该任务的gulp代码。entries: ['ts/

浏览 2提问于2017-05-05得票数 1

1回答

gulp浏览器化中javascript和类型的混合

、、

对于javascript和现在的类型记录，我有很好的工作流。它们将源文件与模块结合在一起，并生成一个.js文件供浏览器使用。但是，有了一个较旧的javascript项目，我现在想引入使用类型记录的新功能--而不是将所有内容都转换为类型记录。bundler.plugin(tsify, { noImplicitAny: false, jsx: 'react', moduleReso

浏览 4提问于2016-05-11得票数 0

回答已采纳

1回答

带类型记录的Rocket.Chat WebHook

、、

) presets: ["es2015"],Incoming WebHook.error script.js:1 ReferenceError: module is not definednimble_restivus/lib&#

浏览 1提问于2020-03-23得票数 8

回答已采纳

3回答

如何浏览、编译ES6和缩小NodeJS应用程序

、、、、

我正试图同时处理browserify和ES6。我有以下基本节点文件：var foo = require('.foo.js return n * 111;现在我想做以下几点：我已经全局安装了browserify，我使用以

浏览 11提问于2015-11-07得票数 9

回答已采纳

1回答

让Budo保存生成的输出包

、

我正在使用开发一个使用Browserify和Babelify的网站，如下所示：这很好用，除了生成的static/bundle.js实际上并没有保存到磁盘上-它只是在浏览器中访问。如果我删除path参数： budo --live -- -t [ babe

浏览 1提问于2016-12-15得票数 1

1回答

是否防止在typescript中使用“严格”？

这个错误发生在iPad5s/6s+几个不同的iPhone上(我已经记不清是哪一个了)。它在HTC one上也不起作用。在我尝试过的任何三星/windows手机上都没有出现这个错误。它也适用于台式机。下面是来自bundle.js代码行；"use strict"; const guage_1 = require(".只是想知道是否有一种方法可以确保typescript不会使用

浏览 3提问于2016-07-08得票数 15

回答已采纳

3回答

Babelify在从node_modules导入模块时抛出ParseError

、、、、

我在和Babelify和一起工作。此外，我还通过节点模块系统使用了ES6风格的模块特性。node_modules/libs中的test.js console.log('Hello');main.js (将编译为bundle.js) import test from 'libs/

浏览 2提问于2015-05-22得票数 32

回答已采纳

1回答

将watchify与babelify一起使用

、、、、

将watchify与babelify一起使用实用吗？我正在尝试React，并在dev模式下运行一个项目：我希望watchify能够查找src.js上的更改，并编译包含所有必需模块的函数式build.js，并使用babelify来编译脚本的jsx部分。但这似乎花费

浏览 1提问于2015-10-07得票数 3

1回答

使用带gulp的browserify运行多个转换

、、、、

我正在使用browserify和gulp捆绑我的web应用程序中的javascript代码，我使用babelify来转换代码，使其与es6兼容，如下所示。browserify-shim，根据文档，使用它的方法是将以下的json包含到package.json中： "browserify": { "transform": [

浏览 5提问于2015-12-03得票数 3

回答已采纳

2回答

当我捆绑angular 2应用程序时，this._nativeError未定义

、、、

我使用gulp、browserify和tsify来捆绑我的应用程序，并且我将browserify指向main.ts文件。这就是我正在做的捆绑应用程序的所有事情。但是，当我尝试运行导入了捆绑的js文件的index.html文件时，我得到了错误：this._nativeError is undefined with a空白屏幕。我的tsconfig.json "compileOnSave": false,

浏览 3提问于2017-01-17得票数 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

与tsify和firebase一起使用的Babelify不会生成正确的代码

基础概念

可能的原因

解决方案

1. 确保正确的配置

2. 检查依赖版本

3. 配置 TypeScript 编译选项

4. 示例代码

参考链接

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐