guoyff-sparrow
library
Last updated 4 years ago by guoyongfeng .
ISC · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install guoyff-sparrow 
SYNC missed versions from official npm registry.

如何开发一个属于自己的前端类库

  • 基于webpack进行资源构建
  • 使用ES6语法进行开发
  • 将包输出为umd规范的文件
  • 使用mocha和chai进行测试
  • 使用eslint来进行代码检查
  • 基于npm scripts来集成开发命令
  • 代码push到github
  • 将包发布到npm

基本开发环境

  • 全局环境:node & npm
  • 命令行:terminal & shell
  • 版本管理:git
  • 编辑器:atom/webstorm/st3/vs
  • 浏览器:chrome
  • 注册npm账号
  • 注册github账号

创建项目的基本结构

src 开发源代码
lib 编译后的资源
test 测试用例
.gitignore
LICENSE
README.md
package.json
webpack.config.js
.babelrc
.eslint.js

结合webpack跑通es6语法编译的过程

  • webpack.config.js
npm install webpack webpack-dev-server --save-dev
  • babel及其相关preset、plugin、loader
npm install babel-loader babel-core babel-preset-es2015 babel-plguin-add-module-exports --save-dev

babel-preset-es2015-loose babel-preset-stage-0 babrl-preset-es2016

umd

webpack 几个小配置

  • resolve
    • extension 扩展名,方便
    • root 添加默认搜索路径,但得是绝对路径,可以是数组和字符串
  • devtool 开发工具配置
    • cheap-source-map

区分开发环境和生产环境

  • sparrow.js (开发环境,未压缩校验,一些开发环境的配置和代码)
  • sparrow.min.js (生产环境)
process.env.WEBPACK_ENV
yargs

将用于生产环境的代码压缩

webpack.optimize.UglifyJsPlugin
  • 提供给生产环境和开发环境用的文件名需要区分

eslint

eslint eslint-loader

测试

  • mocha 测试框架
  • chai 断言库

代码push到github

将包发布到npm

Current Tags

  • 1.0.0                                ...           latest (4 years ago)

1 Versions

  • 1.0.0                                ...           4 years ago
Maintainers (1)
Downloads
Today 0
This Week 0
This Month 0
Last Day 0
Last Week 0
Last Month 0
Dependencies (0)
None
Dev Dependencies (12)
Dependents (0)
None

Copyright 2014 - 2016 © taobao.org |