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

@kvkens 2019-03-01 05:01:19发表于 iuap-design/blog js

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

环境区分

说到环境区分,大家都知道在开发react项目工程的时候,开发环境已经在uba or ucf里面进行了区分,我们在不同的环境下去执行哪些功能,例如在uba里面是给出了devConfigprodConfig配置节点,可以直接配置我们不同时机的运行插件等,在ucf里面也给出了env环境变量区别developmentproduction的方法使用,但是我们疏忽了,给对方提供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-loadernode_modules/mirrorx里面拿es5的代码使用,这样做的目的是不需要转换,并且可以调试代码。
bundle命令是产出单独mirror.min.js压缩版的,可以直接使用。

总结

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