Electron中git, npm,webpack使用

开始学习Electron的时候用到git, 记录学习一下, 学习地址是: https://zhuanlan.zhihu.com/p/20225295?columnSlug=FrontendMagazine

1. 用git的时候进入一个目录是 cd D:test  可以进入d盘的文件路劲,跟git没关系

2. 打开 Git bash here

Jason Zeng@DESKTOP-ODB5KQB MINGW32 /e/Jason Zeng/Desktop/Electron
$ git clone https://github.com/bojzi/sound-machine-electron-guide.git                       git克隆远程仓库
Cloning into 'sound-machine-electron-guide'...
remote: Counting objects: 107, done.
remote: Total 107 (delta 0), reused 0 (delta 0), pack-reused 107
Receiving objects: 100% (107/107), 3.37 MiB | 518.00 KiB/s, done.
Resolving deltas: 100% (27/27), done.

Jason Zeng@DESKTOP-ODB5KQB MINGW32 /e/Jason Zeng/Desktop/Electron
$ cd sound-machine-electron-guide                          git 转入目录

Jason Zeng@DESKTOP-ODB5KQB MINGW32 /e/Jason Zeng/Desktop/Electron/sound-machine-electron-guide (master)
$ git tag                                         git 查看tag
00-blank-repository
01-start-project
02-basic-sound-machine
03-closable-sound-machine
04-global-shortcuts-bound
05-settings-window-working
06-shortcuts-configurable
07-ready-for-packaging

Jason Zeng@DESKTOP-ODB5KQB MINGW32 /e/Jason Zeng/Desktop/Electron/sound-machine-electron-guide (master)

$ git checkout 00-blank-repository

Note: checking out '00-blank-repository'.

You are in 'detached HEAD' state. You can look around, make experimental
changes and commit them, and you can discard any commits you make in this
state without impacting any branches by performing another checkout.

If you want to create a new branch to retain commits you create, you may
do so (now or later) by using -b with the checkout command again. Example:

git checkout -b <new-branch-name>

HEAD is now at aac9eb8... blank repository

 

 

 3. 用node.js command prompt(把Node命令和npm命令都结合的环境)也很蛋疼,要切换一个目录,先要某个盘符下, 如E:后才能进入相应的文件夹, 用相对路劲的方式, 还默认进入了E盘下的第一个文件夹,服了!!!!!!

C:\Windows\System32>E:

E:\WorkSpace>    

E:\WorkSpace>cd ..\SoftwareDistribution

E:\SoftwareDistribution>

E:\SoftwareDistribution>cd ..\Jason Zeng\Desktop\Electron\sound-machine-electron-guide

E:\Jason Zeng\Desktop\Electron\sound-machine-electron-guide>

4. 用node命令框时遇到抛出异常的时候用: ctrl+c 可以退出执行的环境

 

5. npm start的时候遇到两个bug

  1. cannot find module 'app', 把下面的红字改成绿色的即可,错误原因:使用的Electron版本太新,这种API在 Electron v1.0.0 中被移除了。再出现 “Cannot find module ……” 的错误,基本上全是因为require直接引入模块了

    // var app = require('app');
    // var BrowserWindow = require('browser-window');

    const electron = require('electron');
    const app = electron.app;
    const BrowserWindow = electron.BrowserWindow;

    

      2.  loadUrl is not working in electron:   把 loadUrl改成loadURL就可以了

 

界面如下:

 

 

6. nom可以通过package.json来下载依赖模块

  1.package.json不存在时 
  命令:npm init可自动创建package.json文件

  2.package.json存在时 
  直接命令:npm install 或者 npm install –save-dev会自动将package.json中的模块安装到node-modules文件夹下

 

转载于:https://www.cnblogs.com/ZengYunChun/p/6417927.html

electron-vue是一个基于Electron框架和Vue.js框架的开发工具,可以帮助开发者使用Vue进行Electron应用的开发。而webpack是一个模块打包工具,用于将各种资源(JavaScript、CSS、HTML等)打包成一个或多个文件。 当我们在electron-vue项目使用serialport库时,需要进行一些配置和打包工作。首先,在项目的package.json文件添加serialport库的依赖,可以使用命令npm install serialport进行安装。 接下来,在项目的webpack配置文件,需要对serialport库进行配置。首先,添加externals属性,指定serialport库在打包时不被打包,而是在运行时通过require引入外部依赖。例如: externals: { 'serialport': 'require("serialport")' } 然后,在配置文件找到module.exports的target属性,将其设置为electron-renderer,以便在渲染进程使用serialport库。 最后,通过运行npm run build命令,进行项目的打包操作。webpack将会根据配置文件将所有的资源打包成一个或多个文件,并输出到指定的目录。 需要注意的是,在打包完成后,项目的依赖关系需要正确地配置,以确保serialport库能够正常工作。可以通过使用electron-rebuild等工具来重新编译serialport库,以适配Electron环境。 总结起来,通过electron-vue和webpack的配合,我们可以将serialport库打包到Electron应用,从而实现在Vue界面使用串口通信的功能。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值