*需要npm，我的理解是npm是为了解决：代码重用；因为基于现有成熟代码快速开发新的应用，可以大大提高开发效率，“不重复造轮子”；为什么要创建自己的npm包？可以将平时项目中积累的公共方法封装发布到自己的npm包中，方便我们在项目中复用；*创建一个简单的npm包：文件结构目录：js-utils--src----base.js----validate.js--index.jsbase.js文件：constBaseMethods={/***获取数据类型*@paramparams*@returns'String','Number'...*/getTypeOf:(params)=>{lettype=Object.prototype.toString.call(params)returntype.match(/\[\w+\W(\w+)\]$/)[1]},/***array,characterStringdeduplication*@paramArray,String*@returns*/unique:function(params){if(this.getTypeOf(params)==='Array'){return[...newSet(arr)]}if(this.getTypeOf(params)==='String'){letobj={}letstr=''for(让i=0,len=params.length;i{letreg=/^[1][3,4,5,7,8][0-9]{9}$/returnreg.test(mobile)}}导出默认Validateindex.js文件：从导入BaseMethods'./src/base'importValidatefrom'./src/validate'exportdefault{BaseMethods,Validate}执行文件夹js-utils中的命令：npminit用于初始化并生成package.json，用于NodeJS约定存放项目信息和配置信息的文件*上传并发布包到npm1，登录npm官网（https://www.npmjs.com/），注册一个npm账号（然后注册之后，去您的邮箱并按照提示进行操作并通过验证）2、在js-utils文件夹下执行登录命令：npmlogin，输入您在npm官网的账号、密码和邮箱注意：如果发现报错，需要把淘宝镜像去掉，恢复到官方镜像。执行命令：npmconfigdeleteregistry或直接切换镜像：settaobaox,宝藏：npmconfigsetregistryhttps://registry.npm.taobao.org不想用他们家的就改回原一个：npmconfigsetregistryhttps://registry.npmjs.org恢复为官方镜像，npmlogin登录成功；如下图所示：登录成功后，执行命令：npmpublish发布并上传你的包错了，用的是js-utils包名，把package.json文件中的"name":"js-utils-mvp"改一下，再次执行npmpublish成功，如下图：*Usenpmpackage:createa项目中要使用的新测试文件对于你已经发布的包，执行命令：npminstalljs-utils-mvp，如下图所示：不需要按照--begin新建index.html的操作测试文件下的页面；通过下面的require或者import方式引入，发现全部报错：（newindex.html可以不用跟着，只是为了引入问题）原因：1.require()不是JavaScript标准的一部分，浏览器不提供开箱即用的支持。它是一个node.js模块系统。2.import语句不能在模块外使用，因为Module的加载实现了es6语法，不需要按照操作--end总结一下，发现创建的npm包js-utils-mvp还是有兼容性的问题;如何解决浏览器不支持ES6特性；1.Babel是一个广泛使用的转码器，Babel可以将ES6代码完美转成ES5代码；2、webpack是现代JavaScript应用的_static模块打包工具，可以借助babel-loader帮助我们将ES6代码转换成ES5代码；_*项目引入webpack打包工具1，部分安装，执行命令：npminstallwebpack@4.43.0webpack-cli-D注意：这里有个坑。如果我的webpack没有锁定安装版本，默认会安装到5以上的版本，导致打包后的文件为空。没有报错。所以锁定版本2，在js-utils文件下新建webpack.config.js文件constpath=require('path')module.exports={//入口文件entry:'./index.js',//输出配置输出：{path:path.resolve(__dirname,'build'),filename:'jsUtils.js'},module:{rules:[{test:/\.js$/,exclude:/node_modules/,use:{loader:"babel-loader",options:{presets:['@babel/preset-env']}}}]}}3.babel-loader在webpack中配置（参考https://www.babeljs.cn/setup#installation)执行命令：npminstall--save-devbabel-loader@babel/corebabel-loader是webpack和babel的沟通桥梁，不会做es6转es5的工作，这部分ofthework需要使用@babel/preset-env，所以需要执行命令：npminstall@babel/preset-env--save-dev4，在package.json中添加"scripts":{"build":"npxwebpack--configwebpack.config.js"},npxwebpack--configwebpack.config.js//指定webpack使用webpack.config.js文件作为配置文件并执行5、执行打包命令：npmrunbuild；将jsUtils.js文件打包到生成的build文件下使用6.将package.json中的main字段"main":"index.js"改为"main":"/build/jsUtils.js"因为当我们导入一个不同环境下的npm包，加载npm包的哪个文件？答案是：主域指定的文件（这是我们通过webpack和babel打包处理后的文件）以上就完成了一个简单的npm包的制作和发布，并再次更新上传到npm注意：记得每次修改package.json中的版本号更新和上传。例如："version":"1.0.0",改为"version":"1.0.1",再重复上图更新release指令即可成功*项目中参考js-utils-mvp执行命令：npmijs-utils-mvp-DimportjsUtilsfrom'js-utils-mvp'console.log(jsUtils.BaseMethods.getTypeOf(88))//Output:Number*AddREADME.mdstatementdocumentation#js-utils-mvpbuild-外部引用资源包src-资源文件├──base.js-基本方法│├──getTypeOf-获取数据类型│└──unique-数组、字符串去重├──validate.js-验证方法│├──mobileCheck-手机号码验证执行命令：npmijs-utils-mvp-DimportjsUtilsfrom'js-utils-mvp'console.log(jsUtils.BaseMethods.getTypeOf(88))//输出：Numberconsole.log(jsUtils.Validate.mobileCheck(15944448888))//输出：true
