في هذا المنشور ، أقوم بخدش سطح node-webkit ، من خلال نشر وبناء حزمة لتطبيق ويب ، على Mac و Windows.
تحذير: هذا المنشور قديم وقد لا يعكس حالة الفن الحالية
أولاً ، إخلاء المسؤولية: لن أغطي الجريNode.jsرمز ، ولكن فقط قم بتعبئة تطبيق ويب للتشغيل على نظامي التشغيل Mac و Windows. Linux هو أيضًا جزء من اللعبة ، لكنني لا أغطيها.
العقدة webkitهو ، هكذا يطلق عليه منشئوه ، وقت تشغيل الويب.
يعتمد على Chromium (على الرغم من اسمه) و node.js. يتيح لنا استدعاء كود node.js والوحدات النمطية مباشرة من DOM ، ويفتح إمكانيات جديدة للتطبيقات الأصلية المكتوبة باستخدام تقنيات الويب.
في هذا المنشور ، أقوم فقط بخدش السطح منه ، من خلال نشر وبناء حزمة لتطبيق ويب ، على نظامي التشغيل Mac و Windows ، تمامًا كما لو كان تطبيقًا أصليًا.
قم بتشغيل التطبيق
أولاً ، دعنا نقدم ملف index.html
<html>
<body>
<p>test</p>
</body>
</html>We also need a package.json file
{
"name": "My Web App",
"main": "index.html"
}That’s it from the code-side! Really.
Now to run the app, download the runtime from the site https://github.com/rogerwang/node-webkit for your specific platform, and then you can call
1)
$ alias nw="open -n -a node-webkit '/PATH_TO_APP_DIRECTORY/'
$ ./nw
cd /PATH_TO_APP_DIRECTORY/
zip -r app.nw ./
You have now created a package of the app. You can double-click it on Mac, or drag over the node-webkit application on Windows, and it will run.
There are a lot of options you can now add to the package.json file https://github.com/rogerwang/node-webkit/wiki/Manifest-format, but that’s a start. You can for example hide the top bar with address and debugger, set the menu items, and decide pretty much all you need.
Now, let’s dig into packaging and distributing an app.
Package the app on the Mac
Unzip the node-webkit.app package downloaded from the node-webkit site.
Right-click, “Show package content”, go in Contents/Resources and copy there the app.nw file built with
$ zip -r app.nw ./
or alternatively, copy the app directory there and name it “app.nw”.
That’s it! You can now change the default icon and properties in the Contents/Info.plist file.
Package the app on Windows
Download the latest Windows package.
Copy the .nw file built using Zip in the package directory, alongside nw.exe, and call it app.nw
Run the command
copy /b nw.exe+app.nw app.exe
You can now remove the nw.exe & app.nw files, zip the directory and distribute the package. Your users will need to download the zip file, uncompress and then run the app.exe file contained.
More devtools tutorials:
- Introduction to Yeoman
- Bower, the browser package manager
- Introduction to Frontend Testing
- Using node-webkit to create a Desktop App
- VS Code: use language-specific settings
- Introduction to Webpack
- A short and simple guide to Babel
- An introduction to Yarn
- Overview of the Browser DevTools
- Format your code with Prettier
- Keep your code clean with ESLint
- A list of cool Chrome DevTools Tips and Tricks
- Testing JavaScript with Jest
- How to use Visual Studio Code
- Introduction to Electron
- Parcel, a simpler webpack
- An Emmet reference for HTML
- The V8 JavaScript Engine
- Configuring VS Code
- Configuring the macOS command line
- How to disable an ESLint rule
- How to open VS Code from the command line
- How to set up hot reload on Electron