react-native-on-web-bundler
一、简介篇
react-native-on-web SSR打包工具,使用webpack 分别打包Server Side 以及 Client Side两端代码。
默认支持如下打包功能:
-
SSR(Server Side Render)代码拆分
webpack-code-spliter
-
图片压缩(PNG,GIF,JPG)以及高清方案
image-web-loader
-
模块别名
-
静态资源require
-
服务端渲染控制 serverResolves
-
自定义webpack,babelrc
-
默认presets react-native
-
服务端无合并打包(即 打包后产出原始目录结构方便线上调试)
webpack-node-module-plugin
-
客户端全局require.error捕获函数(window.onWebpackRequireErrorCapture)
二、安装篇
npm install react-native-web-bundler
三、打包篇
const Pack = ; //自定义打包配置文件,默认为process.cwd()/.packager.jsconst configPath = path;//是否打包同构(SSR)server部分const bundleServer = true;//是否打包客户端部分const bundleClient = true; //执行打包Pack
四、.packager.js篇
targetPort: 8080 /** * require('image!xx') 寻址目录列表 * 默认会寻找android或者ios目录或者web目录assets/images下的图片文件 * 可以追加路径 */ imageAssets: // 客户端代码打包入口文件 clientContextEntry: path // 服务端代码打包入口文件 serverContextEntry: '....' // 服务端打包是否复制node_modules到目标目录 copyNodeModules:true //额外配置babelrc 例如: (config)=> ... 或者 {persets:[...]} babelrc: //修改webpack配置 例如: (config)=> ... 或者 {loaders:[...]} webpack: //服务端同构文件载入实现 例如: {'css':(filename)=>'' } serverResolves: {} /* 静态资源设置 指定那些后缀为静态资源 默认值: [ '.bmp', '.ico', '.gif', '.jpg', '.jpeg', '.png', '.psd', '.svg', '.webp', // Image formats '.m4v', '.mov', '.mp4', '.mpeg', '.mpg', '.webm', // Video formats '.aac', '.aiff', '.caf', '.m4a', '.mp3', '.wav', // Audio formats '.html', '.pdf', // Document formats '.woff', '.woff2', '.woff', '.woff2', '.eot', '.ttf', //icon font ] */ { exts; return exts; } /** * 开发环境是否node_modules下所有文件都使用babel编译 * 如果设置成true 则无需设置es6Modules 但是会导致开发环境启动速度变慢 * 如果设置成false 当你的项目的依赖模块是es6的代码 * 可以在es6Modules 下设置白名单 */ compileAll: true /** * node_modules下需要编译成es6的模块 * 始终包含 /react-native-/ 开头的模块 * 每个想值为正则表达式 例如: /sherlock-/ 使用babel编译node_modules目录下 * 所有以sherlock-开头的模块 */ es6Modules: /** * 路由资源按需加载: * 配置案例: * 格式: path?name=routePath * path: 要拆分的js 相对路径为相对于(index.web.js所在目录) 例如: ./routers/user/login.js name: 制定在那个url.pathname下加载 例如: /user/login * 例如: ./routers/user/login.js?name=user/login * 目的: ?name=user/login 解决代码拆分造成同构checksum问题 * 原理: 当路由匹配到?name的值,会在同构时同步加载对应拆分的js 如果是客户端pushstate则异步加载 * [ * 'index=user/login', //特殊项 用于配置/对应的路由 * './routers/user/login.js?name=user/login' * ] */ spliters: /** * * 控制具体要拆分的每个文件的exports部分, * 可用来进行额外的拆分模块加载方案配置 * 例如: * code: 默认loaders的exports代码字符串 * filepath: 当前拆分的文件绝对路径 * function(code,filepath){ * return code; * } */ splitHandle:null // 别名配置 alias: 'logger': path 'app-context': path // 发布忽略列表 ignores: '.git/**/*' '.packager' '.vscode/**/*' '.happypack/**/*' 'logs/**/*' // 图片压缩配置 minOptions: contextName: '__cdnUrl__' gifsicle: interlaced: false optipng: optimizationLevel: 7 pngquant: quality: '65-90' speed: 4 mozjpeg: progressive: true quality: 65
五、.babelrc 与webpack.js
在.packager.js中没有设置webpack或者babelrc的情况下:
打包工具默认会合并index.web.js所在目录下的.babelrc文件以及webpack.js文件的配置。
六、开源许可
基于 MIT License 开源,使用代码只需说明来源,或者引用 license.txt 即可。