编写package

分析npm package

-index.js 小项目只要一个index.js入口文件即可

-package.json npm安装json格式

-README.md 项目介绍文档

-LICENSE 协议

-CONTRIBUTING.md 贡献列表

-CHANGELOG.md 变更日志

-.travis.yml

-.gitignore git忽略文件

-.npmignore npm安装忽略文件

-.eslintignore esling语法检测忽略文件

-.eslintrc eslint语法规则

-webpack.config.js webpack配置文件

理解package.json

  1. {
  2.   /* Name of the project */
  3.   "name": "react-component-boilerplate",
  4.   /* Brief description */
  5.   "description": "Boilerplate for React.js components",
  6.   /* Who is the author + optional email + optional site */
  7.   "author": "Juho Vepsäläinen <email goes here> (site goes here)",
  8.   /* Version of the package */
  9.   "version": "0.0.0",
  10.   /* `npm run <name>` */
  11.   "scripts": {
  12.     "start": "webpack-dev-server",
  14.     "test": "karma start",
  15.     "test:tdd": "npm run test -- --auto-watch --no-single-run",
  16.     "test:lint": "eslint . --ext .js --ext .jsx --cache",
  18.     "gh-pages": "webpack",
  19.     "gh-pages:deploy": "gh-pages -d gh-pages",
  20.     "gh-pages:stats": "webpack --profile --json > stats.json",
  22.     "dist": "webpack",
  23.     "dist:min": "webpack",
  24.     "dist:modules": "rm -rf ./dist-modules && babel ./src --out-dir ./dist-modules",
  26.     "pretest": "npm run test:lint",
  27.     "preversion": "npm run test && npm run dist && npm run dist:min && git commit --allow-empty -am \"Update dist\"",
  28.     "prepublish": "npm run dist:modules",
  29.     "postpublish": "npm run gh-pages && npm run gh-pages:deploy",
  30.     /* If your library is installed through Git, you may want to transpile it */
  31.     "postinstall": "node lib/post_install.js"
  32.   },
  33.   /* Entry point for terminal (i.e., <package name>) */
  34.   /* Don't set this unless you intend to allow CLI usage */
  35.   "bin": "./index.js",
  36.   /* Entry point (defaults to index.js) */
  37.   "main": "dist-modules",
  38.   /* Package dependencies */
  39.   "dependencies": {},
  40.   /* Package development dependencies */
  41.   "devDependencies": {
  42.     "babel": "^6.3.17",
  43.     ...
  44.     "webpack": "^1.12.2",
  45.     "webpack-dev-server": "^1.12.0",
  46.     "webpack-merge": "^0.7.0"
  47.   },
  48.   /* Package peer dependencies. The consumer will fix exact versions. */
  49.   /* In npm3 these won't get installed automatically and it's up to the */
  50.   /* user to define which versions to use. */
  51.   /* If you want to include RC versions to the range, consider using */
  52.   /* a pattern such as ^4.0.0-0 */
  53.   "peerDependencies": {
  54.     "lodash": ">= 3.5.0 < 4.0.0",
  55.     "react": ">= 0.11.2 < 16.0.0"
  56.   }
  57.   /* Links to repository, homepage, and issue tracker */
  58.   "repository": {
  59.     "type": "git",
  60.     "url": "https://github.com/bebraw/react-component-boilerplate.git"
  61.   },
  62.   "homepage": "https://bebraw.github.io/react-component-boilerplate/",
  63.   "bugs": {
  64.     "url": "https://github.com/bebraw/react-component-boilerplate/issues"
  65.   },
  66.   /* Keywords related to package. */
  67.   /* Fill this well to make the package findable. */
  68.   "keywords": [
  69.     "react",
  70.     "reactjs",
  71.     "boilerplate"
  72.   ],
  73.   /* Which license to use */
  74.   "license": "MIT"
  75. }

webpack的output.libraryTarget和externals配置项，自行了解

<<上一节:webpack语法分析

另外：

自定义loader

配置react