npm.io
1.1.0 • Published 6 years ago

react-asyncmodule-tool

Licence
—
Version
1.1.0
Deps
1
Size
33 kB
Vulns
0
Weekly
0
Stars
2
SummaryDependencyVersions

react-asyncmodule-tool

react-asyncmodule related method.

Installation

npm install react-asyncmodule-tool

Es6 used.

import {
    createCollect,
    createAssets,
    getChunkAssets
} from 'react-asyncmodule-tool';

API

createCollect(options)

options的属性

Name Type Default Description
chunkName string or array - 当前 chunk 的名称，根据该值获取对应的资源文件，若为空则返回入口相关资源
stats object - 必填，webpack 构建生成的 stats，推荐使用 webpack-stats-plugin提取
outputPath string stats 的 outputPath 工程构建后 client 端的资源文件路径
entrypoints string or array 工程的 entry 入口文件
asyncChunkKey string - client 端获取依赖 chunk 的 domid
runtimeName string or array 'runtime' 从入口文件分离出的 runtime js文件 
const collect = createCollect({
    stats,
    chunkName: 'home'
});

collect.getScripts(); // 返回 chunk 所需的脚本，含 async
collect.getStyles(); // 返回 chunk 所需的样式
collect.getInlineStyles().then((data) => { // 返回内联的样式
    console.log(data);
});

runtimeName一般不需要配置，使用默认值即可，如果有修改，则需要传入对应的 runtimeChunk 的名称，有多个 runtimeChunk 则传入数组，具体说明详见webpack runtime。

createAssets(chunks, publicPath)

Serialized resource path based on the webpack's chunks

const assets = createAssets(stats);
// output
{
    a: {
        js: ['/public/a.js'],
        css: ['/public/a.css']
    },
    b: {
        js: ['/public/common.js', '/public/b.js'],
        css: ['/public/common.css', '/public/b.css']
    }
}
getChunkAssets(assets, chunkName)

Output chunkNames according to matchRoutes.

getChunkAssets({
   a: {
       js: ['/public/a.js'],
       css: ['/public/a.css']
   },
   b: {
       js: ['/public/common.js', '/public/b.js'],
       css: ['/public/common.css', '/public/b.css']
   }
}, 'a');

// output

{
   js: '<script type="text/javascript" src="/public/a.js"></script>',
   css: '<link href="/public/a.css" rel="stylesheet">'
}

Keywords

reactasyncmoduletool