1. 程式人生 > >Vuejs2.5.9原始碼解讀(1) — package.json

Vuejs2.5.9原始碼解讀(1) — package.json

  • 獲取vue2.5.9原始碼
  • package.json指令碼命令

vue下的package.json:

...
"scripts": {
  "dev": "rollup -w -c build/config.js --environment TARGET:web-full-dev",
  "dev:cjs": "rollup -w -c build/config.js --environment TARGET:web-runtime-cjs",
  "dev:esm": "rollup -w -c build/config.js --environment TARGET:web-runtime-esm"
, "dev:test": "karma start test/unit/karma.dev.config.js", "dev:ssr": "rollup -w -c build/config.js --environment TARGET:web-server-renderer", "dev:compiler": "rollup -w -c build/config.js --environment TARGET:web-compiler ", "dev:weex": "rollup -w -c build/config.js --environment TARGET:weex-framework"
, "dev:weex:factory": "rollup -w -c build/config.js --environment TARGET:weex-factory", "dev:weex:compiler": "rollup -w -c build/config.js --environment TARGET:weex-compiler ", "build": "node build/build.js", "build:ssr": "npm run build -- web-runtime-cjs,web-server-renderer", "build:weex": "npm run build -- weex"
, "test": "npm run lint && flow check && npm run test:types && npm run test:cover && npm run test:e2e -- --env phantomjs && npm run test:ssr && npm run test:weex", "test:unit": "karma start test/unit/karma.unit.config.js", "test:cover": "karma start test/unit/karma.cover.config.js", "test:e2e": "npm run build -- web-full-prod,web-server-basic-renderer && node test/e2e/runner.js", "test:weex": "npm run build:weex && jasmine JASMINE_CONFIG_PATH=test/weex/jasmine.json", "test:ssr": "npm run build:ssr && jasmine JASMINE_CONFIG_PATH=test/ssr/jasmine.json", "test:sauce": "npm run sauce -- 0 && npm run sauce -- 1 && npm run sauce -- 2", "test:types": "tsc -p ./types/test/tsconfig.json", "lint": "eslint src build test", "flow": "flow check", "sauce": "karma start test/unit/karma.sauce.config.js", "bench:ssr": "npm run build:ssr && node benchmarks/ssr/renderToString.js && node benchmarks/ssr/renderToStream.js", "release": "bash build/release.sh", "release:weex": "bash build/release-weex.sh", "release:note": "node build/gen-release-note.js", "setup": "node build/setup.js", "commit": "git-cz" }, ...

vuejs最初是為web平臺設計的,後面加入了對weex的支援,因此上面會有weex的相關內容。web平臺編譯指令碼命令:"build": "node build/build.js","dev": "rollup -w -c build/config.js --environment TARGET:web-full-dev",。build應用於生產環境,dev應用於開發環境。

  • 原始碼專案結構

閱讀原始碼前,先關注下專案目錄結構,學習專案目錄結構組織,為以後自己做專案規劃專案目錄提供借鑑。

.circleci

.github

benchmarks

build                 // 打包相關配置,根據不同入口,打包不同的檔案
  - config.js         // 打包生成的相關資訊

dist                  // 打包後生成檔案的存放位置

examples              // vuejs的部分示例

flow                  // 使用Flow進行靜態型別檢查,這裡定義聲明瞭一些靜態型別

packages              // vue編譯後生成的npm包

src                   // 原始碼主體
  - compiler          // 模板解析相關檔案
    - codegen         // 根據ast生成render函式
    - directives      // 通用生成render函式之前需要處理的指令
    - parser          // 模板解析

  - core              // 核心程式碼
    - components
    - global-api      
    - instance
    - observer
    - util
    - vdom

  - platforms         // 平臺劃分
    - web             // web端獨有檔案
      - compiler
      - runtime
      - server
      - util
    - weex            // weex端獨有檔案

  - server            // 服務端渲染相關
    - bundle-render
    - optimizing-compiler
    - template-renderer
    - webpack-plugin

  - sfc               //

  - shared            // 共享工具方法

test                  // 測試用例

types                 // typescript

.babelrc                 // babel配置資訊[擴充套件內容(常用工具/Babel-Javascript編譯器/Babel配置檔案基礎)]
.editorconfig[*]         // 編輯器配置
.eslintignore[*]         // eslint檢查忽略配置[擴充套件內容(常用工具/ESLint基礎)]
.eslintrc[*]             // eslint配置資訊[擴充套件內容(常用工具/ESLint基礎)]
.flowconfig[*]           // flow配置資訊[擴充套件內容(常用工具/Flow基礎)]               
.gitignore[*]            // git提交忽略檔案配置[擴充套件內容(常用工具/Git基本使用)]
BACKERS.md[*]            // 發起人和支持者資訊
LICENSE[*]               // 專案使用的許可資訊
package-lock.json[*]     // 專案依賴版本的快照資訊
package.json[*]          // 專案依賴及專案資訊[擴充套件內容(Nodejs/package.json檔案內容解析)]
README.md[*]             // vue相關介紹