{"revision":"c10276e953456835cdbb1f3a60d58ae1980be353","document":{"id":2400,"path":"application-development/servicenow-ide-family-release/create-use-javascript-modules-ide.md","title":"Create and use JavaScript modules in applications in the ServiceNow IDE","bundle":null,"doc_type":null,"release":"australia","body":"\n# Create and use JavaScript modules in applications in the ServiceNow IDE\n\nOptimize your codebase by defining reusable code blocks with JavaScript modules in the ServiceNow IDE.\n\n## Before you begin\n\nCreate, convert, or clone an application and add it to your workspace. For more information, see [Adding applications in ServiceNow IDE](https://raw.githubusercontent.com/ServiceNow/ServiceNowDocs/australia/markdown/australia/application-development/servicenow-ide-family-release/creating-applications-servicenow-ide.md).\n\n**Note:** To use TypeScript in modules, select TypeScript as the template type when creating an application.\n\nRole required: admin\n\n## About this task\n\nTo learn about support for using JavaScript modules in scoped applications, including some limitations, see [JavaScript modules and third-party libraries](https://raw.githubusercontent.com/ServiceNow/ServiceNowDocs/australia/markdown/australia/application-development/javascript-modules-third-party-libraries.md). For general information about the syntax used to create JavaScript modules, see the [JavaScript modules](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules) page on the MDN Web Docs website.\n\n**Note:** With ServiceNow Otto for Code, you can use the Code autocomplete skill to generate code suggestions for module scripts. For more information, see [Generate code with autocomplete](https://raw.githubusercontent.com/ServiceNow/ServiceNowDocs/australia/markdown/api-reference/scripts/generate-code-with-autocomplete.md).\n\n## Procedure\n\n1. Navigate to **All** > **App Development** > **ServiceNow IDE**.\n\n2. Open a workspace with an application.\n\n3. From the Activity Bar, select the File Explorer view \\(\\[Omitted image \"servicenow-ide-file-explorer-icon.png\"\\] Alt text: File Explorer\\).\n\n4. In the `src/server` directory of the application, create a JavaScript or TypeScript file to contain the module code you want to reuse.\n\n5. Import server APIs or script includes to call them from your module.\n\n Glide APIs can be imported from the `@servicenow/glide` package or their namespace in the package. Script includes can be imported from their application scope or the global scope in the `@servicenow/glide` package.\n\n For example:\n\n ```javascript\n import { API } from \"@servicenow/glide\";\n import { API } from \"@servicenow/glide/\";\n import { ScriptInclude } from \"@servicenow/glide/\";\n import { global } from \"@servicenow/glide/global\";\n ```\n\n6. In the module, identify the code to export with export statements.\n\n You can use a named export or default export. Named exports can be variables, constants, functions, or classes whereas default exports can be functions or classes only.\n\n The following example is one way of adding a named export for multiple features \\(a function and a variable\\) in a module:\n\n ```javascript\n export { myFunction, myVariable };\n \n ```\n\n7. Use code from the exported module in other modules or server-side scripts.\n\n\n
\n\nFile\n\n\n\nSteps\n\n
\n\n**Module**\n\n\n\n1. From the `src/server` directory, create or open a JavaScript module.\n2. Import the module code with import statements.\n\nThe following example is one way that you could import an exported feature in a module:\n\n ```javascript\nimport { feature } from \"path/to/module\";\n\n ```\n\n**Note:** To import code from one TypeScript file to another TypeScript file, you must include the `.ts` file extension. For example, `import { feature } from './module.ts'`.\n\n3. Call the module code from this module to reuse it.\n\n\n
\n\n**Server-side script in source code**\n\n\n\n1. Create or open the definition of application metadata that includes a server-side script, such as a business rule, in source code \\(`.now.ts` file\\).\n2. In the script property, import and call the module code to reuse it.\n\nYou can import a function or provide an inline script.\n\n - Import an exported function, function expression, or default function. For example:\n\n ```javascript\nscript: FunctionExport,\n ```\n\n - Inline scripts must use require statements to import the module code. For example:\n\n ```javascript\nscript: `\n const { process } = require('./dist/modules/server/handler.js')\n process(request, response)`,\n ```\n\nFor more information about server-side scripts in source code, see [ServiceNow Fluent API reference](https://raw.githubusercontent.com/ServiceNow/ServiceNowDocs/australia/markdown/australia/application-development/servicenow-sdk/servicenow-fluent-api-reference.md).\n\n
\n\n**Server-side script record**\n\n\n\n1. Open the record for a server-side script, such as a business rule.\n2. Import the module code with require statements.\n\nThe following example is one way that you could import an exported feature in a script:\n\n ```javascript\nconst { feature } = require(\"path/to/module\");\n\n ```\n\n3. Call the module code from this script to reuse it.\n\n\n
8. Save your changes.\n\n9. From the Status Bar, select **Build and Install**.\n\n \\[Omitted image \"servicenow-ide-build-icon.png\"\\] Alt text: Build and deploy\n\n The active file that's open in the editor determines which application to build. If no files are open, select the application to build when prompted.\n\n After building, the modules are added to the EcmaScript Module \\[sys\\_module\\] table.\n\n\n## What to do next\n\nTo use third-party libraries in a JavaScript module, see [Use third-party libraries in applications in the ServiceNow IDE](https://raw.githubusercontent.com/ServiceNow/ServiceNowDocs/australia/markdown/australia/application-development/servicenow-ide-family-release/use-third-party-libraries-ide.md).\n\n**Parent Topic:**[Developing applications with the ServiceNow IDE](https://raw.githubusercontent.com/ServiceNow/ServiceNowDocs/australia/markdown/australia/application-development/servicenow-ide-family-release/developing-applications-servicenow-ide.md)\n\n**Related topics** \n\n\n[JavaScript modules and third-party libraries](https://raw.githubusercontent.com/ServiceNow/ServiceNowDocs/australia/markdown/australia/application-development/javascript-modules-third-party-libraries.md)\n\n"}}