browserify + tsify + babelify； babel 被忽略

typescript

使用 browserify + tsify + babelify 是一种流行的工具链组合，它可以帮助我们在使用 typescript 编写的项目中使用 ES6+ 的新特性。通过这个组合，我们可以在浏览器中直接运行 typescript 代码，并且使用最新的 JavaScript 语法。

在这个工具链中，browserify 负责将我们的 typescript 代码打包成一个浏览器可识别的 JavaScript 文件。tsify 是 browserify 的一个插件，它可以让我们直接编译 typescript 代码，而不需要额外的配置。babelify 则是一个 browserify 插件，它可以让我们在编译 typescript 代码之前，先使用 Babel 来转译我们的代码，以便支持更多的 JavaScript 特性。

使用 browserify + tsify + babelify 的好处是我们可以在项目中使用最新的 JavaScript 语法，而不需要担心兼容性问题。Babel 可以将我们的代码转译成大多数浏览器都支持的 ES5 语法，这样我们就可以放心地使用箭头函数、解构赋值、模板字符串等新特性了。

下面是一个简单的示例代码，演示了如何使用 browserify + tsify + babelify 来打包和转译 typescript 代码：

Javascript
// src/mAIn.ts
const greet = (name: string) => {
  console.log(<code>Hello, ${name}!</code>);
};
greet('World');

在这个示例中，我们定义了一个箭头函数 greet，它接收一个名字参数，并打印出一条问候语。然后我们调用这个函数并传入了字符串 'World'。

接下来，我们需要使用 browserify + tsify + babelify 来将这个 typescript 代码转译成浏览器可识别的 JavaScript 代码。首先，我们需要安装相应的依赖：

bash
npm install -g browserify
npm install --save-dev tsify babelify @babel/preset-env

然后，我们可以使用以下命令来进行打包：

bash
browserify src/mAIn.ts -p [ tsify --noImplicitAny ] -t [ babelify --presets [ @babel/preset-env ] ] > dist/bundle.JS

在这个命令中，我们使用了 tsify 插件来编译 typescript 代码，并且禁用了隐式 any 类型的检查。然后，我们使用 babelify 插件来转译 typescript 代码，并指定了 @babel/preset-env 预设来进行转译。

最后，我们将打包后的 JavaScript 代码输出到 dist/bundle.JS 文件中。

这样，我们就可以在浏览器中加载 dist/bundle.JS 文件，并运行我们的 typescript 代码了。

使用 browserify + tsify + babelify 这个工具链组合，可以帮助我们在 typescript 项目中使用最新的 JavaScript 语法。通过将 typescript 代码编译成浏览器可识别的 JavaScript 代码，并使用 Babel 转译，我们可以放心地使用 ES6+ 的新特性。这个工具链的配置相对简单，使用起来非常方便，是一个非常实用的开发工具。