开发和维护我的开源项目之npm发布

开发和维护我的开源项目之npm发布

项目的引入

开始编码以前，项目如何被引入使用也须要考虑清楚。我的以为使用npm包的方式引入是最佳选择：项目彻底没有bug的可能性很是小，引入的打包后的结果基本没法调试，只能提issues或者另开环境，流程十分麻烦也不方便bug回溯；让使用者可以直接使用源码进行调试，就显得很酸爽了。

另外若是项目包含了不少的输出，实际应用可能只须要其中部分输出，引入所有的代码会带来冗余（如：Lodash）。怎么按需引入，下文pakeage.json会讲到。

此外webpack提供了UMD(Universal Module Definition)的配置：

module.exports = {
  //...
  output: {
    library: 'MyLibrary',
    libraryTarget: 'umd'
  }
};

打包的输出：

(function webpackUniversalModuleDefinition(root, factory) {
  if(typeof exports === 'object' && typeof module === 'object')
    module.exports = factory();
  else if(typeof define === 'function' && define.amd)
    define([], factory);
  else if(typeof exports === 'object')
    exports['MyLibrary'] = factory();
  else
    root['MyLibrary'] = factory();
})(typeof self !== 'undefined' ? self : this, function() {
  return _entry_return_; // 此模块返回值，是入口 chunk 返回的值
});

这样项目的引入方式基本能知足全部状况了。详细webpack配置点我。

npm发布

发布流程：

1. npm init //初始化项目，名字版本等信息，后面能够改
2. 注册npm账号
3. npm login
4. npm publish
5. npm unpublish 官方不推荐使用。

pagekage.json

main

模块的入口，例如：模块名字foo，reuqire('foo')，引入的文件路径（相对于当前包的根目录）由main字段定义，打包输出的结果为dist/index.js，配置即应该是：

{
 "main":"dist/index.js"
}

peerDependencies

表示预记宿主会安装的依赖。例如，安装babel-loader时，提示：

又好比开发一个vue的组件，已知宿主会必定会安装：

"peerDependencies": {
    "vue": "^2.5.0"
  }

module（非标准字段）

该配置指向打包前的源码入口。
wepack在构建项目的时候，若是发现了这个字段，会首先使用这个字段指向的文件。
除了源码更好调试外，还有一个优势Tree Shaking优化即按需引入。聊聊 package.json 文件中的 module 字段

{
 "main":"src/index.js" //源文件目录为src
}

其余字段详细介绍点我看官方文档
package.json 非官方字段集合

其余

.npmignore

有些文件默认不会发布，有些文件是强制发布，具体请看官方文档，保证明时性。

问题1

若是npm login报错以下：

npm ERR! code E409
npm ERR! Conflict

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\Louis\AppData\Roaming\npm-cache\_logs\2019-01-23T06_55_37_738Z-debug.log

有多是你当前使用的是淘宝的镜像，尝试

npm config set registry https://registry.npmjs.org/

再进行npm login

总结

须要构建的项目，采用npm来使用是开发的不二之选。