feat: support inject based on rollup-plugin-inject (#98)

* feat: support inject based on rollup-plugin-inject

* add test file

README.md

@@ -2,16 +2,16 @@
 
 Library toolkit based on rollup, docz, storybook, jest and eslint.
 
-[![NPM version][image-1]][1]
-[![Build Status][image-2]][2]
-[![NPM downloads][image-3]][3]
+[![NPM version](https://img.shields.io/npm/v/father.svg?style=flat)](https://npmjs.org/package/father)
+[![Build Status](https://img.shields.io/travis/umijs/father.svg?style=flat)](https://travis-ci.org/umijs/father)
+[![NPM downloads](http://img.shields.io/npm/dm/father.svg?style=flat)](https://npmjs.org/package/father)
 
-[视频教程：利用 umi-library（father） 做组件打包][4]。
+[视频教程：利用 umi-library（father） 做组件打包](https://www.bilibili.com/video/av47853431)。
 
 ## Features
 
-* ✔︎ 基于 [docz][5] 的文档功能
-* ✔︎ 基于 [rollup][6] 和 babel 的组件打包功能
+* ✔︎ 基于 [docz](https://www.docz.site/) 的文档功能
+* ✔︎ 基于 [rollup](http://rollupjs.org/) 和 babel 的组件打包功能
 * ✔︎ 支持 TypeScript
 * ✔︎ 支持 cjs、esm 和 umd 三种格式的打包
 * ✔︎ esm 支持生成 mjs，直接为浏览器使用
@@ -85,11 +85,11 @@ $ father doc build
 $ father doc deploy
 ```
 
-所有的命令行参数会透传给 docz，详见 [docz.site#project-configuration][7]。
+所有的命令行参数会透传给 docz，详见 [docz.site#project-configuration](https://www.docz.site/docs/project-configuration)。
 
 注：
 
-1. 不能传 `--config` 参数，通过 `--config` 指定的文件内容可全部配置在 `.fatherrc.js` 的 [doc][8] 配置里。
+1. 不能传 `--config` 参数，通过 `--config` 指定的文件内容可全部配置在 `.fatherrc.js` 的 [doc](#doc) 配置里。
 2. 使用 `deploy` 之前请先执行 `build` 命令，文档部署后域名为：`https://yourname.github.io/your-repo`。
 
 ## Config
@@ -134,7 +134,7 @@ export default {
 注：
 
 1. entry 为数组时，不可配置 file，因为不能多个 entry 输出到同一个文件
-2. 为不同 entry 指定不同的输出文件名时，可通过 [overridesByEntry][9] 实现
+2. 为不同 entry 指定不同的输出文件名时，可通过 [overridesByEntry](#overridesbyentry) 实现
 
 #### esm
 
@@ -238,11 +238,11 @@ cjs 为 `rollup` 或 `babel` 时，等同于配置了 `{ type: "rollup" | "babel
 
 #### umd.globals
 
-指定 rollup 的 [globals][10] 配置。
+指定 rollup 的 [globals](https://rollupjs.org/guide/en#output-globals) 配置。
 
 #### umd.name
 
-指定 rollup 的 [name][11] 配置。
+指定 rollup 的 [name](https://rollupjs.org/guide/en#output-name) 配置。
 
 * Type: `string`
 * Default: `${camelCase(basename(pkg.name))}`
@@ -263,7 +263,7 @@ cjs 为 `rollup` 或 `babel` 时，等同于配置了 `{ type: "rollup" | "babel
 
 #### autoprefixer
 
-配置参数传给 autoprefixer，详见 [autoprefixer#options][12]，常用的有 `flexbox` 和 `browsers`。
+配置参数传给 autoprefixer，详见 [autoprefixer#options](https://github.com/postcss/autoprefixer#options)，常用的有 `flexbox` 和 `browsers`。
 
 比如：
 
@@ -287,7 +287,7 @@ export default {
 
 默认是 `.module.css` 走 css modules，`.css` 不走 css modules。配置 `cssModules` 为 `true` 后，全部 css 文件都走 css modules。（less 文件同理）
 
-如果配置了 object，会被透传给 [postcss-modules][13]。
+如果配置了 object，会被透传给 [postcss-modules](https://github.com/css-modules/postcss-modules)。
 
 比如，要定制 css modules 的样式名前缀，
 
@@ -357,7 +357,7 @@ export default {
 
 #### namedExports
 
-配置 rollup-plugin-commonjs 的 [namedExports][14]。
+配置 rollup-plugin-commonjs 的 [namedExports](https://github.com/rollup/rollup-plugin-commonjs#usage)。
 
 #### nodeResolveOpts
 
@@ -408,7 +408,7 @@ target 为 `browser` 时，配置例外文件走 `node` target。
 
 #### replace
 
-配置需要替换的内容，基于 [rollup-plugin-replace][15]。
+配置需要替换的内容，基于 [rollup-plugin-replace](https://github.com/rollup/rollup-plugin-replace)。
 
 * Type: `Object`
 * Default: `{}`
@@ -428,9 +428,39 @@ export default {
 }
 ```
 
+#### inject
+
+配置需要替换成依赖引用的全局变量 Map，基于 [rollup-plugin-inject](https://github.com/rollup/rollup-plugin-inject)。
+
+* Type: `Object`
+* Default: `{}`
+
+比如：
+
+```js
+export default {
+  inject: {
+    'window.foo': 'foo',
+  },
+}
+```
+
+那么，
+
+```js
+console.log(window.foo);
+```
+
+会被编译成，
+
+```js
+import $inject_window_foo from 'foo';
+console.log($inject_window_foo);
+```
+
 #### lessInBabelMode
 
-在 babel 模式下做 less 编译，基于 [gulp-less][16]，默认不开启。
+在 babel 模式下做 less 编译，基于 [gulp-less](https://github.com/gulp-community/gulp-less)，默认不开启。
 
 * Type: `Boolean` | `Object`
 * Default: `false`
@@ -491,7 +521,7 @@ export default {
 
 #### doc
 
-透传配置给 [docz][17]，可以有 `title`、`theme`、`themeConfig` 等。
+透传配置给 [docz](https://www.docz.site/documentation/project-configuration)，可以有 `title`、`theme`、`themeConfig` 等。
 
 比如要切换默认主题为 dark 模式：
 
@@ -536,7 +566,7 @@ export default {
 1. 通常只要配置 `esm: "rollup"` 就够了
 2. cjs 和 esm 支持 rollup 和 babel 两种打包方式，rollup 是跟进 entry 把项目依赖打包在一起输出一个文件，babel 是把 src 目录转化成 lib（cjs） 或 es（esm）
 3. 如果要考虑 ssr，再配上 `cjs: "rollup"`
-4. `package.json` 里配上 `sideEffects: false | string[]`，会让 webpack 的 [tree-shaking][18] 更高效
+4. `package.json` 里配上 `sideEffects: false | string[]`，会让 webpack 的 [tree-shaking](https://webpack.js.org/guides/tree-shaking/) 更高效
 
 ### 关于 dependencies、peerDependencies 和 external
 
@@ -569,26 +599,3 @@ $ PACKAGE=foo father build
 ## LICENSE
 
 MIT
-
-[1]:	https://npmjs.org/package/father
-[2]:	https://travis-ci.org/umijs/father
-[3]:	https://npmjs.org/package/father
-[4]:	https://www.bilibili.com/video/av47853431
-[5]:	https://www.docz.site/
-[6]:	http://rollupjs.org/
-[7]:	https://www.docz.site/docs/project-configuration
-[8]:	#doc
-[9]:	#overridesbyentry
-[10]:	https://rollupjs.org/guide/en#output-globals
-[11]:	https://rollupjs.org/guide/en#output-name
-[12]:	https://github.com/postcss/autoprefixer#options
-[13]:	https://github.com/css-modules/postcss-modules
-[14]:	https://github.com/rollup/rollup-plugin-commonjs#usage
-[15]:	https://github.com/rollup/rollup-plugin-replace
-[16]:	https://github.com/gulp-community/gulp-less
-[17]:	https://www.docz.site/documentation/project-configuration
-[18]:	https://webpack.js.org/guides/tree-shaking/
-
-[image-1]:	https://img.shields.io/npm/v/father.svg?style=flat
-[image-2]:	https://img.shields.io/travis/umijs/father.svg?style=flat
-[image-3]:	http://img.shields.io/npm/dm/father.svg?style=flat

packages/father-build/package.json

@@ -38,6 +38,7 @@
     "rollup": "1.15.1",
     "rollup-plugin-babel": "4.3.2",
     "rollup-plugin-commonjs": "10.0.0",
+    "rollup-plugin-inject": "3.0.1",
     "rollup-plugin-json": "4.0.0",
     "rollup-plugin-node-resolve": "5.0.1",
     "rollup-plugin-postcss-umi": "2.0.3",

packages/father-build/src/fixtures/build/rollup-inject/.fatherrc.js

@@ -0,0 +1,7 @@
+
+export default {
+  esm: { type: 'rollup' },
+  inject: {
+    'window.foo': 'foo',
+  },
+};

packages/father-build/src/fixtures/build/rollup-inject/expected/index.esm.js

@@ -0,0 +1,3 @@
+import $inject_window_foo from 'foo';
+
+console.log($inject_window_foo);

packages/father-build/src/fixtures/build/rollup-inject/package.json

@@ -0,0 +1,5 @@
+{
+  "dependencies": {
+    "foo": "0.1.0"
+  }
+}

packages/father-build/src/fixtures/build/rollup-inject/src/index.js

@@ -0,0 +1 @@
+console.log(window.foo);

packages/father-build/src/getRollupConfig.ts

@@ -7,14 +7,15 @@ import nodeResolve from 'rollup-plugin-node-resolve';
 import typescript from 'rollup-plugin-typescript2';
 import commonjs from 'rollup-plugin-commonjs';
 import postcss from 'rollup-plugin-postcss-umi';
+import inject from 'rollup-plugin-inject';
 import { ModuleFormat, RollupOptions } from 'rollup';
 import { camelCase } from 'lodash';
 import tempDir from 'temp-dir';
 import autoprefixer from 'autoprefixer';
 import NpmImport from 'less-plugin-npm-import';
+import svgr from '@svgr/rollup';
 import getBabelConfig from './getBabelConfig';
 import { IBundleOptions } from './types';
-import svgr from '@svgr/rollup';
 
 interface IGetRollupConfigOpts {
   cwd: string;
@@ -48,6 +49,7 @@ export default function(opts: IGetRollupConfigOpts): RollupOptions[] {
     namedExports,
     runtimeHelpers: runtimeHelpersOpts,
     replace: replaceOpts,
+    inject: injectOpts,
     extraExternals = [],
     nodeVersion,
     typescriptOpts,
@@ -142,6 +144,7 @@ export default function(opts: IGetRollupConfigOpts): RollupOptions[] {
       ],
       plugins: [autoprefixer(autoprefixerOpts), ...extraPostCSSPlugins],
     }),
+    ...(injectOpts ? [inject(injectOpts)] : []),
     ...(replaceOpts && Object.keys(replaceOpts || {}).length ? [replace(replaceOpts)] : []),
     nodeResolve({
       mainFields: ['module', 'jsnext:main', 'main'],

packages/father-build/src/schema.ts

@@ -107,6 +107,9 @@ export default {
     replace: {
       type: 'object',
     },
+    inject: {
+      type: 'object',
+    },
     lessInBabelMode: {
       oneOf: [
         { type: 'boolean' },

packages/father-build/src/types.d.ts

@@ -44,6 +44,7 @@ export interface IBundleOptions {
   cssModules?: boolean | Object;
   extractCSS?: boolean;
   injectCSS?: boolean,
+  inject?: Object,
   autoprefixer?: Object;
   namedExports?: IStringArrayObject;
   runtimeHelpers?: boolean;

packages/father-build/yarn.lock

@@ -3509,7 +3509,7 @@ lru-cache@^4.0.1:
     pseudomap "^1.0.2"
     yallist "^2.1.2"
 
-magic-string@^0.25.2:
+magic-string@^0.25.2, magic-string@^0.25.3:
   version "0.25.3"
   resolved "https://registry.yarnpkg.com/magic-string/-/magic-string-0.25.3.tgz#34b8d2a2c7fec9d9bdf9929a3fd81d271ef35be9"
   integrity sha512-6QK0OpF/phMz0Q2AxILkX2mFhi7m+WMwTRg0LQKq/WBB0cDP4rYH3Wp4/d3OTXlrPLVJT/RFqj8tFeAR4nk8AA==
@@ -4806,6 +4806,15 @@ rollup-plugin-commonjs@10.0.0:
     resolve "^1.10.1"
     rollup-pluginutils "^2.7.0"
 
+rollup-plugin-inject@3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/rollup-plugin-inject/-/rollup-plugin-inject-3.0.1.tgz#62b619d28988aca60eb17ccfbf553e25feb8c0f9"
+  integrity sha512-zF0jOuSpBxdLwAeDsS/+zGYgseaoH9LwqRNsByuzmE3bxfQ4Pg2gDoXGGWiia7iFyA8nLT+6iHrAqQYtH3Olow==
+  dependencies:
+    estree-walker "^0.6.1"
+    magic-string "^0.25.3"
+    rollup-pluginutils "^2.8.1"
+
 rollup-plugin-json@4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/rollup-plugin-json/-/rollup-plugin-json-4.0.0.tgz#a18da0a4b30bf5ca1ee76ddb1422afbb84ae2b9e"