Задача этой недели была вдохновлена тестом на кодирование, который я получил в понедельник. Как и в случае с музыкальным приложением в прошлом блоге, мне нужно было получать изображения из API и отображать их по-разному. Но была одна загвоздка - мне нужно было сделать это без моего любимого React, и ему нужно было, чтобы он открывался при запуске npm start из корня.
Оказывается, я не так хорошо разбирался в NPM, как думал. Как заставить все работать с нуля? Как мне это сделать без бэкэнда Rails? После просмотра тонны информации мне понадобились два ключевых файла, чтобы заставить его работать:
Я покажу вам простой пример.
Сначала создайте простой файл index.html:
<!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="index.css"> </head> <body> <div id="main"> <h1>Hello world!</h1> <btn id="btn" onClick="clickHandle()">Click me</btn> </div> <script src="index.js"></script> </body> </html>
Мы свяжем это с таблицей стилей CSS, покажем приветственное сообщение, добавим кнопку для нажатия и свяжем ее с файлом js. Теперь посмотрим на index.js:
function clickHandle(event){ alert("Welcome to the site!") }
И наш index.css:
html { width: 100%; height: 100%; } body { background: linear-gradient(to left,lightblue,lightgreen); background-repeat: no-repeat; background-size: cover; font-family: "Arial"; }
Теперь, когда вы дважды щелкните файл index.html, он должен открыться в браузере и работать нормально:
Чтобы запустить его при запуске npm, потребуется всего пара шагов.
Вам потребуется создать файл package.json. Вы можете следовать инструкциям здесь. После запуска npm init мой файл package.json выглядит так:
{ "name": "first-app", "version": "1.0.0", "description": "example for blog", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "author": "Kelly", "license": "ISC" }
На данный момент мы можем убрать строку test из скриптов (хотя тестирование с Mocha - это довольно весело), но нам нужно добавить начало:
{ "name": "first-app", "version": "1.0.0", "description": "example for blog", "main": "index.js", "scripts": { "start": "open http://localhost:8080 && node server.js" }, "author": "Kelly", "license": "ISC" }
Это сообщает приложению, что при вводе npm start ему необходимо открыть вкладку в вашем браузере по адресу localhost: (любой порт, который вы хотите) и использовать server.js для запуска. все. Теперь перейдем к server.js!
read about require() here: const http = require('http'); const fs = require('fs'); declare writable global variables: let html; let css; let js; use fs.readFile to assign the global variables above: fs.readFile('./index.html', function (err, data) { if (err) { throw err; } html = data; }); fs.readFile('./index.css', function (err, data) { if (err) { throw err; } css = data; }); fs.readFile('./index.js', function (err, data) { if (err) { throw err; } js = data; }); create the server - look to see if the request url contains either CSS or Javascript, and return the appropriate information: http.createServer((req, res) => { res.statusCode = 200; if(req.url.indexOf('.css') != -1){ res.writeHead(200, {'Content-Type': 'text/css'}); res.write(css); res.end(); return; } if(req.url.indexOf('index.js') != -1){ res.writeHead(200, {'Content-Type': 'text/javascript'}); res.write(js); res.end(); return; } res.writeHeader(200, {"Content-Type": "text/html"}); res.write(html); res.end(); }).listen(8080); ^ listen for your assigned port
Следует отметить, что при этом запускаются только те файлы, которые вы ему указали. Поэтому, если у вас есть второй файл javascript, вам необходимо добавить его как в свои сценарии index.html, так и в файл server.js.
Вот и все! Вы должны иметь возможность войти в свой корневой каталог с компакт-диска, запустить npm i && npm start и увидеть, как происходит волшебство.
Спасибо за прочтение!