用TypeScript开发手势库 - (2)tsconfig.json & rollup.config.js & npx

any-touch 一个手势库

往期目录

用 TypeScript 开发手势库 - (1)web开发常用手势有哪些?

用 TypeScript 开发手势库 - (3)统一化Mouse和Touch事件

标题有点长

今天的标题有点长, 但不难, 讲的都是工具配置和使用, 就3个知识点: 1. 如何配置tsconfig.json 2. 如何配置rollup.config.js 3. 使用npx运行项目所在node_modules的命令

rollup.config.js

: 为了阅读体验, 我把为什么不用webpack放在的本文的最后. 我对代码做了注释(如有不懂请留言):

// 为了让rollup识别commonjs类型的包,默认只支持导入ES6
import commonjs from 'rollup-plugin-commonjs';
// 为了支持import xx from 'xxx'
import nodeResolve from 'rollup-plugin-node-resolve';
// ts转js的编译器
import typescript from 'rollup-plugin-typescript';
// 支持加载json文件
import json from 'rollup-plugin-json';
// 支持字符串替换, 比如动态读取package.json的version到代码
import replace from 'rollup-plugin-replace';
// 读取package.json
import pkg from './package.json';
// 代码生成sourcemaps
import sourceMaps from 'rollup-plugin-sourcemaps'// 代码头
const banner =`/*!* AnyTouch.js v${pkg.version}* (c) 2018-${new Date().getFullYear()} Russell* https://github.com/any86/any-touch* Released under the MIT License.*/`export default {input: './src/main.ts',plugins: [// 代码中的__VERSION__字符串会被package.json中的version字段所替代replace({__VERSION__: pkg.version}),typescript({exclude: 'node_modules/**',typescript: require('typescript'),}),json(),nodeResolve({jsnext: true,main: true}),commonjs({include: 'node_modules/**'}),sourceMaps()],output: [{format: 'cjs',// 生成的文件名和路径// package.json的main字段, 也就是模块的入口文件file: pkg.main, banner,sourcemap: true},{format: 'es',// rollup和webpack识别的入口文件, 如果没有该字段, 那么会去读取main字段file: pkg.module,banner,sourcemap: true},{format: 'umd',name: 'AnyTouch',file: pkg.browser,banner,sourcemap: true}]
};

源码

tsconfig.js

{"compilerOptions": {// 允许未执行的代码不报错"allowUnreachableCode": true,// 严格模式, 强烈建议开启"strict": true,// 支持别名导入:// import * as React from "react""esModuleInterop": true,// 目标js的版本"target": "es5",// 目标代码的模块结构版本"module": "es6",// 在表达式和声明上有隐含的 any类型时报错。"noImplicitAny": true,// 删除注释"removeComments": true,// 保留 const和 enum声明"preserveConstEnums": false,// 生成sourceMap    "sourceMap": true,// 目标文件所在路径"outDir": "./lib",// 编译过程中需要引入的库文件的列表"lib": ["dom","es7"],// 额外支持解构/forof等功能"downlevelIteration": true,// 是否生成声明文件"declaration": true,// 声明文件路径"declarationDir": "./lib",// 此处设置为node,才能解析import xx from 'xx'"moduleResolution": "node"},// 入口文件"include": ["src/main.ts"]
}

源码

运行命令

好了文件配置好了, 我们可以把我们的ts代码转成js, 就差在package.json中加一条命令了:

// package.json
{..."script": {"build": "tsc && rollup -c"}...
}

这里tsc是为了在lib目录生产声明文件, rollup -c会生成umd/es/commonjs三种模块的代码, "c"是config缩写, 代表读取rollup.config.js

源码

彩蛋

其实npx并不是本文主角,但是如果你的tsc不是全局安装的, 那么你在命令行运行tsc会提示找不到他, 但是如果你用npx tsc那么他就会运行你本地的node_modules中的tsc命令, 惊不惊喜.

补充说明

如果你了解webpack和rollup的不同下面内容可以跳过.

为什么不用webpack

一说到打包工具大家想到的肯定是webpack, 他有各种loader, 当然也有ts-loader, 但是他生成代码有很多是非我们所写的逻辑代码, 比如一些他自有的模块加载功能:

rollup更适合开发插件?

是的, rollup生成代码只是把我们的代码转码成目标js并无其他, 同使如果需要,他可以同时帮我们生成支持umd/commonjs/es的js代码, vue / react /angular都在用他作为打包工具.

vue

react

angular

为什么还没到写代码?

2期了都还没有讲到代码, 估计大家都着急, 莫着急,下一期开始咱们就讲代码了, 平时上班工作实在是忙, 都是晚上更新文章, 这个周末我会多写点, 如果实在迫不及待也可以先看看我写好的代码预热下:

https://github.com/any86/any-touch

webstorm 不识别.config文件_用TypeScript开发手势库 - (2)tsconfigamp; rollup.configamp;npx...相关推荐

  1. webstorm 不识别.config文件_webstorm好用的十款插件

    1,CodeGlance 代码的缩略图,VScode,sublime编辑器都有这个功能 2,Rainbow Brackets 彩虹颜色的括号 看着很舒服 敲代码效率变高 https://plugins ...

  2. import引入json文件_关于TypeScript中import JSON的正确姿势详解

    前言 Typescript是微软内部出品的,用actionscript的语法在写js的一门新语言,最近 TypeScript 中毒,想想我一个弱类型出身的人,怎么就喜欢上了类型约束--当然这不是重点, ...

  3. config文件_您自己的MicroProfile Config来源

    config文件 MicroProfile配置,即一部分MicroProfile规格,是Java Enterprise和微服务配置的标准化. 开箱即用(即,对于规范定义的所有实现都是强制性的)有3种方 ...

  4. arduino温湿度计库文件_用ARDUINO开发板自制温湿度计(含WEMOS D1开发板环境安装)...

    ARDUINO从入门到创客带师第四弹 自制温湿度计(翻车) 咱想起以前实验室的墙上挂着的介绍说过法拉第之所谓伟大的原因是他不止把成功的经历写在科学日记里,也把翻车失败的经历写进去,因此咱对于咱翻车的经 ...

  5. fs react 使用 保存文件_入门TypeScript编写React

    使用 create-react-app 开启 TypeScript Create React App 是一个官方支持的创建 React 单页应用程序的CLI,它提供了一个零配置的现代构建设置.当你使用 ...

  6. python的ide环境中创建文件_使用Python开发环境Wing IDE设立项目注意事项

    使用Wing IDE的第一步是建立一个项目文件,这样Wing IDE就可以找到并分析源代码,存储工作. Wing IDE会自动以默认的项目进行启动.在本教程中用户也可以使用这个默认项目进行示例操作.如 ...

  7. 开发物体识别桌、_科研人员开发突破性的技术,允许盲人识别形状和物体

    一项令人难以置信的新技术正在让失明人士有能力识别形状和物体,而这些形状和物体都是在他们的大脑上"画出来"的.一篇描述该技术的研究论文刚刚发表在<细胞>杂志上,正如Sci ...

  8. python读取raw数据文件_【Python】OGR库(1):读取矢量数据

    OGR库是一个非常流行的处理地理空间矢量数据的开源库.它可以读取丰富的数据格式,允许用户进行几何处理.属性表操作.数据分析,是个非常强大的开源GIS库.目前OGR已集成在GDAL库中,可以说是GIS的 ...

  9. python 打开pdf文件_用Python开发的简易PDF阅读器

    主要的库 PyQt5:UI的开发 fitz:与pdf文件相关的操作几乎都用的是它 这是一个用Python开发的pdf阅读器,是软A项目的附加软件(虽然现在主程序几乎可以说还没有开始:joy:,只完成了 ...

最新文章

  1. bitset优化+滚动优化dp ----- 2021牛客多校第8场 F Robot
  2. Redis实战之限制操作频率
  3. 【语法解释】init
  4. git 改了一段代码不想要了_初识Git
  5. 《位运算技巧以及Leetcode的一些位运算题目》
  6. pwm波程序如何实现_【优秀成果】如何做好算法与程序实现教学的知识储备
  7. Python3 异常: name ‘basestring‘ is not defined
  8. python接口自动化(四十四)- 公共模块configparser读取ini数据库、邮箱配置文件(单独说明)
  9. jpype,jpython调用jar包中jdk的问题.
  10. 计算机大会 话筒 视频,在视频会议中如何使用全向麦克风
  11. 用Pycharm创建一个职位管理系统
  12. Hinton最新演讲:前向-前向神经网络训练算法
  13. 操作系统-逻辑地址转换为物理地址Java实现
  14. Ericsson open-sources OpenWebRTC and Bowser for iOS; Intel releases IoT developer kit
  15. MySql数据库之视图(定义视图、查询视图、更新视图、视图的作用)
  16. 基于 SpringBoot+Vue 的开源数据可视化分析工具
  17. OSChina 周五乱弹 —— 性感海星在线翘臀
  18. objc_msgSend流程分析之缓存查找
  19. 共读《redis设计与实现》-单机(一)
  20. CTO跟我说,年薪40W并不难

热门文章

  1. 【java】java AsyncHttpClient使用
  2. Spark代码生成技术之现象CodeGenerator
  3. Kafka : WARN Error while fetching metadata with correlation id xx : {=UNKNOWN_TOPIC_OR_PARTITION}
  4. 【Mac】mac移动查找的图片到某个目录
  5. 【Flink】Flink 多并行度下的 watermark触发机制
  6. Spring : @Qualifier 注解
  7. 06-R环境中的工作空间(workspace)概念
  8. 眨眼检测计算机不精确,基于OpenCV和Python错误的眨眼检测
  9. python 如何匹配一撇字符_python,yaml如何解析包含撇号的字符串
  10. Redis如何高效实现点赞、取消点赞功能