react-native-on-web-bundler
[![NPM version][npm-image]][npm-url]
Last updated 7 months ago by beven .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install react-native-on-web-bundler 
SYNC missed versions from official npm registry.

react-native-on-web-bundler

NPM version

一、简介篇

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 = require('react-native-web-bundler');

//自定义打包配置文件,默认为process.cwd()/.packager.js
const configPath = path.resolve('.packager.js');
//是否打包同构(SSR)server部分
const bundleServer = true;
//是否打包客户端部分
const bundleClient = true;

//执行打包
Pack.runPack(configPath,bundleServer,bundleClient)

四、.packager.js篇

  {
      targetPort: 8080,
      /**
      * require('image!xx') 寻址目录列表
      * 默认会寻找android或者ios目录或者web目录assets/images下的图片文件
      * 可以追加路径
      */
      imageAssets: [],
      // 客户端代码打包入口文件
      clientContextEntry: path.resolve('index.web.js'),
      // 服务端代码打包入口文件
      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
      ]
      */
      static: function (exts) {
          exts.push('.xx');
          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.resolve('server/framework/logger/index.js'),
          'app-context': path.resolve('server/framework/env/enviroment.js')
      },
      // 发布忽略列表
      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 即可。

Current Tags

  • 5.2.16                                ...           latest (7 months ago)

46 Versions

  • 5.2.16                                ...           7 months ago
  • 5.2.15                                ...           7 months ago
  • 5.2.14                                ...           7 months ago
  • 5.2.13                                ...           7 months ago
  • 5.2.12                                ...           7 months ago
  • 5.2.11                                ...           7 months ago
  • 5.2.10                                ...           10 months ago
  • 5.2.9                                ...           10 months ago
  • 5.2.8                                ...           10 months ago
  • 5.2.7                                ...           10 months ago
  • 5.2.6                                ...           10 months ago
  • 5.2.5                                ...           10 months ago
  • 5.2.4                                ...           a year ago
  • 5.2.3                                ...           a year ago
  • 5.2.2                                ...           a year ago
  • 5.2.1                                ...           a year ago
  • 5.2.0                                ...           a year ago
  • 5.1.9                                ...           a year ago
  • 5.1.8                                ...           a year ago
  • 5.1.7                                ...           a year ago
  • 5.1.6                                ...           a year ago
  • 5.1.5                                ...           a year ago
  • 5.1.4                                ...           a year ago
  • 5.1.3                                ...           a year ago
  • 5.1.2                                ...           a year ago
  • 5.1.1                                ...           a year ago
  • 5.1.0                                ...           a year ago
  • 5.1.0-beta.14                                ...           a year ago
  • 5.1.0-beta.13                                ...           a year ago
  • 5.1.0-beta.12                                ...           a year ago
  • 5.1.0-beta.11                                ...           a year ago
  • 5.1.0-beta.10                                ...           a year ago
  • 5.1.0-beta.9                                ...           a year ago
  • 5.1.0-beta.8                                ...           a year ago
  • 5.1.0-beta.7                                ...           a year ago
  • 5.1.0-beta.6                                ...           a year ago
  • 5.1.0-beta.5                                ...           a year ago
  • 5.1.0-beta.4                                ...           a year ago
  • 5.1.0-beta.3                                ...           a year ago
  • 5.1.0-beta.2                                ...           a year ago
  • 5.1.0-beta.0                                ...           a year ago
  • 5.1.0-alpha.4                                ...           a year ago
  • 5.1.0-alpha.3                                ...           a year ago
  • 5.1.0-alpha.2                                ...           a year ago
  • 5.1.0-alpha.1                                ...           a year ago
  • 5.1.0-alpha.0                                ...           a year ago
Maintainers (1)
Downloads
Today 0
This Week 0
This Month 0
Last Day 0
Last Week 0
Last Month 49
Dev Dependencies (0)
None
Dependents (1)

Copyright 2014 - 2017 © taobao.org |