标签: babeljs

我在使用mocha和babel编译器运行istanbul时遇到了一些问题.

我的所有测试都运行得很好,但在完成所有测试后,它会向我显示以下消息:

No coverage information was collected, exit without writing coverage information

而且它没有制作任何报道报道..

我正在运行的命令是:

NODE_ENV=test istanbul cover _mocha -- --require babel-core/register --recursive

该项目托管在github:https: //github.com/weslleyaraujo/react-flux-puzzle/tree/feat/unit-tests-24

任何想法可能是什么？

我正在使用"使用严格"的函数形式,并且不希望Babel在翻译后添加的全局形式.问题是我使用的是一些没有使用"use strict"模式的库,并且在脚本连接后可能会抛出错误

我正在学习React,我想我很了解它.然而,有一件事困扰我关于开发强大的React应用程序 - 开发人员使用什么工具进行静态类型检查？

我非常喜欢TypeScript.由于类型检查和其他简洁的功能,我认为它可以减少开发JavaScript应用程序的痛苦.Visual Studio Code还提供了非常好的代码完成.我知道,我可以把它与利用工作做出反应分型 + DenifitelyTyped.

问题是,关于使用React + TypeScript的教程并不多.似乎也没有很多关于使用这个组合进行开发的文章.另一方面,许多人似乎正在使用Flow,这是一个由Facebook支持的项目(我猜他们也使用它).

我已经设法找到关于Reddit的讨论,其中有关于使用React + TypeScript/React + Flow方式的优点和缺点.然而,对我来说,它似乎已经过时了,因为它现在已经有10个月了.我认为从那以后发生了很多变化.

我还发现了两篇关于使用React + Flow和React + TypeScript的文章.作者陈述了他在使用这两个选项时遇到的一些问题,并得出结论:TypeScript是"现在最好的选择"(2015年11月),特别是因为Flow项目有很多问题并且从Facebook获得的开发人员活动很少.他还提到它与巴贝尔不相称？

所以,我想的问题是:是否可以安全使用做出反应+打字稿组合,否则我会碰到一些困难？Flow怎么样？我应该检查一些其他类似的工具吗？你会推荐哪种方法？

2017年9月更新:

拥有超过一年的日常使用TypeScript经验,并在一段时间内使用Flow,我得出以下结论:

• 今天使用TypeScript仍然很痛苦.问题是JavaScript世界的移动速度太快以至于TypeScript一直落后.考虑使用那个花哨的新ES7第3阶段功能？不,你不能.希望获得某些库的最新版本的类型提示？等一两个月,也许更多......
• 流程已经走了很长一段路,它已经得到了很大的改进,它可以捕获一些TS不能的东西.最重要的是,它最终适用于Windows.此外,还有很棒的VS Code插件(不知道为什么它只有3/5的评级).它使用React Native 100%工作,TypeScript甚至还不到50%.
• 大多数情况下,您根本不需要类型.所有额外的打字很少值得.JS是一种动态类型语言,克服它:)

TL; DR:如果您打算使用任何类型检查器,我建议使用Flow.

2019年2月更新:

我相信上面的建议已经过时,不再相关.三个原因:

• React Hooks在这里.它们使代码的类型检查变得更加容易.在大多数情况下,不需要额外的代码.
• TypeScript的类型推断已得到改进.
• TypeScript比Flow有更大的社区.Facebook的软件包经理Even甚至正在从Flow转向TypeScript.

因此,我认为TypeScript比2019年的Flow更加务实.

至于是否值得使用任何类型的检查器,我会说这取决于项目的大小.小项目可能不需要它.

我在客户端用Babel编译器在ES6中编写了同构应用程序.我希望我的快速服务器具有与客户端代码相同的ES6语法.

不幸的是require('babel/register')不起作用..

server.js

require('babel/register'); // doesn't work
// require('babel-core/register); doesn't work..

const env = process.env.NODE_ENV || 'development';
const port = process.env.NODE_PORT || 1995;

const http = require('http');
const express = require('express');
const address = require('network-address');

let app = express();

app.set('port', port);
app.use(express.static(path.join(__dirname, 'public')));

app.get('*', (req, res) => {
   res.send('Hello!');
});

http.createServer(app).listen(app.get('port'), function () {
   console.info('Demo app is listening on "%s:%s" env="%s"', address(), app.get('port'), env);
});

我试图用Webpack的Uglify插件删除console.logs,但似乎与Webpack捆绑的Uglify插件没有该选项,它在文档中没有提到.

我正在从webpack初始化uglify,如下所示: new webpack.optimize.UglifyJsPlugin()

我的理解是我可以使用独立的Uglify lib来获取所有选项,但我不知道哪一个？

问题是drop_console不起作用.

我看到babel.js装饰器(在"第1阶段"中可用)在https://github.com/wycats/javascript-decorators上实现了规范.看起来装饰器仅限于(1)类,(2)访问器和(3)方法.在我的例子中,我想在普通的旧函数上使用装饰器,如

@chainable
function foo() { }

在哪里(只是一个例子)

function chainable(fn) {
  return function() {
    fn.apply(this, arguments);
    return this;
  };
}

我没有看到装饰器不能应用于函数的任何逻辑原因.我的问题是,有没有办法实现这一目标？还是有一些很好的理由为什么功能无法装饰？

事实证明,在https://github.com/wycats/javascript-decorators/issues/4上存在一个问题.

我知道TypeScript用于编写Angular2,这对于想要进入Angular2的人来说可能是一个更好的选择,但是当我看到Babel时,它看起来非常像TypeScript.

我注意到很多知名公司都坚持巴贝尔.

一些问题:

1. 它们相互之间有什么优势？
2. 这使他们成为项目/开发人员的更好或更差的选择？
3. 它们之间的主要区别是什么？它们的独特之处是什么？

是否有使用ES6或ES7或babel的语法,这将允许我轻松地将许多子文件组捆绑在一起？

例如,给出:

./action_creators/index.js
./action_creators/foo_actions.js
./action_creators/bar_actions.js

让index.js导入foo和bar动作,然后重新导出它们,所以我可以

import {FooAction, BarAction} from './action_creators/index.js'

如果我要更改我自己组织对象的文件,我不想记住/更改引用.

在我的构建步骤中,我使用babel将代码转换为es5(从src到dist).如何使其排除以.test.js？结尾的文件？

的package.json

"scripts": {
  "build": "babel src --out-dir dist",

.babelrc

{
  "presets": [ "es2015" ],
  "ignore": "\\.test\\.js"
}

这是我在package.json文件中的jest配置:

"jest": {
    "automock": false,
    "browser": true,
    "moduleNameMapper": {
      "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "./app/tests/mocks/FileMock.js",
      "\\.(css|less)$": "identity-obj-proxy"
    },
    "moduleFileExtensions": [
      "js",
      "jsx"
    ],
    "moduleDirectories": [
      "node_modules"
    ],
    "transform": {
      "^.+\\.jsx?$": "./node_modules/babel-jest",
      "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "./app/tests/mocks/FileTransformer.js"
    },
    "testEnvironment": "jsdom",
    "testPathDirs": [
      "./app/tests"
    ],
    "testRegex": ".*.test.js",
    "verbose": true
  }

和.babelrc文件位于我的根文件夹中:

{
  "plugins": ["syntax-dynamic-import", "transform-runtime"],
  "presets": [
    [
      "es2015",
      {
        "modules": false
      }
    ],
    "react",
    "stage-0"
  ],
  "env": {
    "start": {
      "presets": [
        "react-hmre"
      ]
    }
  }
}

根据在开玩笑的入门页面上找到的文档,这是我需要让babel工作的所有东西.

无论如何,这个测试:

import React from 'react';
import …