项目作者: MrGaoGang

项目描述 :
create file hash in react-native
高级语言: TypeScript
项目地址: git://github.com/MrGaoGang/react-native-file-hash-plugin.git
创建时间: 2020-10-14T01:51:41Z
项目社区:https://github.com/MrGaoGang/react-native-file-hash-plugin

开源协议:MIT License

下载


react-native-file-hash-plugin

create file hash and transform asset in react-native bundle! when you use react-native run-ios/run-android it will not work, it is just use in react-native bundle ...

Installation

npm

  1. npm install --save-dev react-native-file-hash-plugin

metro

Add react-native-file-hash-plugin to the list of assetPlugins in your metro.config.js file under the transformer section.

for example :

  1. /**
  2. * Metro configuration for React Native
  3. * https://github.com/facebook/react-native
  4. *
  5. * @format
  6. */
  7. module.exports = {
  8. transformer: {
  9. getTransformOptions: async () => ({
  10. transform: {
  11. experimentalImportSupport: false,
  12. inlineRequires: false,
  13. },
  14. }),
  15. assetPlugins: ["react-native-file-hash-plugin"],
  16. },
  17. };

Configuration

You can configure the plugin behaviour through the optional fileHashPlugin field in your metro.config.js file under the transformer section.

For example:

  1. module.exports = {
  2. transformer: {
  3. getTransformOptions: async () => ({
  4. transform: {
  5. experimentalImportSupport: false,
  6. inlineRequires: false,
  7. },
  8. }),
  9. assetPlugins: ["react-native-file-hash-plugin"],
  10. },
  11. fileHashPlugin: {
  12. // optional
  13. // the file type to hash,default is png,jpeg,jpg,gif
  14. types: ["png", "jpeg", "jpg", "gif"],
  15. // optional
  16. // the input params is file name and file path; the output is hash string ,default is react-native hash
  17. hashFunction: (fileName, path) => {
  18. return "your hash";
  19. },
  20. // optional
  21. // the ignore file path regex
  22. ignoreRegex: null,
  23. // optional
  24. // add external options to asset, resturn must be object
  25. externalOptions: (fileName, path) => {
  26. return {
  27. key: "mrgaogang",
  28. };
  29. },
  30. },
  31. };

Output

example:

  1. react-native bundle --entry-file index.js --bundle-output ./bundle/ios.bundle --platform ios --reset-cache --assets-dest ./bundle --dev false

suggest to add --reset-cache params.

will output like this, and the file will add hash string.

  1. ├─assets
  2. │ ├─app.json
  3. │ ├─img
  4. │ │ └─success-c64ef9278d09de068787ded3a56ed560.png
  5. │ └─node_modules
  6. │  └─react-native
  7. │  └─Libraries
  8. └─ios.bundle

Others

if you want to transform Images, also you can use Image.resolveAssetSource.setCustomSourceTransformer,

  1. Image.resolveAssetSource.setCustomSourceTransformer((resolver) => {
  2. // do any thing you want
  3. if (Platform.OS === 'android') {
  4. return this.isLoadedFromFileSystem()
  5. ? this.drawableFolderInBundle()
  6. : this.resourceIdentifierWithoutScale();
  7. } else {
  8. return this.scaledAssetURLNearBundle();
  9. }
  10. });

the resolver is:

  1. // node_modules/react-native/Libraries/Image/AssetSourceResolver.js
  2. serverUrl: ?string;
  3. // where the jsbundle is being run from
  4. jsbundleUrl: ?string;
  5. // the asset to resolve
  6. asset: PackagerAsset;
  7. // PackagerAsset is
  8. export type PackagerAsset = {
  9. +__packager_asset: boolean,
  10. +fileSystemLocation: string,
  11. +httpServerLocation: string,
  12. +width: ?number,
  13. +height: ?number,
  14. +scales: Array<number>,
  15. +hash: string,
  16. +name: string,
  17. +type: string,
  18. ...
  19. };