摘要:非官方字段集合官方字段請(qǐng)參考。下面介紹的是非官方字段,也就是各種工具定義的相關(guān)字段。詳細(xì)參考相關(guān)字段設(shè)置項(xiàng)目的瀏覽器兼容情況。相關(guān)字段測(cè)試庫(kù)。相關(guān)字段代碼檢查與優(yōu)化。
package.json 非官方字段集合
package.json 官方字段請(qǐng)參考 https://docs.npmjs.com/files/package.json。下面介紹的是非官方字段,也就是各種工具定義的相關(guān)字段。
1. yarn 相關(guān)字段yarn: 類(lèi)似 npm 的依賴(lài)管理工具,但 yarn 緩存了每個(gè)下載過(guò)的包,所以再次使用時(shí)無(wú)需重復(fù)下載,同時(shí)利用并行下載以最大化資源利用率,因此安裝速度更快。
flat{ "flat": true }
如果你的包只允許給定依賴(lài)的一個(gè)版本,你想強(qiáng)制和命令行上 yarn install --flat 相同的行為,把這個(gè)值設(shè)為 true。
詳細(xì)參考 yarn - flat.
resolutions{ "resolutions": { "transitive-package-1": "0.0.29", "transitive-package-2": "file:./local-forks/transitive-package-2", "dependencies-package-1/transitive-package-3": "^2.1.1" } }
允許你覆蓋特定嵌套依賴(lài)項(xiàng)的版本。有關(guān)完整規(guī)范,請(qǐng)參見(jiàn)選擇性版本解析 RFC。
詳細(xì)參考 yarn - resolutions.
2. unpkg 相關(guān)字段unpkg: 讓 npm 上所有的文件都開(kāi)啟 cdn 服務(wù)。
unpkg# jquery { "unpkg": "dist/jquery.js" }
正常情況下,訪(fǎng)問(wèn) jquery 的發(fā)布文件通過(guò) https://unpkg.com/jquery@3.3.1/dist/jquery.js,當(dāng)你使用省略的 url https://unpkg.com/jquery 時(shí),便會(huì)按照如下的方式獲取文件:
# [latestVersion] 指最新版本號(hào),pkg 指 package.json # 定義了 unpkg 屬性時(shí) https://unpkg.com/jquery@[latestVersion]/[pkg.unpkg] # 未定義 unpkg 屬性時(shí),將回退到 main 屬性 https://unpkg.com/jquery@[latestVersion]/[pkg.main]
詳細(xì)參考 https://unpkg.com.
3. TypeScript 相關(guān)字段TypeScript: JavaScript 的超集
types, typings{ "main": "./lib/main.js", "types": "./lib/main.d.ts" }
就像 main 字段一樣,定義一個(gè)針對(duì) TypeScript 的入口文件。
詳細(xì)參考 TypeScript documentation.
4. browserslist 相關(guān)字段browserslist: 設(shè)置項(xiàng)目的瀏覽器兼容情況。
browserslist{ "browserslist": [ "> 1%", "last 2 versions" ] }
支持的工具:
Autoprefixer
Babel
postcss-preset-env
eslint-plugin-compat
stylelint-no-unsupported-browser-features
postcss-normalize
詳細(xì)參考 browserslist.
5. 發(fā)行打包相關(guān)字段點(diǎn)擊 Setting up multi-platform npm packages 查看相關(guān)介紹。
module{ "main": "./lib/main.js", "module": "./lib/main.m.js" }
就像 main 字段一樣,定義一個(gè)針對(duì) es6 模塊及語(yǔ)法的入口文件。
構(gòu)建工具在構(gòu)建項(xiàng)目的時(shí)候,如果發(fā)現(xiàn)了這個(gè)字段,會(huì)首先使用這個(gè)字段指向的文件,如果未定義,則回退到 main 字段指向的文件。
支持的工具:
rollup
webpack
詳細(xì)參考 rollup - pkg.module.
browser{ "main": "./lib/main.js", "browser": "./lib/main.b.js" }
指定該模塊供瀏覽器使用的入口文件。
如果這個(gè)字段未定義,則回退到 main 字段指向的文件。
支持的工具:
rollup
webpack
browserify
詳細(xì)參考 babel-plugin-module-resolver.
esnext{ "main": "main.js", "esnext": "main-esnext.js" } # or { "main": "main.js", "esnext": { "main": "main-esnext.js", "browser": "browser-specific-main-esnext.js" } }
使用 es 模塊化規(guī)范,stage 4 特性的源代碼。
詳細(xì)參考 Transpiling dependencies with Babel, Delivering untranspiled source code via npm.
es2015{ "main": "main.js", "es2015": "main-es2015.js" }
Angular 定義的未轉(zhuǎn)碼的 es6 源碼。
詳細(xì)參考 https://docs.google.com/document/d/1CZC2rcpxffTDfRDs6p1cfbmKNLA6x5O-NtkJglDaBVs/edit#.
esm詳細(xì)參考 adjusted proposal: ES module "esm": true package.json flag.
6. react-native 相關(guān)字段react-native: 使用 react 組件技術(shù)寫(xiě)原生APP。
react-native{ "main": "./lib/main.js", "react-native": "./lib/main.react-native.js" }
指定該模塊供 react-native 使用的入口文件。
如果這個(gè)字段未定義,則回退到 main 字段指向的文件。
源代碼查看.
7. webpack 相關(guān)字段 sideEffects{ "sideEffects": true|false }
聲明該模塊是否包含 sideEffects(副作用),從而可以為 tree-shaking 提供更大的優(yōu)化空間。
詳細(xì)參考 sideEffects example, proposal for marking functions as pure, eslint-plugin-tree-shaking.
8. microbundle 相關(guān)字段microbundle: 基于 rollup 零配置快速打包工具。
source{ "source": "src/index.js" }
源文件入口文件。
詳細(xì)參考 Specifying builds in package.json.
umd:main{ "umd:main": "dist/main.umd.js" }
umd 模式 bundle 文件。
詳細(xì)參考 Specifying builds in package.json.
8. parcel 相關(guān)字段parcel: 零配置打包工具。
source查看 parcel-bundler/parcel#1652.
9. babel 相關(guān)字段babel: es6 -> es5 轉(zhuǎn)碼器。
babel配置 babel。
10. eslint 相關(guān)字段eslint: js 代碼檢查與優(yōu)化。
eslintConfig配置 eslint。
11. jest 相關(guān)字段jest: js 測(cè)試庫(kù)。
jest{ "jest": { "verbose": true } }
配置 jest。
詳細(xì)參考 jest docs.
12. stylelint 相關(guān)字段stylelint: style 代碼檢查與優(yōu)化。
stylelint配置 stylelint。
詳細(xì)參考 New configuration loader.
13. ava 相關(guān)字段ava: js 測(cè)試庫(kù)。
ava{ "ava": { "require": [ "@std/esm" ] } }
配置 ava。
詳細(xì)參考 ava configuration.
14. nyc 相關(guān)字段nyc: istanbul.js 命令行。
nyc{ "nyc": { "extension": [".js", ".mjs"], "require": ["@std/esm"] } }
配置 nyc。
詳細(xì)參考 nyc docs.
15. CommonJS 保留字段保留字段: build, default, email, external, files, imports, maintainer, paths, platform, require, summary, test, using, downloads, uid.
不可用字段: id, type, 以 _ 和 $ 開(kāi)頭的字段。
16. Standard JS 相關(guān)字段Standard JS: js 代碼檢查與優(yōu)化。
standard{ "standard": { "parser": "babel-eslint", "ignore": [ "**/out/", "/lib/select2/", "/lib/ckeditor/", "tmp.js" ] } }
配置 standard.
詳細(xì)參考 https://standardjs.com/.
17. 其他 style聲明當(dāng)前模塊包含 style 部分,并指定入口文件。
支持的工具:
parcelify
npm-less
rework-npm
npm-css
詳細(xì)參考 Package.json "style" Attribute, istf-spec.
less與 style 一樣,但是是 less 文件。
支持的工具:
npm-less
18. 更多參考 package.json fields explained.
19. 后續(xù)更多博客,查看 https://github.com/senntyou/blogs
作者:深予之 (@senntyou)
版權(quán)聲明:自由轉(zhuǎn)載-非商用-非衍生-保持署名(創(chuàng)意共享3.0許可證)
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://m.hztianpu.com/yun/97703.html
摘要:搭建自己的前端腳手架一般新開(kāi)發(fā)一個(gè)項(xiàng)目時(shí),我們會(huì)首先搭建好一個(gè)腳手架,然后才會(huì)開(kāi)始寫(xiě)代碼。搭建腳手架可以用等命令行工具,也可以直接用等模板,如果這些都不能滿(mǎn)足你的個(gè)性化需求,可以嘗試搭建自己的前端腳手架。 搭建自己的前端腳手架 一般新開(kāi)發(fā)一個(gè)項(xiàng)目時(shí),我們會(huì)首先搭建好一個(gè)腳手架,然后才會(huì)開(kāi)始寫(xiě)代碼。搭建腳手架可以用 create-react-app、vue-cli、yeoman 等命令行...
摘要:本文主要是介紹開(kāi)發(fā)一個(gè)簡(jiǎn)單的腳手架,了解開(kāi)發(fā)的基本流程最終通過(guò)鏈接到全局包。完成之后,就可以把腳手架發(fā)布到上面,通過(guò)進(jìn)行全局安裝,就可以在自己本機(jī)上執(zhí)行來(lái)初始化項(xiàng)目,這樣便完成了一個(gè)簡(jiǎn)單的腳手架工具了。 腳手架,這個(gè)名詞對(duì)于作為前端的我們來(lái)說(shuō),也許并不陌生吧,像vue-cli,react-native-cli等,全局安裝后,只需要在命令行中敲入一個(gè)簡(jiǎn)單的命令,便可幫我們快速的生成一個(gè)初...
摘要:無(wú)需手動(dòng)拷貝文件或者創(chuàng)建軟鏈接到目錄,有更優(yōu)雅的解決方案。這是因?yàn)樽R(shí)別協(xié)議的,得知這個(gè)包需要直接從文件系統(tǒng)中獲取,會(huì)自動(dòng)創(chuàng)建軟鏈接到中,完成安裝過(guò)程。 nodejs 社區(qū)乃至 Web 前端工程化領(lǐng)域發(fā)展到今天,作為 node 自帶的包管理工具的 npm 已經(jīng)成為每個(gè)前端開(kāi)發(fā)者必備的工具。但是現(xiàn)實(shí)狀況是,我們很多人對(duì)這個(gè)nodejs基礎(chǔ)設(shè)施的使用和了解還停留在: 會(huì)用 npm insta...
摘要:字段由腳本命令組成的字典,這些命令運(yùn)行在包的各個(gè)生命周期中。在打包過(guò)程中,如果遇到字段會(huì)優(yōu)先使用字段表示的路徑下的文件,如果不存在,則用字段表示的作為入口,并按照的規(guī)范打包。其中還分析了文件中字段和字段的不同以及和兩個(gè)字段的區(qū)別。 所有用npm下載的包或者要上傳至npm的模塊都會(huì)有一個(gè)package.json文件,這個(gè)文件總是存在于模塊(或者包)的根目錄下,這個(gè)文件到底是干嘛的,現(xiàn)在就...
摘要:在使用過(guò)程中我們可以通過(guò)增加哈希次數(shù)來(lái)提高數(shù)據(jù)的安全性。當(dāng)然,對(duì)密碼的哈希操作應(yīng)該在保存數(shù)據(jù)之前。 showImg(https://segmentfault.com/img/remote/1460000010821081); 毫無(wú)疑問(wèn),幾乎所有的應(yīng)用都會(huì)涉及到數(shù)據(jù)存儲(chǔ)。但是 Express 框架本身只能通過(guò)程序變量來(lái)保存數(shù)據(jù),它并不提供數(shù)據(jù)持久化功能。而僅僅通過(guò)內(nèi)存來(lái)保存數(shù)據(jù)是無(wú)法應(yīng)對(duì)...
閱讀 2624·2021-11-22 12:05
閱讀 3506·2021-10-14 09:42
閱讀 1739·2021-07-28 00:15
閱讀 2041·2019-08-30 11:08
閱讀 1546·2019-08-29 17:31
閱讀 976·2019-08-29 16:42
閱讀 2392·2019-08-26 11:55
閱讀 2165·2019-08-26 11:49