在单独的进程中,运行typescript类型检查器的Webpack 插件

・8 分钟阅读

  • 源代码名称: fork-ts-checker-webpack-plugin
  • 源代码网址: https://www.github.com/Realytics/fork-ts-checker-webpack-plugin
  • fork-ts-checker-webpack-plugin的文档
  • fork-ts-checker-webpack-plugin的源代码下载
  • Git URL:
    git://www.github.com/Realytics/fork-ts-checker-webpack-plugin.git
  • Git Clone代码到本地:
    git clone https://www.github.com/Realytics/fork-ts-checker-webpack-plugin
  • Subversion代码到本地:
    $ svn co --depth empty https://www.github.com/Realytics/fork-ts-checker-webpack-plugin
                              Checked out revision 1.
                              $ cd repo
                              $ svn up trunk
              
  • Fork TS Checker Webpack插件

    web pack插件在单独的进程上运行typeScript类型检查器。

    安装

    这个插件至少需要webpack 2.3,typescript 2.1和可选的tslint 5.0,

    npm install --save-dev fork-ts-checker-webpack-plugin

    web web pack配置(带ts-loader )

    var ForkTsCheckerWebpackPlugin =require('fork-ts-checker-webpack-plugin');var webpackConfig = {
     context:__dirname, // to automatically find tsconfig.json entry:'./src/index.ts',
     module: {
     rules: [
     {
     test:/.tsx?$/,
     loader:'ts-loader',
     options: {
     // disable type checker - we will use it in fork plugin transpileOnly:true 
     }
     }
     ]
     },
     plugins: [
     newForkTsCheckerWebpackPlugin()
     ]
    };

    动机

    已经有了类似的解决方案- awesome-typescript-loader ,你可以将CheckerPlugin和委托检查程序添加到单独的进程中。awesome-typescript-loader的问题在于,在增量构建(~20s和~3s)时,它比ts-loader慢很多,其次,我们使用tslint,并希望在单独的进程中运行这个类型的检查器,这就是我们创建这个插件的原因,为了提供更好的性能,插件在编译之间重用抽象语法树,并与tslint共享这些树,可以用多进程模式进行扩展,以最大程度地利用CPU 。

    模块解析

    这个插件使用的是typescript,而不是webpack的模块解析,这一点非常重要。这意味着你必须正确设置tsconfig.json ,例如,如果在tsconfig.json中设置files: ['./src/someFile.ts'],这个插件将只检查someFile.ts的语义错误,这是因为性能,这个插件的目标是尽可能快,使用typescript的模块解析,我们不必等待webpack编译文件(在编译期间遍历依赖关系图)-我们从一开始就有完整的文件列表。

    要调试typeScript解析模块,可以使用tsc --traceResolution命令。

    TSLint

    如果已安装tslint,则可以通过设置tslint: truetslint:'./path/to/tslint.json'来启用它,我们建议将defaultSeverity改为tslint.json文件中的"warning" ,它有助于区分lints和typescript的诊断。

    选项

    • tsconfig string :tsconfig.json文件的路径,默认值: path.resolve(compiler.options.context, './tsconfig.json')

    • tslint string |true :tslint.json文件或true的路径,如果true,则使用 path.resolve(compiler.options.context, './tslint.json') 默认值:undefined

    • 监视string |string[] :服务要监视的目录或文件,无必要,但是提高了性能(减少fs.stat调用的次数)。

    • 异步boolean :true可以阻塞web的发出,以等待类型检查器/,并且添加错误编译错误,We recommend to set this to false in projects where type checking is faster than webpack's build - it's better for integration with other plugins. Another scenario where you might want to set this to false is if you use the 覆盖functionality of webpack-dev-server` 。

    • ignoreDiagnostics number[] :要忽略的typeScript诊断代码列表。

    • ignoreLints string[] :要忽略的tslint规则名称的列表。

    • colors boolean :如果为false,则为记录器消息中的disablescolors ,默认值:true

    • logger object :logger 实例,它应该是实现方法的对象: errorwarninfo,默认值:console

    • 格式化程序 'default' | 'codeframe' | ((message: NormalizedMessage, useColors: boolean) => string) :诊断和lints的格式化程序,默认情况下使用default格式化程序,你还可以将自己的格式化程序作为函数(有关api引用,请参阅src/NormalizedMessage.jssrc/formatter/)传递。

    • formatterOptions object :传递给格式化程序的选项(当前只有codeframe -请参见可用选项 )

    • 无提示boolean :如果true,则将不使用记录器,默认值:false

    • checkSyntacticErrors boolean :如果你在happyPackMode中使用加载器和happyPack线程加载程序,这个选项很有用,它将确保插件检查语法错误(例如 const array = [{} {}]; )和语义错误(例如 const x: number = '1'; )默认情况下,插件只检查语义错误,这是因为当transpileOnly加载程序在模式下使用时,ts加载程序仍然会报告语法错误,在happyPackMode中使用时,它不,默认值:false

    • memoryLimit number :服务进程的内存限制(以MB为单位),如果服务退出时出现分配失败错误,则增加此编号,默认值:2048

    • 工人number :你可以将类型检查分为几个工人,以加速增量构建,小心-如果你不想增加构建时间,应该为系统保留免费1核心内核,第二件事- node不会在员工之间共享内存-记住内存使用会增加,在某些情况下,增加员工数量可以增加检查时间,默认值:ForkTsCheckerWebpackPlugin.ONE_CPU

    • vue boolean :如果true,linter和编译器将处理VueJs single-file-component (vue )文件,有关如何正确设置项目的信息,请进一步查看vue节

    预计算consts :

    • ForkTsCheckerWebpackPlugin.ONE_CPU -总是使用一个CPU
    • ForkTsCheckerWebpackPlugin.ALL_CPUS -始终使用所有CPU (将增加生成时间)
    • ForkTsCheckerWebpackPlugin.ONE_CPU_FREE -只保留一个CPU (可能会增加构建时间)
    • ForkTsCheckerWebpackPlugin.TWO_CPUS_FREE -推荐-保留两个CPU空闲(一个用于构建,一个用于系统),
    讨论
    Fansisi profile image