使用Babel来发布npm模块

作者: 脱非入欧 | 来源:发表于2017-12-12 23:07 被阅读31次

背景

职能组有几个项目都是用同样的前端技术栈,部分相同业务功能的可以抽取出来作为统一维护的模块使用。

诉求

  • 使用 ES6 来编写。
  • 运行于浏览器/webview上,需要兼容 ES5 。

组织

构建

模块源码 -> Babel -> 发布 -> 本地NPM

发布

修改 main 入口

{
  "main": "./distribution/index.js",
   "scripts": {
     "build": ...
   }
}

告诉 npm 忽略文件

配置 .npmignore。一般我们忽略 src 目录。
需要注意的是,如果没有配置 .npmignore,npm 会使用 .gitignore

发布

编写 package.json 脚本,如:

"scripts": {
  "build": "babel-cli --preset xxx",
  "prepublish": "npm run build"
}

然后发布:

npm publish ./  

其他

  • 使用 jest、chai、mocha 等来编写单元测试。
  • 发布到 npm,指向 GitHub,配置 Webhooks、Integrations 和 Services。

参考

How to Build and Publish ES6 npm Modules Today, with Babel

相关文章

  • 使用Babel来发布npm模块

    背景 职能组有几个项目都是用同样的前端技术栈,部分相同业务功能的可以抽取出来作为统一维护的模块使用。 诉求 使用 ...

  • 如何使用ES6和Babel制作并发布npm包

    今天我们使用Babel来制作并且发布一个简单的npm包 首先在terminal中运行命令npm init,按照提示...

  • ECMAScript6:官方Decorator修饰器构造函数重写

    babel发布了最新版本,npm最新版本的模块名称都改成@babel前缀,具体可前往babel英文官网查看,中文网...

  • 项目中针对babel的使用

    为什么要使用babel1、浏览器对es6特性支持不一2、es6的模块化不能对npm安装的模块进行导入babel是j...

  • Module build failed: Error: The

    国内信息太少google才搜索到。babel和babel-core冲突 删除babel包模块就解决了。npm un...

  • Babel学习和插件

    核心库 Babel 的核心功能在@babel/core模块。通过以下命令安装: npm install --sav...

  • 前端技能点

    使用过webpack2.0+ 掌握ES6语法 ES6和CommonJS的模块化规范 知道npm和babel的使用 ...

  • 小程序开发如何使用npm

    构建npm 开启“使用npm模块”(右上角详情-本地设置-勾选使用npm模块)使用npm模块 初始化npm npm...

  • Rollup.js 之五:使用插件

    来源:rollup.js 官网 当应用越来越复杂,我们需要更多的灵活性 --- 使用 npm 模块,Babel 转...

  • Day5:ES6

    ES6 模块化 export import babel npm init 安装必要的安装包 npm install...

网友评论

    本文标题:使用Babel来发布npm模块

    本文链接:https://www.haomeiwen.com/subject/uuyoixtx.html