编写应用组件的时候如何优雅的提供资源

[kvkens]

方向：在编写应用组件的时候，如何优雅的输出你的组件能力，如何区分开发和生产提供不同的代码，如何提供打包单体文件，如何提供可调试的Libray文件？下面一一解读如何做！

环境区分

说到环境区分，大家都知道在开发react项目工程的时候，开发环境已经在uba or ucf里面进行了区分，我们在不同的环境下去执行哪些功能，例如在uba里面是给出了devConfig和prodConfig配置节点，可以直接配置我们不同时机的运行插件等，在ucf里面也给出了env环境变量区别development和production的方法使用，但是我们疏忽了，给对方提供npm包组件的时候，没有去给对方使用的时候环境区分，这样是不可行的

分析

React

首先看下React的包的组成

.
├── LICENSE
├── README.md
├── build-info.json
├── cjs
│   ├── react.development.js
│   └── react.production.min.js
├── index.js
├── package.json
└── umd
    ├── react.development.js
    ├── react.production.min.js
    └── react.profiling.min.js

2 directories, 10 files

可以看出提供的不是源码，而是打包好的两种格式cjs,umd两种，然后我们打开看一下packages.json里面的main对应的是什么？

{  "license": "MIT",
  "main": "index.js",
  "name": "react",
  "repository": {
    "type": "git",
    "url": "git+https://github.com/facebook/react.git",
    "directory": "packages/react"
  },
  "version": "16.8.3"
}

可以看出使用了index.js，但是在我们常规使用不应该是直接指向一个cjs里面的react不就好了吗？继续往下看打开index.js

'use strict';

if (process.env.NODE_ENV === 'production') {
  module.exports = require('./cjs/react.production.min.js');
} else {
  module.exports = require('./cjs/react.development.js');
}

噢，大家应该明白了吧，这里使用了node提供的能力，拿到环境变量，不同环境加载不同的js文件，这样在开发的时候webpack->mode 不同环境加载不同js就好了，开发可以调试，生产自动走生产的代码，很机智吧！

Mirror

下面看一下mirrorx框架如何处理打包的问题，打开 https://github.com/mirrorjs/mirror/blob/master/package.json

看下scripts如何写的：

  "scripts": {
    "prepublishOnly": "npm run build",
    "test": "jest",
    "test:watch": "jest --watch",
    "test:cov": "jest --coverage",
    "coveralls": "cat ./coverage/lcov.info | coveralls",
    "lint": "eslint src test",
    "build": "rm -rf lib && babel src -d lib --no-comments",
    "bundle": "webpack && webpack -p --output-filename mirror.min.js"
  }

这里主要看一下build命令，这里没有使用webpack打包，仅仅用了babel转换了代码而已，再看一下main字段如何写的：

"main": "./lib/index.js",

是直接使用了我们的lib产出的ES5代码，很明确，使用mirrorx的时候让我们的babel-loader从node_modules/mirrorx里面拿es5的代码使用，这样做的目的是不需要转换，并且可以调试代码。
bundle命令是产出单独mirror.min.js压缩版的，可以直接使用。

总结

通过分析react提供包的方法，可以学到用这种方式给对方提供资源，也不至于全部打包到index.js里面，产生过多的依赖、体积变大，无法调试等问题了，产出es的资源也是有必要的！