angular-npm-module-seed, 在NPM中开发 Angular 模块的起点及其发布

分享于 

6分钟阅读

GitHub

  繁體 雙語
Starting point for developing Angular modules and publishing them on NPM.
  • 源代码名称:angular-npm-module-seed
  • 源代码网址:http://www.github.com/davguij/angular-npm-module-seed
  • angular-npm-module-seed源代码文档
  • angular-npm-module-seed源代码下载
  • Git URL:
    git://www.github.com/davguij/angular-npm-module-seed.git
    Git Clone代码到本地:
    git clone http://www.github.com/davguij/angular-npm-module-seed
    Subversion代码到本地:
    $ svn co --depth empty http://www.github.com/davguij/angular-npm-module-seed
    Checked out revision 1.
    $ cd repo
    $ svn up trunk
    
    Angular MODULE 种子

    这是什么?

    本项目旨在为开发和发布一个 NPM MODULE,以便其他用户通过常规的npm install 命令安装。

    整个项目深受 Cyrille Tuzi的启发,通过他的,如何构建和发布一个 Angular MODULE 中的媒体文章。

    准备好

    • fork 这里 repo 并将它的NAME 更改为你的模块
    • clone 你的fork
    • 查看 package.json 文件内容并包括 NAME。模块 NAME 以及所需的任何其他信息。 此外,确保列出的依赖项及其版本号是你所需要

    现在我们不再关注 package-dist.json 文件了,我们稍后会到那里。

    • npm install 来安装所有依赖项或者 yarn

    编码时间 !

    你现在可能想写一些很棒的代码。

    种子包括一个示例 MODULE 文件( seed.module.ts ),以及一个示例服务( seed.service.ts ) 和一个示例 public 组件( seed.component.ts )。

    现在是时候把这些文件和类重命名到你喜欢的位置,或者从头开始写作。

    现在编译它 !

    一旦你有了大量的代码放入你的服务,组件,过滤器。 "。"。这可以能是编译你的MODULE 和尝试你的硬件的奖励的好时机。 以下是这些步骤:

    • 在项目中打开 tsconfig.json 文件并将它的包含在项目依赖的所有模块中,因为最终包将不包含它们
    • 打开 rollup.config.js 文件并更改下列值
    exportdefault {
     // (...) dest:'dist/bundles/npm-module-seed.umd.js', // change this to your module's name// (...) moduleName:'ng.npm-module-seed', // change this to your module's name globals: {
     // Your module use Angular things (at least the NgModule decorator), // but your bundle should not include Angular.// So you need to set Angular as a global. And you need to know the UMD module // name for each module. It follows this convention: ng.modulename // Also, include the RXJS only if your module uses them.'@angular/core':'ng.core',
     '@angular/common':'ng.common',
     'rxjs/Observable':'Rx',
     'rxjs/ReplaySubject':'Rx',
     'rxjs/add/operator/map':'Rx.Observable.prototype',
     'rxjs/add/operator/mergeMap':'Rx.Observable.prototype',
     'rxjs/add/observable/fromEvent':'Rx.Observable',
     'rxjs/add/observable/of':'Rx.Observable' }
    }
    • 打开 package-dist.json 文件( 现在是正确的时候了) 并更改其中的细节。 记住,只有在你要发布到NPM的软件包中,这些细节才会出现。 因为我们只发布生成的dist 文件夹,构建过程将把这个文件复制到这个文件夹并改变它的NAME。 确保你包含了 MODULE的依赖项( 例如。 @angular/core 等( peerDependencies )。
    • 最后,npm run build 将编译,树抖动,uglify。 将模块代码放入 dist 文件夹中。

    在本地使用代码

    在将新 MODULE 发布到NPM存储库之前,最好在本地测试新的。

    我建议创建一个单独的Angular 项目并将 MODULE 导入其中。 为此,需要在模块文件夹的dist 内运行 npm link ;然后导航到测试项目 root 并运行 npm link {name-of-module}。 这将把你的原始 MODULE 链接到你的测试项目的node_modules 文件夹。

    记得在原始 MODULE 根目录 中运行 npm run build,这样它的symlinked dist 文件夹就会获取你所做的更改。

    发布你的精彩 MODULE ( 最后) !

    一旦你准备好发布你的硬件,以便它的他人利用它,请按照以下简单步骤操作:

    • 如果你还没有完成你的NPM帐户,请按照以下说明操作:
    • 导航到模块文件夹的dist 并运行 npm publish

    只要需要更新 MODULE,就可以重新构建。更改版本号并再次发布。

    其他东西

    • 添加单元测试。
    • 探索使用OpaqueTokens来引用服务。

    联系你

    如果你有问题,疑问,问题或者建议,尽管告诉我你认为你想要什么。 你可以在这里留下问题,或者让我在 Twitter

    许可证

    MIT


    STA  angular  模块  poi    modules  
    相关文章