Advertisement
Guest User

Untitled

a guest
Oct 19th, 2019
140
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 3.53 KB | None | 0 0
  1. /**
  2. * This file is the "Launch" script for running Create React App code at the command
  3. * line. It calls "@babel/register", which is a Babel utility that hijacks
  4. * the normal node "require()" function and lets Babel pre-compile imported
  5. * files into Node-compatible JS before they're executed.
  6. *
  7. * This bootstraps up the fancy CRA TypeScript/React configuration (using the
  8. * Babel config imported from "babel-preset-react-app"). Then it simply "require()"s
  9. * some other JS/TS/JSX/TSX file, and executes it.
  10. *
  11. * To execute:
  12. *
  13. * > node cracli.js
  14. *
  15. * NOTE: Another approach would be to rely on CRA's webpack configuration, modified
  16. * to include your CLI script(s) as another entry point, and the "node" target.
  17. */
  18.  
  19. // Ensure environment variables are read.
  20. // We need to tell CRA to use the "test" environment so it will make everything
  21. // command-line friendly.
  22. // @ts-ignore
  23. process.env.NODE_ENV = 'test';
  24. process.env.PUBLIC_URL = '';
  25.  
  26. const defaultResolver = require('babel-plugin-module-resolver').resolvePath;
  27.  
  28. // Makes the script crash on unhandled rejections instead of silently
  29. // ignoring them. In the future, promise rejections that are not handled will
  30. // terminate the Node.js process with a non-zero exit code.
  31. process.on('unhandledRejection', (err) => {
  32. throw err;
  33. });
  34.  
  35. const config = {
  36. // THIS LINE is the important one. "babel-preset-react-app" is the Babel
  37. // configuration that Create React App uses! Importing this, while specifying
  38. // that NODE_ENV = "test", automatically gives us the same Babel configuration
  39. // that CRA uses when executing Jest tests in the CLI.
  40. //
  41. // NOTE we still have to tweak a couple of additional things, which CRA
  42. // takes care of through Webpack on the browser-side, and through Jest configs
  43. // on the CLI.
  44. presets: ['babel-preset-react-app'],
  45.  
  46. // Tell Babel which file extensions to try to compile. (Note that it will
  47. // by default ignore files imported from node_modules, which is good.)
  48. extensions: ['.js', '.jsx', '.ts', '.tsx'],
  49.  
  50. plugins: [
  51. [
  52. 'babel-plugin-module-resolver',
  53. {
  54. // Simulate our "absolute" import paths, e.g. using
  55. // "import 'components/base/button';" instead of
  56. // "import '../../../../components/base/button';"
  57. // CRA does this by examining our tsconfig.json file and then configuring
  58. // Webpack (for browser) or a "--modules" flag (for Jest)
  59. root: ['./src/'],
  60. extensions: [
  61. // Code files
  62. '.js',
  63. '.jsx',
  64. '.ts',
  65. '.tsx',
  66. // Files to replace with empty placeholders
  67. '.scss',
  68. '.css',
  69. '.svg',
  70. '.png',
  71. ],
  72. // Ignore the CSS/SVG import syntax "import 'button.scss';"
  73. // Specifically, the import is still there, but we rewrite it to import
  74. // an empty file.
  75. resolvePath(sourcePath, currentFile, opts) {
  76. if (/\.(scss|css|svg|png)$/.test(sourcePath)) {
  77. // NOTE: Need to make an empty file called "emptyfile.js" for this to work.
  78. // TODO: Simulate CRA's ability to inline small image files as data URIs.
  79. return defaultResolver('emptyfile', currentFile, opts);
  80. } else {
  81. return defaultResolver(sourcePath, currentFile, opts);
  82. }
  83. },
  84. },
  85. ],
  86. ],
  87. };
  88.  
  89. // NOTE: Using @babel/register is convenient during development, because it recompiles
  90. // things on the fly. But for production you would probably want to compile things
  91. // and execute the compiled code.
  92. require('@babel/register')(config);
  93. require('./SOMEFILE.tsx');
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement