之前在看 react 的官方文件時,文中在建立一個新的 react 專案有使用到一條指令:npx create-react-app my-app
,當時沒特別想說它是做什麼用的,就先照做吧~ 這幾天剛好有機會碰到了,在這邊做個筆記。
npx 是 npm v5.2.0 開始加入的一個指令,也是一個 CLI 工具
這邊就拿 create-react-app 來舉例
以 npm 的方式來建立:
$ npm install -g create-react-app
$ create-react-app my-app
以 npx 的方式來建立:
$ npx create-react-app my-app
區別在於 npm 會在本機全域安裝 create-react-app,一直存在於本機的 node_modules 資料夾下,以後建立 react 專案直接執行 create-react-app 命令就行了;而使用 npx 它會安裝在臨時安裝包上,執行完成後就會被刪除
這裡用測試工具 Mocha 來舉例
$ npm install -D mocha
此時要呼叫 Mocha 一般來說會透過以下兩種方式:
{
"scripts": {
"mocha": xxxx
}
}
$ node_modules/.bin/mocha --version
npx 解決了這個問題,讓專案內部安裝的模組/套件使用起來更方便,只要使用下面的方法呼叫就可以了
$ npx mocha --version
簡單來說 npx 執行時會到 node_modules/.bin/ 路徑內和環境變數 $PATH 檢查命令是否存在
npx 可臨時性的安裝非全域性套件,省下許多安裝及使用的流程與步驟,節省硬碟空間,也不用擔心長期的汙染
https://www.ruanyifeng.com/blog/2019/02/npx.html
https://juejin.cn/post/6844903945664462855
https://blog.csdn.net/zheng18237111686/article/details/113933072
https://medium.com/itsems-frontend/whats-npx-e83400efe7f8
nodejs
npm
npx
網站中如果有使用到正規表達式,Safari 瀏覽器會在某個正規規則下報出以下錯誤:SyntaxError: Invalid regular expression: invalid group specifier name,接著網站可能就會一片空白或是無法正常運作。 以下是我接手案子內的其中一段程式碼: transPoint(point) { // 下面這段 Safari 會報錯,必須用 RegExp 包 return point.replace(/\B(?<!\.\d*)(?=(\d{3})+(?!\d))/g, ','); }, 上面這段直接把正規規則包在 /.../g 裡在 Safari 上是會出錯的,需要使用 new RegExp('...', 'g') 包起來才可以,並且有使用到 \d 的部份要改用兩個反斜線來取代,例如 \d 需更改為 \\d
Oct 2, 2021在製作專案時,一定會有全站頁面共用的元件(像是 header, footer 等等),若今天碰到 header、footer 有調整需求,要一個個修改 html 檔光用想的就覺得辛苦,本次討論的是若專案並非使用前端框架來製作時該如何處理 安裝 html-loader $ npm install --save-dev html-loader 專案目錄結構 ├── README.md ├── package-lock.json ├── package.json ├── src
May 13, 2021前言 新公司專案感覺會時常使用 git,主要是想在若有緊急情況時,希望在家中也有辦法處理公司的事,剛好目前還在熟悉環境手邊暫時沒有排專案,就在公司電腦試了一下。 目標 在同一台電腦上,公司 github 帳號可以管理公司專案、私人 github 帳號可以管理私人專案 產生不同的金鑰 執行以下命令,Email 記得更換 $ ssh-keygen -t rsa -C "username@example.com"
May 13, 2021在做 campaign 案時常會遇到圖片(不論是 <img> 或 css background)使用 transition 做動態時會模糊,最後到定點後會跳動一下的問題,因為一直很惱人所以就忍不住找了解法 selector { backface-visibility: hidden; transform: translateZ(0) scale(1, 1); } 加了上面的設定 Chrome 看起來問題就解決了,但不曉得為何 Safari(新生代 IE)感覺好像沒有太大的改善,於是我另外加了 will-change 屬性,Safari 看起來就好多了,以下附上我的設定: selector {
May 13, 2021or
By clicking below, you agree to our terms of service.
New to HackMD? Sign up