vicky-sparrow

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

Usage no npm install needed!

<script type="module">
  import vickySparrow from 'https://cdn.skypack.dev/vicky-sparrow';
</script>

README

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

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

基于开发环境

  • 全局环境 node & npm
  • 命令行： terminal & shell
  • 版本管理： git
  • 编辑器： webstorm2016
  • 浏览器：chrome
  • 注册npm账号
  • 注册github账号

创建项目的基本结构

src  开发源代码
lib  编译后的资源
test 测试用例
.gitignore
LICENSE
README.md
package.json
webpack.config.js
.babelrc
.selint.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-plugin-add-module-exports --save-dev

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

umd

npm install babel-plugin-transform-es2015-modules-umd --save

webpack几个小配置

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

区分开发环境和生产环境

  • sparrow.js（开发环境，未压缩校验，一些开发环境的配置和代码）
  • sparrow.min.js（生产环境）
process.env.WEBPACK_ENV
yargs
    npm i yargs --save-dev
    var mode = require('yargs').argv.mode;

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

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

eslint

npm i eslint eslint-loader --save-dev
eslint --init

测试

  • mocha测试框架
  • chai断言库

代码push到github

将包发布到npm

npm adduser
npm publish