下雪了，在家闲着，不如写一篇npm包发布。简单的npm包发布教程网上有很多，我就不记录了。这里记录发布了一个复杂的npm包，complex指的是复杂的构建环境。整个项目使用rollup构建，会引入babel翻译ES6，使用Eslint规范代码的书写风格，最后通过terser压缩发布代码。同时发布umd和es格式的版本，对外调用。完整的目录结构如下：以下是整个过程的记录1.初始化项目yarninit-y初始化完成后，修改package.json内容，如name（项目名称），description（项目描述）等信息。2.安装rollupyarnaddrollup@1.0.0--dev3.创建配置文件rollup.config.jsexportdefault{input:'src/index.js',output:{file:'index.common.js',format:'umd',name:'index'}}4.安装babelyarnaddrollup-plugin-babel@4.2.0@babel/core@7.2.2@babel/preset-env@7.2.3--dev5.配置babel1,创建配置文件.babelrc{"presets":[["@babel/preset-env",{"modules":false}]]}2.与rollup集成，在rollup.config中配置pluginsimportbabelfrom'。jsrollup-plugin-babel'exportdefault{input:'src/index.js',output:{file:'index.common.js',format:'umd',name:'index'},plugins:[babel({exclude:'node_modules/**',runtimeHelpers:true})]}六、安装eslintyarnaddeslint@5.11.1七、配置eslint1，生成eslint配置.\node_modules\.bin\eslint--init2，集成rollup，在rollup.config.js中配置pluginsimportbabelfrom'rollup-plugin-babel'import{eslint}from'rollup-plugin-eslint'exportdefault{input:'src/index.js',output:{file:'印度x.common.js'，格式：'umd'，名称：'index'}，插件：[eslint({include:['src/**'],exclude:['node_modules/**']}),babel({exclude:'node_modules/**',runtimeHelpers:true})]}八、commonjs包含yarnaddrollup-plugin-commonjs@9.2.0rollup-plugin-node-resolve@4.0.0--dev九、与rollup集成，在rollup.config.js中配置pluginsimportbabelfrom'rollup-plugin-babel'import{eslint}from'rollup-plugin-eslint'importresolvefrom'rollup-plugin-node-resolve'importcommonjsfrom'rollup-plugin-commonjs'exportdefault{input:'src/index.js',output:{file:'index.common.js',format:'umd',name:'index'},plugins:[resolve({jsnext:true,main:true,browser:true}),commonjs(),eslint({include:['src/**'],exclude:['node_modules/**']}),babel({exclude:'node_modules/**',runtimeHelpers:true})]}十、安装terser,使用来压缩代码yarnaddrollup-plugin-terser@4.0.0--dev11.与rollup集成，在rollup.config.jsimport中配置插件node-resolve'从'rollup-plugin-commonjs'导入commonjs'从'rollup-plugin-terser'导入{terser}导出默认{输入：'src/index.js'，输出：{文件：'index.common.js'，格式：'umd'，名称：'index'}，插件：[resolve({jsnext:true,main:true,browser:true}),commonjs(),eslint({include:['src/**'],exclude:['node_modules/**']}),babel({exclude:'node_modules/**',runtimeHelpers:true}),terser()]}12.引入环境变量和实践区别打包1.安装插件yarnaddrollup-plugin-replace@2.1.0--dev2，配置pluginsimportbabelfrom'rollup-plugin-babel'import{eslint}from'rollup-plugin-eslint'importresolvefrom'rollup-plugin-node-解决'从'rollup-plugin-commonjs'导入commonjs'从'rollup-plug'导入{terser}in-terser'importreplacefrom'rollup-plugin-replace'exportdefault{输入：'src/index.js'，输出：{文件：'index.common.js'，格式：'umd'，名称：'index'},插件:[resolve({jsnext:true,main:true,browser:true}),commonjs(),eslint({include:['src/**'],exclude:['node_modules/**']}),babel({exclude:'node_modules/**',runtimeHelpers:true}),replace({exclude:'node_modules/**',ENVIRONMENT:JSON.stringify(process.env.NODE_ENV)}),简洁()]}十三、参与数字化配置，加入版本说明，最终配置如下eslint'从'rollup-plugin-babel'导入babel从'rollup-plugin-replace'导入替换'从'rollup-plugin-terser'导入{terser}constpJson=require（'./package.json'）constversion=pJson.versionconstlicense=pJson.licenseconstbanner='/*!\n'+`*${pJson.name}v${version}\n`+`*(c)2018-${newDate().getFullYear()}\n`+`*在$下发布{license}许可。\n`+'*/'constENV=process.env.NODE_ENV.trim()constpaths={input:{root:'src/index.js'},output:{root:'dist/'}}constfileNames={development:'index.common.js',production:'index.common.js',production6:'index.esm.js'}constfileName=fileNames[ENV]exportdefault{输入:`${paths.input.root}`，输出：{文件：`${paths.output.root}${fileName}`，格式：ENV==='production6'?'es':'umd',name:'index',banner},plugins:[resolve({jsnext:true,main:true,browser:true}),commonjs(),eslint({include:['src/**'],exclude:['node_modules/**']}),babel({exclude:'node_modules/**',runtimeHelpers:true}),replace({exclude:'node_modules/**',ENVIRONMENT:JSON.stringify(process.env.NODE_ENV)}),ENV&&ENV.includes('production')&&terser({output:{comments:/^!/}})]}3.业务代码编写在src/index.js中编写具体业务代码4.打包添加package.json中的“脚本”：{“dev”：“setNODE_ENV=development&&rollup-c”，“build”：“yarnrunbuildcjs&&yarnrunbuildesm”，“buildcjs”：“setNODE_ENV=production&&rollup-c","buildesm":"setNODE_ENV=production6&&rollup-c"}运行命令yarnrunbuild5.发布npmpublish前记得先注册账号，记得修改package.json中的private字段为false"private":false后记：rollup-plugin-uglify@6.0.0在rollup@1.0.0时有警告，文中原来的rollup-plugin-uglify被rollup-plugin-terser替代
