any-touch一个手势库PastCatalogue使用TypeScript开发手势库——（一）Web开发中常用的手势有哪些？使用TypeScript开发手势库-（三）不到30行统一Mouse和Touch事件，使用any-touch实现抽屉的标题有点长今天的标题有点长，但是不难。都是工具的配置和使用，就3个知识点：如何配置tsconfig.json如何配置rollup.config.js使用npx运行项目所在node_modules的命令rollup.config.js注：为了方便阅读经验，我把为什么不使用webpack放在本文末尾。我对代码进行了评论（有不懂的请留言）//为了让rollup识别commonjs类型的包，默认OnlyimportES6importcommonjsfrom'rollup-plugin-commonjs';//为了支持importxxfrom'xxx'importnodeResolvefrom'rollup-plugin-node-resolve';//ts到js编译器importtypescriptfrom'rollup-plugin-typescript';//支持加载json文件importjsonfrom'rollup-plugin-json';//支持字符串替换，比如动态读取package.json的版本到代码importreplacefrom'rollup-plugin-replace';//读取package.jsonimportpkgfrom'./package.json';//代码生成sourcemapsimportsourceMapsfrom'rollup-plugin-sourcemaps'//代码头constbanner=`/*!*AnyTouch.jsv${pkg.version}*(c)2018-${newDate().getFullYear()}Russell*https://github.com/383514580/any-touch*根据MIT许可证发布。*/`导出default{input:'./src/main.ts',plugins:[//代码中的__VERSION__字符串会被package.json中的版本字段替换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识别的入口文件，如果没有该字段，则读取主字段file:pkg.module,banner,sourcemap:true},{format：'umd'，名称：'AnyTouch'，文件：pkg.browser，横幅，来源地图：真}]}；sourcecodetsconfig.js{"compilerOptions":{//允许未执行的代码不报错"allowUnreachableCode":true,//严格模式，强烈建议开启"strict":true,//支持别名import://import*asReactfrom"react""esModuleInterop":true,//目标js版本"target":"es5",//目标代码模块结构版本"module":"es6",//报错在隐含任何类型的表达式和声明上。"noImplicitAny":true,//删除注释"removeComments":true,//保留const和enum声明"preserveConstEnums":false,//生成sourceMap"sourceMap":true,//目标文件所在路径"outDir":"./lib",//编译时需要导入的库文件列表"lib":["dom","es7"],//额外支持解构/forof等功能"downlevelIteration":true,//是否生成声明文件"declaration":true,//声明文件路径"declarationDir":"./lib",//此处设置为node解析importxxfrom'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会提示找不到他，但是如果你使用npxtsc那么他将在您本地的node_modules中运行tsc命令，这并不奇怪。如果了解webpack和rollup的区别，后面的内容可以跳过。为什么不说webpack说起打包工具，大家都会想到webpack。它有各种加载器，当然还有ts-loader，但是它生成的代码有很多我们写的逻辑代码，比如它自己的一些模块加载函数：rollup更适合开发插件？是的，rollup生成的代码只是将我们的代码转换成targetjs而已，没有别的。如果有需要，它还可以帮我们生成支持umd/commonjs/es的js代码，vue/react/Angular都在用它作为打包工具。为什么vuereactangular还没有写代码？这是两个问题，我们还没有讨论代码。我想每个人都很着急。不用担心。下期再说代码。忙，晚上更新文章，周末再写，实在等不及的话，可以看看我写的预热代码：https://github.com/383514580/any-touch
