In the same directory as your index.html file, run npx serve. Now that you have your script, you can open the index.html file in a browser. createElement ( 'h1' ) const words = "Hello, World!" const text = document. Inside of the file, add a short, blank HTML page: Open a file called index.html in a text editor: To start, in a new directory, create a blank HTML document. In this step, you will create an HTML page, use JavaScript for dynamic activity, and start a local development server to track your changes. Step 1 - Creating an HTML Page and Inserting JavaScript A good resource for HTML and CSS is the Mozilla Developer Network.
You will also need a basic knowledge of JavaScript, which you can find in How To Code in JavaScript, along with a basic knowledge of HTML and CSS. To install this on macOS or Ubuntu 18.04, follow the steps in How To Install Node.js and Create a Local Development Environment on macOS or the Installing Using a PPA section of How To Install Node.js on Ubuntu 18.04. This tutorial was tested on Node.js version 14.17.1 and npm version 6.14.23. You will need a development environment running Node.js. Finally, you’ll learn about current tools that implement many aspects of import maps and work on all modern browsers. Next, you’ll integrate the imported code into your JavaScript and will use the third-party code without any need to download the code locally or run it through a build step. You’ll create a basic application that will display a message and you’ll create an import map that will tell your browser where to locate external code. In this tutorial, you’ll use import maps and JavaScript modules to import code without build tools. Import maps won’t completely replace build tools that perform many other valuable actions like building style sheets and handling images, but they will allow you to bootstrap new JavaScript applications quickly and easily using only the native browser functionality. The build systems are flexible enough that they can be configured to load code as needed, but the process takes some work.īuild tools are an important part of the development experience, but a spec called import maps will allow you to both import external code into your project without a build tool and it will only load the code when it is needed at runtime. The user will load the code regardless of whether they ever need to execute it. But by default most build systems will bundle all the code into one large file. After the build is set up, you can add and integrate new code with ease, but there are still some problems.įor example, you may need a library in just one part of your application, a part of the application most users may never need, like an admin page. To be able to install and use external code libraries, you’ll need a build tool that can parse the code and bundle the libraries that you import into a final format. IntroductionĮxternal libraries can add complexity to a new JavaScript project. The author selected Creative Commons to receive a donation as part of the Write for DOnations program.
0 kommentar(er)
