From 8df02963af3d86a814b9b03a741286a960ef01ba Mon Sep 17 00:00:00 2001 From: Ian Schmitz Date: Thu, 18 Apr 2019 20:19:37 -0700 Subject: [PATCH 1/4] Add baseUrl documentation --- docusaurus/docs/importing-a-component.md | 25 ++++++++++++++++++++++++ 1 file changed, 25 insertions(+) diff --git a/docusaurus/docs/importing-a-component.md b/docusaurus/docs/importing-a-component.md index 82ca5487a9c..d71e23df561 100644 --- a/docusaurus/docs/importing-a-component.md +++ b/docusaurus/docs/importing-a-component.md @@ -48,3 +48,28 @@ Learn more about ES6 modules: - [When to use the curly braces?](https://stackoverflow.com/questions/36795819/react-native-es-6-when-should-i-use-curly-braces-for-import/36796281#36796281) - [Exploring ES6: Modules](http://exploringjs.com/es6/ch_modules.html) - [Understanding ES6: Modules](https://leanpub.com/understandinges6/read#leanpub-auto-encapsulating-code-with-modules) + +## Absolute Imports + +You can configure your application to support importing modules using absolute paths. This can be done by configuring a `jsconfig.json` or `tsconfig.json` file in the root of your project. If you're using TypeScript in your project, you will already have the `tsconfig.json` file present. + +Below is an example `jsconfig.json` file for a JavaScript project. You can create the file if it doesn't already exist: + +```json +{ + "compilerOptions": { + "baseUrl": "src" + }, + "include": ["src/**/*"] +} +``` + +If you're using TypeScript, you can configure the `baseUrl` setting inside the `compilerOptions` of your project's `tsconfig.json` file. + +Now that you've configured your project to support absolute imports, if you wanted to import a module located at `src/components/Button.js` for example, you can now import the module like so: + +```js +import Button from 'components/Button'; +``` + +For more information on these configuration files, see the [jsconfig.json reference](https://code.visualstudio.com/docs/languages/jsconfig) and [tsconfig.json reference](https://www.typescriptlang.org/docs/handbook/tsconfig-json.html) documentation. From cad55430dd71b183dd86741fb00ad3e30d822e85 Mon Sep 17 00:00:00 2001 From: Ian Sutherland Date: Thu, 18 Apr 2019 20:31:09 -0700 Subject: [PATCH 2/4] Update docusaurus/docs/importing-a-component.md Co-Authored-By: ianschmitz --- docusaurus/docs/importing-a-component.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docusaurus/docs/importing-a-component.md b/docusaurus/docs/importing-a-component.md index d71e23df561..fcb13983fe2 100644 --- a/docusaurus/docs/importing-a-component.md +++ b/docusaurus/docs/importing-a-component.md @@ -51,7 +51,7 @@ Learn more about ES6 modules: ## Absolute Imports -You can configure your application to support importing modules using absolute paths. This can be done by configuring a `jsconfig.json` or `tsconfig.json` file in the root of your project. If you're using TypeScript in your project, you will already have the `tsconfig.json` file present. +You can configure your application to support importing modules using absolute paths. This can be done by configuring a `jsconfig.json` or `tsconfig.json` file in the root of your project. If you're using TypeScript in your project, you will already have a `tsconfig.json` file. Below is an example `jsconfig.json` file for a JavaScript project. You can create the file if it doesn't already exist: From 247a66bbc3a5ec542d68fa38a87ebbb8a2b6c6fe Mon Sep 17 00:00:00 2001 From: Ian Sutherland Date: Thu, 18 Apr 2019 20:31:27 -0700 Subject: [PATCH 3/4] Update docusaurus/docs/importing-a-component.md Co-Authored-By: ianschmitz --- docusaurus/docs/importing-a-component.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docusaurus/docs/importing-a-component.md b/docusaurus/docs/importing-a-component.md index fcb13983fe2..3845b0ccacb 100644 --- a/docusaurus/docs/importing-a-component.md +++ b/docusaurus/docs/importing-a-component.md @@ -66,7 +66,7 @@ Below is an example `jsconfig.json` file for a JavaScript project. You can creat If you're using TypeScript, you can configure the `baseUrl` setting inside the `compilerOptions` of your project's `tsconfig.json` file. -Now that you've configured your project to support absolute imports, if you wanted to import a module located at `src/components/Button.js` for example, you can now import the module like so: +Now that you've configured your project to support absolute imports, if you want to import a module located at `src/components/Button.js`, you can import the module like so: ```js import Button from 'components/Button'; From fe7b664ae59f9581e9cd22d6ebecd33c1b5e032f Mon Sep 17 00:00:00 2001 From: Ian Schmitz Date: Thu, 18 Apr 2019 20:41:50 -0700 Subject: [PATCH 4/4] Simplify include to match default tsconfig.json --- docusaurus/docs/importing-a-component.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docusaurus/docs/importing-a-component.md b/docusaurus/docs/importing-a-component.md index 3845b0ccacb..a04670a9a0a 100644 --- a/docusaurus/docs/importing-a-component.md +++ b/docusaurus/docs/importing-a-component.md @@ -60,7 +60,7 @@ Below is an example `jsconfig.json` file for a JavaScript project. You can creat "compilerOptions": { "baseUrl": "src" }, - "include": ["src/**/*"] + "include": ["src"] } ```