【smart-transform】取自 Atom 的 babeljs/coffeescript/typescript 智能转 es5 库

简介:

简介

有时间研究下开源库的源码,总是会有些收获的。注意到 Atom 插件编写时,可以直接使用 babel, coffeescript 或者 typescript。有些诧异,毕竟 Electron 中内置的 node 引擎,也一定不是完全兼容 es6,更不用说 coffeescript 和 typescript了。所以,必然在加载插件时,Atom 有某种自动转换的操作。刚好最近有一些类似的需求,需要批量以单个文件的方式转换一些其他语法的文件到 es5 兼容的js文件,于是就把 Atom 的转换机制拆分了出来,写成一个 cli。

他山之玉,不敢私藏。如果只是使用,请直接在npmjs上查找:smart-transform

特色定制

毋容置疑,最核心的地方是取自于 Atom 本身。之所以把这个逻辑单独剥离出来,主要是我很羡慕 Atom 插件编写时,各种语法随心使用的舒爽!要是自己项目,也能这么随意,岂不是爽歪歪!!!

为了独立于 Atom 使用,同时又具备一定的通用新,主要定制性体现在:

  • 将逻辑剥离成一个 cli 命令行工具,以后不管自己还是别人,拿来即用。不是每个前端,都很擅长 nodejs,所以我觉得,这还是能方便一些人的。
  • 通过配置文件,允许个性化定制。即,每个项目的输入和输出目录可以通过配置文件来自由配置。现在还不够灵活,只支持指定唯一一个输入文件夹和唯一一个输出文件夹,不过暂时够用了。
  • 引入 uglify-js 进行压缩和混淆。这一点,确实是项目本身的需要,我相信大部分人,都有这个需求吧?另外,之所以直接使用 uglify-js ,当然是因为我不想再额外配置 webpack 呀!!

扔一个 smart-transform.json 配置文件示例上来吧:

{
  "in":"./src",
  "out":"./lib",
  "exclude":["./src/hi-ignore.js"],
  "minify":true,
  "minifyExclude":["./src/hi-ts.ts"]
}

源码解读

package.json

  "bin": {
    "smart-transform": "index.js"
  }

比较特殊的是 bin 字段。第一次写 cli 的童鞋,常常因为没有写这个字段,导致没有以全局命令的形式使用自己的工具库。

index.js

这是定制最多的一个文件。它实现的主要功能是,读取具体项目根目录的配置文件 smart-transform.json ,然后根据内部字段,来进行一些个性化的转换操作。

目前支持的操作有:

  • 将指定目录的 babeljs/coffeescript/typescript 转为 es5 兼容的js文件,并输出到另一个目录。
  • 忽略某些文件,不对其进行转换操作。
  • 转换时,可选支持同时进行压缩和混淆操作。压缩和混淆,目前使用的是 uglify-js

代码不长,但是本身有一些 node 相关的代码,所以我就还是贴出来,感兴趣的顺便瞅一眼:

#!/usr/bin/env node
'use strict'
var path = require("path")
var fs = require ('fs-plus')
var fse = require('fs-extra')
var os = require("os")
var {execSync} = require("child_process")
var UglifyJS = require("uglify-js")

var argv = require('minimist')(process.argv.slice(2))

var project = argv.project
var configInfo = require(path.resolve(project,"./smart-transform.json"))

var inDir = path.resolve(project,configInfo.in)
var outDir = path.resolve(project,configInfo.out)
var minify = configInfo.minify

var excludeFiles = configInfo.exclude.map(function (filePath) {
  return path.resolve(project,filePath)
})

var minifyExcludeFiles = configInfo.minifyExclude.map(
  function (filePath) {
    return path.resolve(project,filePath)
  }
)

fse.ensureDirSync(outDir)

var inFiles = fs.listSync(inDir,[".js",".ts","coffee"])

for (var inFile of inFiles) {
    if (excludeFiles.includes(inFile)) { // 不需要处理的,直接复制到输出目录
      var outFile = path.resolve(project,outDir,path.basename(inFile))
      fse.copySync(inFile,outFile)
      continue
    }

    var sourceCode = require("./compile-file")(inFile)

    if (minify && !minifyExcludeFiles.includes(inFile)) {
      sourceCode = UglifyJS.minify(sourceCode).code
    }

    var outFile = path.resolve(project,outDir,path.basename(inFile,path.extname(inFile)) + ".js")
    fse.ensureFileSync(outFile)
    fs.writeFileSync(outFile,sourceCode)
}

compile-file.js

相关预编译逻辑取自原Atom代码中的 src/compile-cache.js 类,主要区别是,禁用代码地图并禁用输出代码内的注释。考虑到项目本身的内部兼容性,并没有直接使用最新版的 Atom 源码演绎。如果自己有其他定制需求,可以直接看 Atom 源码。

这个文件比较出彩的地方是,它把各种类似的语法都使用 COMPILERS 的机制管理。一种语法对应一个 COMPILER。在某些特定情况下,如果你想解析或转换其他类型的文件,只需要修改这个类,新增一个 COMPILER 即可。

'use strict'
var path = require('path')
var fs = require('fs-plus')

var COMPILERS = {
  '.js': require('./babel'),
  '.ts': require('./typescript'),
  '.coffee': require('./coffee-script')
}

function compileFileAtPath (filePath) {
  const extension = path.extname(filePath)
  const compiler = COMPILERS[extension]

  var sourceCode = fs.readFileSync(filePath, 'utf8')

  if (compiler.shouldCompile(sourceCode, filePath)) {
    const compiledCode = compiler.compile(sourceCode, filePath)
    return compiledCode
  }

  return sourceCode
}

module.exports = compileFileAtPath

babel.js coffee-script.js typescript.js

分别取自 Atom 源码中的 babel.js coffee-script.js typescript.js。有极小的修改,典型的 拿来主义 。有兴趣的,直接去看下源码,此处不做赘述。

注意

使用 bable 的js文件,开头应是以下几种的其中一种,否则无法被识别:

/** @babel */
"use babel"
'use babel'
/* @flow */

参考文章


原文发布时间为:2017/11/28
原文作者: ios122
本文来源: 开源中国 如需转载请联系原作者
目录
相关文章
|
30天前
|
数据采集 JavaScript 前端开发
实用工具推荐:适用于 TypeScript 网络爬取的常用爬虫框架与库
实用工具推荐:适用于 TypeScript 网络爬取的常用爬虫框架与库
|
3月前
|
JSON JavaScript 安全
解锁TypeScript的潜力:改进标准库类型
解锁TypeScript的潜力:改进标准库类型
|
3月前
|
数据采集 JavaScript 前端开发
TypeScript 和 jsdom 库创建爬虫程序示例
TypeScript 和 jsdom 库创建爬虫程序示例
|
3月前
|
数据采集 JSON JavaScript
探索LinkedIn:使用TypeScript和jsdom库的高级内容下载器
LinkedIn是一个专业的社交网络平台,拥有超过7亿的用户和数以亿计的职位、公司和教育机构的信息。对于数据分析师、市场营销人员、招聘人员和其他对LinkedIn数据感兴趣的人来说,能够从LinkedIn上获取和分析这些信息是非常有价值的。 因此,为了有效地从LinkedIn上获取数据,我们需要使用一些高级的技术和策略,来模拟正常的用户行为,避免被检测。本文将介绍如何使用TypeScript和jsdom库来实现一个高级的内容下载器,它可以从LinkedIn上下载任意用户、职位或公司的信息,并保存为JSON格式的文件。我们还将使用爬虫代理来提供不同的IP地址,以进一步降低被封锁的风险。
探索LinkedIn:使用TypeScript和jsdom库的高级内容下载器
|
9月前
|
前端开发 JavaScript
学习React Hooks和TypeScript打造的仿Antd的UI组件库
✨ RockUI 学习React Hooks和TypeScript实现仿Antd的react UI组件库,并通过此组件库在create-react-app的基础上实现了一套简单的应用,下方链接 样式解决方案——saas 测试——Jest框架 Icon库基于react-fontawesome github 文档 文档使用storybook进行展示 使用eslint和prettier对代码风格进行约束 使用见README.md,学习及开发中的问题与解决见STUDY_README.md
95 0
|
10月前
|
前端开发 JavaScript 开发工具
使用Vite和TypeScript带你从零打造一个属于自己的Vue3组件库(下)
使用Vite和TypeScript带你从零打造一个属于自己的Vue3组件库(下)
328 0
|
10月前
|
资源调度 JavaScript 前端开发
使用Vite和TypeScript带你从零打造一个属于自己的Vue3组件库(上)
使用Vite和TypeScript带你从零打造一个属于自己的Vue3组件库(上)
502 0
|
11月前
|
前端开发 开发工具 git
react+dumi+typescript搭建个人组件库Concis
react+dumi+typescript搭建个人组件库全过程记录
151 1
|
JavaScript
antd组件库封装2-为什么要使用typescript
antd组件库封装2-为什么要使用typescript
53 0
antd组件库封装2-为什么要使用typescript
|
JavaScript
antd组件库封装1-什么是typescript
antd组件库封装1-什么是typescript
66 0
antd组件库封装1-什么是typescript