Wrup NPM | npm.io

Wright 是一个由 WebUnion CatMan20 独立创建的微前端项目。

Dll 打包公共资源(vendor)

App 引用的框架资源，如 react、react-dom 等一般不会发生变动，针对这些资源，你可以执行npm run build:dll命令将其抽取为公共库，之后每次打包 App 就不会连同公共库一起打包，因此大大提高了打包效率。

build:dll命令读取的是config/webpack.dll.js的配置，而打包的具体内容，则是来源于wright.config.js文件中的vendorMap选项，如：

vendorMap: {
    'react_base': [
        'react',
        'react-dom',
        'react-router-dom',
    ],
    'vue_base': [
        'vue',
        'vue-router',
        'vuex',
    ],
},

以上代码中，分别配置了 react 和 vue 两种框架构筑的 App 依赖资源，你可以根据自己的需要自定义打包内容，但是需要注意，vendorMap 中的键不能包含-字符。

配置好打包内容后，还需要在wright.config.js中的env.production(build:dll视为生产模式打包)中，修改环境变量WRIGHT_CDN_LIB_KEY指明此次build:dll要打的是哪个公共库包：

env: {
    'production': {
        'WRIGHT_CDN_LIB_KEY': 'vue_base', // Dll vendor打包的key，对应vendor构筑Map
    },
},

配置完成后，执行npm run build:dll即可在cdn目录中得到你想要的 vendor 包。

模板文件第三方资源注入(以引入 vendor 为例)

模板文件位于public目录，默认放置两个基础模板文件，按环境区分为template.dev.ejs和template.prod.ejs，开发模式一般不进行 vendor 拆分，故这里所说的模板文件引入 vendor 指的是在template.prod.ejs引入，引入方式其实就是在 HTML head 或者 body 中注入 script，你只要在wright.config.js的allApps选项中做如下配置：

'demo-react': {
    ...

    // 注入到html head中的资源队列
    headInjectQueue: [
        {
            type: 'script', // 资源type，script为注入script标签，其他类型则是注入rel为此值的link标签
            url: '/wright-cdn/react_base.min.js', // 资源URL
        },
    ],

    // 注入到html body中的资源队列
    bodyInjectQueue: [],
},

以上代码就是在 HTML head 中注入了一个 URL 为/wright-cdn/react_base.min.js的公共库，其实就是build:dll打出来的 react 基础资源包(自行转移为 CDN 资源)。

自定义模板文件

Wright 生产模式下支持模板文件自定义，首先，在public目录下编写一个 ejs 模板文件，例如"demo-vue-pc.prod.ejs"，模板的基本内容可以参考两个基础模板文件。模板文件编写完成后，在wright.config.js中给 App 绑定模板:

'demo-vue': {
    ...

    // 使用自定义模板(模板放置在/public目录下)，production模式下生效
    template: 'demo-vue-pc.prod.ejs',
},

自定义模板构成

一般情况下，开发者不需要用到自定义模板文件功能，因为 Wright 的模板扩展性一般情况下已满足大部分开发场景，我们更提倡使用自定义模板构成功能。

v2.1.2版本新增了自定义模板构成功能，默认情况下，模板 HTML 文件的 head 和 body 部分会引用public目录下的 head.html 和 body.html 文件的内容，可以分别配置开发模式与生产模式下的 WRIGHT_TEMPLATE_HEAD_MODULE 和 WRIGHT_TEMPLATE_BODY_MODULE 环境变量指定引用的 head 和 body 内容。

环境变量注入

之前打包公共库的章节涉及到WRIGHT_CDN_LIB_KEY这个环境变量的注入，这个环境变量只有在生产模式下才会起作用，且只有在执行build:dll命令的时候才会去读取这个环境变量，如法炮制，你可以在env选项中给不同的环境配置具体的环境变量，目前内置的一些环境变量如下：

env: {
    'development': {
        'WRIGHT_SERVER_HOST': '127.0.0.1', // webpack-dev-server启动主机名
        'WRIGHT_SERVER_PORT': '8585', // webpack-dev-server启动端口
        'WRIGHT_PUBLIC_PATH': '/wright/', // 应用URL path前缀
        'WRIGHT_BUILD_MODE': 'development', // 伪打包模式，默认为自身模式
    },
    'production': {
        'WRIGHT_CDN_LIB_KEY': 'react_base', // Dll vendor打包的key，对应vendor构筑Map
    },
},

App全局常量注入

默认情况下，每个 App 可以引用以下两个全局常量:

WRIGHT_IS_DEV: 是否为 development 模式;
WRIGHT_PUBLIC_PATH: 应用URL path前缀。

除此之外，你还可以自定义自己需要的全局常量，例如:

'demo-normal': {
    ...

    prefix: 'DEMO_NORMAL_', // 多App防污染添加应用前缀

    // 注入客户端的常量集合，注意格式转换
    systemConstants: {
        'WRIGHT_DEV_API_SERVER': JSON.stringify('http://127.0.0.1:5000/api/normal'),
        'WRIGHT_PROD_API_SERVER': JSON.stringify('/api/normal'),
    },
},

这些自定义全局常量的引用方式为 prefix 加全局常量名的形式，例如以上两个自定义常量的引用形式分别为: DEMO_NORMAL_WRIGHT_DEV_API_SERVER、DEMO_NORMAL_WRIGHT_PROD_API_SERVER。

启动 webpack-dev-server

webpack-dev-server 是通过执行npm run dev命令启动，运行环境为 development，读取的 webpack 配置文件为config/webpack.dev.js(一般不需要手动修改)，启动后会在浏览器打开一个由WRIGHT_SERVER_HOST和WRIGHT_SERVER_PORT组合的 URL 的页面：

此页面的入口为apps/index.js，同层级下放置着其他 App 的页面(后续详细讲解)。wright.config.js中的devGroup是 development 模式下注册的 App 对应的键，App 的具体信息声明，则是在allApps选项中，示例可参考 wright-demo 项目。

生产模式(production)打包

最后一个命令是npm run build，即打包生产包，可以在wright.config.js中的buildApp选项中放置要打包的 App 键，命令执行完毕会在根目录下生成一个dist资源目录，自行转移资源到生产环境服务器上。

App 类型介绍

Wright 支持 ES6 语法，目前集成了以下技术栈的 App：

react、react-router等技术栈的 react SPA;
vue、vue-router、vuex等技术栈的 vue SPA；

Wright 推荐根据业务将产品拆分为粒度较小的 SPA，当然，你也可以根据业务需要编写 MPA。此外，你可以在以上项目中自由选择使用 less、sass 这两种 CSS 预处理器，也可以接入第三方库到自己的 App 中。

全局Api Hook

目前 Wright 提供了demo-normal、demo-react、demo-vue三个示例 App，你可以参考这些示例 App 的内部配置，特别强调的一点是，App 入口文件需要暴露一个 App Api 到 window 下，以demo-normal为例：

import './style.css';

const WrightDemoNormalApi = {        
    render: (rootNode) => {
        rootNode.innerHTML = '<div class="demo-normal-main"><h1>Here is demo-normal</h1></div>';
        return true;
    },
};

window.WrightDemoNormalApi = WrightDemoNormalApi;

export default WrightDemoNormalApi;

demo-normal在 window 对象绑定了一个名为WrightDemoNormalApi的 App Api(export default的也是此 Api)，其中包含一个render方法(必需)，生产模式下，入口页面根据 URL 上的路径根节点(例如http://xxx.com/demo-normal?name=123读取到根节点demo-normal)，检索到config/app.config.js-allApps中的 App 配置，接着拿到配置信息中的apiKey(即你定义的 App Api 名)，从而调用 window 下的同名 Api，调用其 render 方法渲染页面。