从1到完美，写一个js库，node库，前端组件库项目工程，前端讲了很多架构、前端搭建等技术方面，这次我要讲的是如何写出一个完美的第三方库。1、选择合适的规范编写代码。js模块化的开发一般有这样一个过程：iife=>commonjs/amd=>es6，而在这些规范中：iife：js原生支持，但一般不会直接使用这个规范是用来写代码的amd:的requirejs定义的加载规范，但是随着构建工具的出现，一般不用来写代码了js运行环境不支持，包括浏览器、node（包括electron、nw.js）、ReactNative等原生不支持任何规范的运行环境程序（如browser、ReactNative），推荐使用es6规范编写代码，然后工具转换成可以运行的原生js。对于node程序，可以直接用commonjs规范写，也可以用es6规范写，然后用工具转成commonjs规范。所以，一般情况下，可以使用es6规范写代码，然后用工具转换成其他规范，es6代码可以使用tree-shaking功能。参考：IIFE(Immediately-invokedfunctionexpression)requirejs,electron,nw.js,react-nativeTreeshaking2。选择合适的构建工具对于前端项目，因为有静态资源（如图片、字体等）加载和按需加载的需求，所以使用webpack是唯一的选择，但是对于第三方库，有实际上是更好的选择：rollup。请参阅Webpack的替代方案：rollup以了解webpack和rollup的区别和优势。webpack打包成第三方库时，只能导出amd/commonjs/umd，而rollup可以导出amd/commonjs/umd/es6。使用rollup导出es6模块，在使用该库的项目中构建时可以使用tree-shaking。对于有样式文件（css、less、scss）和静态资源文件（图片、字体）的前端组件，可以使用rollup-plugin-postcss插件配合rollup处理样式文件和静态资源文件。参考：webpack、rollup、rollup-plugin-postcsswebpack之外的另一种选择：rollupUMD(UniversalModuleDefinition)tree-shakingwebpack如何优雅地使用tree-shaking（tree-shaking优化）3.确定通用库目录的目录结构project:|--/#项目根目录|--src/#源代码目录|--lib/(dist/)#发布文件目录|--test/#测试文件目录|--...#Moreothers如果目录是多包项目（一个项目有多个npm包，比如babel）：|--/#项目根目录|--packages/#packages目录|--pkg1/#package1目录|--src/#源代码目录|--lib/(dist/)#发布文件目录|--pkg2/#package2目录|--src/#源代码目录|--lib/(dist/)#发布文件目录|--。..multi-package项目后面会详细说明。4.搭建好脚手架无论是应用项目还是第三方库项目，都需要搭建一个好的脚手架来帮助我们更好的编写代码和构建项目。您可以查看Buildyourownfront-endscaffolding以获得一些基本的脚手架文件和工具。例如：.editorconfig：使用这个文件统一不同编辑器的一些配置，比如tab为2个空格，自动插入空行，去除行尾空格等。http://editorconfig.orgeslint,stylelint,prettier：规范代码Style，优化代码格式等。husky，lint-staged：git提交前review代码，否则不提交。travis.yml：一个很棒的持续集成服务，https://www.travis-ci.org/详细的文档、工具和配置，参考搭建自己的前端脚手架。另外，对于开源的第三方库，还可以有：LICENSE：协议文件CONTRIBUTING.md：项目代码参与者codecov.yml：测试覆盖率配置文件。github：github上的一些自定义配置，如issue模板，pr模板等/docs：文档目录/examples：使用示例目录/scripts：脚本目录加rollup配置文件rollup.config.js：rollup.config.js如果它是一个node程序，将es6规范转换成commonjs规范：exportdefault{input:'src/index.js',output:{file:'lib/index.js',format:'cjs',},};如果是前端库，需要从es6+转es5，导出不同规格的文件（es6/commonjs/amd/umd）：importbabelfrom'rollup-plugin-babel';从“rollup-plugin-postcss”导入postcss；导出默认值[{文件：'lib/cjs.js'，格式：'cjs'，}，{文件：'lib/m.js'，格式：'esm'，}，{文件：'lib/umd.js',格式:'umd',名称:'名称',},{文件:'lib/amd.js',格式:'amd',},].map(output=>({输入:'src/index.js',output,plugins:[babel({presets:['@babel/preset-env'],}),postcss({extract:!0}),//构建样式文件时需要这个插件],}));.gitignore一般来说，我们不想把release文件放到git的版本控制中，而只是发布到仓库，所以：#.gitignore.DS_Storenode_modulesbower_components/coverage*.log.idea.vscode.eslintcachepackage-lock.json/lib#排除lib/packages/*/lib#多包项目package.json{...#nodeproject"main":"lib/index.js",#前端项目"main":"lib/cjs.js",#commonjs规范文件"module":"lib/m.js",#es6规范文件"umd:main":"lib/umd.js",#umd规范文件"amd:main":"lib/amd.js",#amd规范文件"files":[#发布时只发布lib目录下的文件"lib"],"scripts":{..."build":"rollup-c",#buildreleasefile"prepublishOnly":"npmrunbuild",#npmrunbuildbeforenpmpublish"pretest":"npmrunbuild",#beforenpmruntest首先npmrunbuild},...}在实际项目中，构建工具（如webpack）会先在这个package中找到module字段对应的es6规范文件，并使用tree-shaking；如果不存在，则在主字段中找到对应的文件一些构建工具也可能使用amd规范文件和umd规范文件。参考：搭建自己的前端脚手架五、搭建多包项目如果一个项目很大，需要分成多个npm包进行管理，但是这些包还是在一个项目中，而且这些包可能有相互依存，这时候管理和发展起来就比较困难了。为了方便多包项目的管理，lerna应运而生。babel、create-react-app、jest、lila等都使用lerna来管理多个包。英文不好的童鞋，可以参考使用lerna管理大型前端项目了解lerna的一些基本用法。lerna通用目录文件结构my-lerna-repo/package.jsonpackages/package-1/package.jsonpackage-2/package.jsoninstalllerna,initializeproject#installnpmi-glerna#initializegitinitlerna-repo&&cdlerna-repolernainit#初始化目录和文件lerna-repo/packages/package.jsonlerna.json配置文件lerna.json{"version":"0.5.2",#当前版本号"packages":["packages/*"],"command":{"publish":{#发布配置"ignoreChanges":[#哪些文件更改不会触发新版本"*.md","*.json","*.txt","test/**","example/**","package.json"]},"bootstrap":{"npmClient":"cnpm"#lernabootstrap时使用哪个npm客户端}},"npmClientArgs":[#npmclientruntimeparameter"--no-package-lock"]}常用命令lernapublish:发布所有更新的包在默认的固定模式（Fixedmode）下，这个命令会检查包目录下载哪些包文件更新了（除了command.publish.ignoreChangesinlerna.json)，然后更新lerna.json中的version和更新包中package.json的version字段为新的版本号，最后把这些放在那里更新后的包发布到远程仓库。lernabootstrap：开始建立包之间的node_modules链接。该命令会根据每个包下的package.json中的dependencies和devDependencies配置，使用symlink在每个包的node_modules下建立引用关系。这样就解决了相互依赖，无法协调调试的问题。lernachanged：查看更新了哪些包，可以发布新版本了lerna使用lerna管理大型前端项目6.示例单包node项目可以参考我的项目：scclean单包前端项目可以参考我的项目：see-fetch多包项目可以参考我的项目：lila关注更多博客，查看https://github.com/senntyou/blogs作者：沈育之(@senntyou)版权声明：免费转载-非商业-非衍生-保留署名（CreativeCommons3.0license)
