node.js - babelify 转换未运行

Question

我无法让 babelify 在我的代码上运行。

我有两个打字稿文件：

脚本1.ts

import Greeter from './script2';

const greeter = new Greeter('Hello, world!');

document.body.innerHTML = greeter.greet();

脚本2.ts

class Greeter {
    greeting: string;

    constructor(msg: string) {
        this.greeting = msg;
    }

    greet() {
        return `<h1>${this.greeting}</h1>`;
    }
}

export default Greeter;

.babelrc

{
  "presets": [
      "airbnb"
  ]
}

我正在尝试使用 tsify 和 babelify 运行 browserify：

browserify ./script1.ts -o ./app.js -p tsify -t babelify

这些文件被编译和打包，但它从来没有在代码上运行 babelify，我最终得到的输出仍然包含类和模板字符串。

如果我单独运行 babel，它会按预期工作：

browserify ./script1.ts -o ./app.js -p tsify
babel ./app.js --out-file ./app-babel.js

我在这里缺少什么步骤？

Answer 1

问题是 babel 默认只会对文件.JS进行操作。.JSX不幸的是，目前无法从.babelrc配置文件（https://github.com/babel/babel/issues/3741）中配置它。

所以这必须从命令行配置：

browserify ./script1.ts -o ./app.js -p tsify -t [ babelify --extensions ".ts",".tsx",".js",".jsx" ]

或来自代码：

browserify({ entries: files })
  .plugin(tsify)
  .transform(babelify, {
    extensions: [
      '.ts', '.tsx', '.js', '.jsx'
    ]
  });

.babelrc请注意，当指定此扩展列表时，babel 仍会自动加载任何内容。