Question

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

我有两个打字稿文件：

script1.ts

import Greeter from './script2';

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

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

script2.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'
    ]
  });

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

babelify变换没有运行

1 个答案: