2016-11-24 44 views
2

我有一個庫,我想在已被瀏覽的React Native項目中使用。當我需要庫時,所有內部require()調用都會被劫持,而不是解決文件內部的依賴性問題,包括React Native試圖解決它們,從而導致它中斷。我想知道在React Native項目中包含browserified庫的正確方法是什麼。如何在React Native中使用browserified庫

+0

爲什麼不使用npm版本? –

+0

有問題的庫取決於像「事件」或「域」這樣的內置節點庫,雖然像「事件」這樣的東西可以作爲依賴添加並且正常工作,但「域」實際上是「域瀏覽器」,因此需要雄蕊需要被諸如browserify之類的東西取代。 – stanlemon

回答

-1

我想出的最佳解決方案是切換到webpack。正如在一個評論中暗示的那樣,圖書館需要通過諸如瀏覽器或網絡包之類的東西進行處理,因爲它具有諸如「域」之類的節點內建命令的優勢。問題在於browserify聲明瞭一個require()方法,該方法在React Native裏面並不好,它也有一個require()方法。切換到webpack解決了這個問題,因爲它們以不同的方式命名它們的require()__webpack_require(),這使得處理後的版本能夠在React Native內正確工作。

1

恕我直言比browserifying節點庫中的更好的方法是

  • 使用節點內置插件一樣cryptostream,等browserify polyfills,
  • a small Babel transformrequire()電話從crypto重寫crypto-browserify等,
  • 和React Native打包程序本身將其打包。

ReactNativify回購示範如何做到這一點。

2

如果您決定使用由ReactNativify通知的方法,通過Philipp von Weitershausen的建議,那麼你應該知道的一些注意事項和技巧(原貼here):

1)我跟着我的發現建議問題列表和分裂transformer.js分爲兩個部分:

transformers.js(在/config和調用從rn-cli.config.js):

const babelTransformer = require('./babel-transformer'); 

module.exports.transform = function(src, filename, options) { 

    const extension = String(filename.slice(filename.lastIndexOf('.'))); 
    let result; 

    try { 

     result = babelTransformer(src, filename); 

    } catch (e) { 

     throw new Error(e); 
     return; 
    } 

    return { 
     ast: result.ast, 
     code: result.code, 
     map: result.map, 
     filename 
    }; 
}; 

巴貝爾-transformer.js(也在/config):

'use strict' 

const babel = require('babel-core'); 

/** 
* This is your `.babelrc` equivalent. 
*/ 
const babelRC = { 
    presets: ['react-native'], 
    plugins: [ 

    // The following plugin will rewrite imports. Reimplementations of node 
    // libraries such as `assert`, `buffer`, etc. will be picked up 
    // automatically by the React Native packager. All other built-in node 
    // libraries get rewritten to their browserify counterpart. 

    [require('babel-plugin-rewrite-require'), { 
     aliases: { 
      constants: 'constants-browserify', 
      crypto: 'react-native-crypto', 
      dns: 'mock/dns', 
      domain: 'domain-browser', 
      fs: 'mock/empty', 
      http: 'stream-http', 
      https: 'https-browserify', 
      net: 'mock/net', 
      os: 'os-browserify/browser', 
      path: 'path-browserify', 
      pbkdf2: 'react-native-pbkdf2-shim', 
      process: 'process/browser', 
      querystring: 'querystring-es3', 
      stream: 'stream-browserify', 
      _stream_duplex: 'readable-stream/duplex', 
      _stream_passthrough: 'readable-stream/passthrough', 
      _stream_readable: 'readable-stream/readable', 
      _stream_transform: 'readable-stream/transform', 
      _stream_writable: 'readable-stream/writable', 
      sys: 'util', 
      timers: 'timers-browserify', 
      tls: 'mock/tls', 
      tty: 'tty-browserify', 
      vm: 'vm-browserify', 
      zlib: 'browserify-zlib' 
     }, 
     throwForNonStringLiteral: true 
    }], 

    // Instead of the above you could also do the rewriting like this: 

    ["module-resolver", { 
     "alias": { 
     "mock": "./config/mock", 
     "sodium-universal": "libsodium" 
     } 
    }] 
    ] 
}; 

module.exports = (src, filename) => { 

    const babelConfig = Object.assign({}, babelRC, { 
    filename, 
    sourceFileName: filename 
    }); 

    const result = babel.transform(src, babelConfig); 
    return { 
    ast: result.ast, 
    code: result.code, 
    map: result.map, 
    filename 
    }; 
} 

2)由於可以在上面的代碼中看到的,我也使用babel-plugin-module-resolver證實。

注意,我將使用此插件而不是一個ReactNative使用。它可以讓你引用本地文件,並用適當的引號書面允許像非JS兼容的名字「鈉鹽萬能」

注2或去.babelrc解決方案(也許乾淨)如本意見所列:https://github.com/philikon/ReactNativify/issues/4#issuecomment-312136794

3)我發現我仍然需要在我的項目的根目錄中使用.babelrc以使我的Jest測試正常工作。有關詳細信息,請參閱此問題:https://github.com/philikon/ReactNativify/issues/8

+0

謝謝,我按你的要求做了。如果您批准,您可以刪除遞減投票。 –

+1

建議改善,然後向下投票和離開是有點粗魯@loki .. –

相關問題