JavaScriptReactNative

项目结构

  • android：#Android 项目
  • ios：
  • node_modules： 项目依赖
  • app.json： 描述app信息
  • index.js： 入口文件
  • package.json: 依赖信息和版本信息
  • metro.config.js:Metro打包器的配置文件，以配置 Metro 的行为，例如设置转换器（transformer）、指定资源扩展名、设置服务器端口等。
  • babel.config.js: Babel的配置文件。Babel 是一个 JavaScript 编译器，用于将 ES6+ 代码转换为向后兼容的 JavaScript 版本，以便在当前和旧版本的浏览器或其他环境中运行。
  • tsconfig.json：指定编译TypeScript代码所需的根文件和编译器选项，一个项目中可能会有多个tsconfig.json文件，用于不同的环境。tsc -p tsconfig_xxx.json指定不同的配置文件
  • jsconfig.json：定义JS项目的行为，主要改善编辑器的代码智能感知功能
  • jest.config.js：Jest的配置文件。Jest 是一个 JavaScript 测试框架，用于编写和运行测试。
  • .eslintrc.js或.eslintrc.json：ESLint的配置文件。ESLint 是一个用于识别和报告 ECMAScript/JavaScript 代码中的模式的工具，以确保代码的一致性和避免错误。
  • .prettierrc.js或.prettierrc.json：Prettier的配置文件。Prettier 是一个代码格式化工具，用于格式化代码以确保代码的一致性。

tsconfig.json

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
{
  "compilerOptions": {
    /* Basic Options */
    "target": "es6",                          /* 设置ECMAScript目标版本 Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017','ES2018' or 'ESNEXT'. */
    "module": "commonjs",                     /* 指定生成哪个模块系统 Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */
    // "lib": [],                             /* Specify library files to be included in the compilation. */
    "allowJs": true,                       /* Allow javascript files to be compiled. */
    // "checkJs": true,                       /* Report errors in .js files. */
    "jsx": "react",                           /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */
    // "declaration": true,                   /* Generates corresponding '.d.ts' file. */
    // "declarationMap": true,                /* Generates a sourcemap for each corresponding '.d.ts' file. */
    // "sourceMap": true,                     /* Generates corresponding '.map' file. */
    // "outFile": "./",                       /* Concatenate and emit output to single file. */
    // "outDir": "./",                        /* Redirect output structure to the directory. */
    // "rootDir": "./",                       /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */
    // "composite": true,                     /* Enable project compilation */
    // "removeComments": true,                /* Do not emit comments to output. */
    // "noEmit": true,                        /* Do not emit outputs. */
    // "importHelpers": true,                 /* Import emit helpers from 'tslib'. */
    // "downlevelIteration": true,            /* Provide full support for iterables in 'for-of', spread, and destructuring when targeting 'ES5' or 'ES3'. */
    // "isolatedModules": true,               /* Transpile each file as a separate module (similar to 'ts.transpileModule'). */

    /* Strict Type-Checking Options */
    "strict": true,                           /* 严格类型检查选项 Enable all strict type-checking options. */
    "noImplicitAny": false,                 /* Raise error on expressions and declarations with an implied 'any' type. */
    // "strictNullChecks": true,              /* Enable strict null checks. */
    // "strictFunctionTypes": true,           /* Enable strict checking of function types. */
    // "strictBindCallApply": true,           /* Enable strict 'bind', 'call', and 'apply' methods on functions. */
    // "strictPropertyInitialization": true,  /* Enable strict checking of property initialization in classes. */
    // "noImplicitThis": true,                /* Raise error on 'this' expressions with an implied 'any' type. */
    // "alwaysStrict": true,                  /* Parse in strict mode and emit "use strict" for each source file. */

    /* Additional Checks */
    // "noUnusedLocals": true,                /* Report errors on unused locals. */
    // "noUnusedParameters": true,            /* Report errors on unused parameters. */
    // "noImplicitReturns": true,             /* Report error when not all code paths in function return a value. */
    // "noFallthroughCasesInSwitch": true,    /* Report errors for fallthrough cases in switch statement. */

    /* Module Resolution Options */
    // "moduleResolution": "node",            /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */
    "baseUrl": "./",                       /* Base directory to resolve non-absolute module names. */
    "paths": {             /* 设置模块名到文件路径的映射  */
      "@app": ["./"],
      "@app/*": ["./*"],
      "@common": ["module_xxx/lib"],
      "@common/*": ["module_xxx/lib/*"]
    },                           /* A series of entries which re-map imports to lookup locations relative to the 'baseUrl'. */
    // "rootDirs": [],                        /* List of root folders whose combined content represents the structure of the project at runtime. */
    // "typeRoots": [],                       /* List of folders to include type definitions from. */
    // "types": [],                           /* Type declaration files to be included in compilation. */
    "allowSyntheticDefaultImports": true,  /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */
    "esModuleInterop": true,                   /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */
    // "preserveSymlinks": true,              /* Do not resolve the real path of symlinks. */

    /* Source Map Options */
    // "sourceRoot": "",                      /* Specify the location where debugger should locate TypeScript files instead of source locations. */
    // "mapRoot": "",                         /* Specify the location where debugger should locate map files instead of generated locations. */
    // "inlineSourceMap": true,               /* Emit a single file with source maps instead of having a separate file. */
    // "inlineSources": true,                 /* Emit the source alongside the sourcemaps within a single file; requires '--inlineSourceMap' or '--sourceMap' to be set. */

    /* Experimental Options */
    // "experimentalDecorators": true,        /* Enables experimental support for ES7 decorators. */
    // "emitDecoratorMetadata": true,         /* Enables experimental support for emitting type metadata for decorators. */
    "lib": ["es2015", "es2017", "es2018.promise"]
  },
  "exclude": [
    "node_modules"
  ]
}


jsconfig.json

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

{
  "compilerOptions": { /* 控制编译过程 */
    "target": "es6", /* 指定ECMAScript目标版本 */
    "module": "commonjs", /* 指定生成哪个模块系统 */
    "sourceMap": true,
    "strict": true,
    "noImplicitAny": false,
    "allowSyntheticDefaultImports": true, /* 允许从没有默认导出的模块进行默认导入。这不影响代码输出，只是类型检查。 */
    "esModuleInterop": true, /* 启用CommonJS和ES模块之间的互操作性。这个选项会隐含地设置 allowSyntheticDefaultImports 为 true。 */
    "baseUrl": ".",
    "jsx": "react-native",
    "paths": {
      "@app": ["./"],
      "@app/*": ["./*"]
    }
  },
  "include": [ /* 指定哪些文件被包含在项目中 */
    "src/**/*"
  ],
  "exclude": [ /* 排除哪些文件 */
    "node_modules", "babel.config.js", "metro.config.js"
  ]
}


babel.config.js

用于将ES6+代码转换为向后兼容的JS版本，在 babel.config.js 文件中，你可以指定一系列的插件和预设，以控制 Babel 的转换过程。例如，你可以使用 @babel/preset-env 预设来自动转换 ES6+ 代码，或者使用 @babel/plugin-transform-runtime 插件来自动优化你的代码。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

module.exports = api => {
  api.cache.forever()
  const plugins = [
    ["module-resolver", {
      root: ["."],
      extensions: ['.ios.js', '.android.js', '.js', '.ts', '.tsx', '.json'],
      alias: {
        "@app": ["./"],
        "@app/*": ["./*"]
      }
    }]
  ]
  return {
    presets: ['@babel/preset-env', 'module:metro-react-native-babel-preset'], //指定定义好的插件集合
    plugins: plugins //指定一组插件
  }
};


metro.config.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

module.exports = {
  resolver: { //
    assetExts: ['bmp', 'gif', 'jpg', 'jpeg', 'png', 'svg'], //指定应该被视为资源的文件扩展名
    sourceExts: ['js', 'json', 'ts', 'tsx', 'jsx'], //指定应该被视为源代码的文件扩展名
  },
  server: {
    port: 8081, //配置服务端口
  },
  watchFolders: ['/path/to/folder'], //监视额外的文件夹
  transformer: { //指定转换器
    getTransformOptions: async () => ({
      transform: {
        experimentalImportSupport: false, //禁用实验性的import支持
        inlineRequires: true,
      },
    }),
  },
};