Snowpack - 更快的前端構建工具

{"type":"doc","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"最近在用Vue開發項目，偶然間發現了","attrs":{}},{"type":"link","attrs":{"href":"https://github.com/vitejs/vite","title":null},"content":[{"type":"text","text":"vitejs","attrs":{}}]},{"type":"text","text":"這個庫，它在開發環境中使用原生ES模塊標準引入js文件，這讓我眼前一亮，本身我就對前端標準的發展十分感興趣，所以就閱讀了一下文檔。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"在文檔中作者提到vitejs與","attrs":{}},{"type":"link","attrs":{"href":"https://www.snowpack.dev/","title":null},"content":[{"type":"text","text":"Snowpack","attrs":{}}]},{"type":"text","text":"的區別，於是順藤摸瓜，點亮了新技能。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/46/464353e90477893182f0c2b9bc01f5f9.png","alt":null,"title":"","style":[{"key":"width","value":"100%"},{"key":"bordertype","value":"none"}],"href":"","fromPaste":false,"pastePass":false}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong","attrs":{}}],"text":"更快的前端構建工具","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"Snowpack在開發環境中使用原生ES模塊代替以往的打包方式，每一個文件只需要構建一次並緩存，當某個文件改變時Snowpack只會重新構建這個被改動的文件並通過模塊熱替換（HMR）技術更新變更。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"在生產環境打包時，Snowpack可以集成其他打包工具，比如Webpack。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"關鍵功能","attrs":{}}]},{"type":"bulletedlist","content":[{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"更快的開發速度，開發服務器可以在50ms以內啓動","attrs":{}}]}],"attrs":{}},{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"利用模塊熱替換（HMR）技術，代碼的變更可以更快的在瀏覽器中體現出來","attrs":{}}]}],"attrs":{}},{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"在打包生產環境時，可以結合其他類似Webpack這樣的打包工具使用","attrs":{}}]}],"attrs":{}},{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"內置了對TypeScript，JSX，CSS Module等功能，開箱即用","attrs":{}}]}],"attrs":{}},{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"提供插件的方式提供對類似","attrs":{}},{"type":"text","marks":[{"type":"color","attrs":{"color":"#24292E","name":"user"}}],"text":"Babel，Vue等第三方庫的支持","attrs":{}}]}],"attrs":{}}],"attrs":{}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"color","attrs":{"color":"#24292E","name":"user"}},{"type":"strong","attrs":{}}],"text":"Talk is cheap, Show me the Code","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"廢話不多說，直接上代碼","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"Create Snowpack App（CSA）","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"Snowpack提供了多種模版以幫助我們快速初始化一個項目","attrs":{}}]},{"type":"codeblock","attrs":{"lang":"shell"},"content":[{"type":"text","text":"# using npm\nnpx create-snowpack-app new-dir --template [SELECT FROM BELOW] [--use-yarn]\n\n# using yarn\nyarn create snowpack-app new-dir --template [SELECT FROM BELOW] [--use-yarn]","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"這裏我們以react模板爲例使用CSA創建項目","attrs":{}}]},{"type":"codeblock","attrs":{"lang":"shell"},"content":[{"type":"text","text":"$ yarn create snowpack-app snowpack-react --template @snowpack/app-template-react-typescript\nyarn create v1.15.2\n[1/4] 🔍 Resolving packages...\n[2/4] 🚚 Fetching packages...\n[3/4] 🔗 Linking dependencies...\n[4/4] 🔨 Building fresh packages...\nsuccess Installed \"[email protected]\" with binaries:\n - create-snowpack-app\n[####################################################################] 68/68\n - Using template @snowpack/app-template-react\n - Creating a new project in /Users/eddy/Documents/workspace/snowpack-react\n(node:28212) ExperimentalWarning: The fs.promises API is experimental\n - Installing package dependencies. This might take a couple of minutes.\n\n\n> [email protected] postinstall /Users/eddy/Documents/workspace/snowpack-react/node_modules/esbuild\n> node install.js\n\nadded 254 packages from 195 contributors in 116.409s\n\n - Initializing git repo.\n\n - Success!\n\nQuickstart:\n\n cd snowpack-react\n npm start\n\nAll Commands:\n\n npm install Install your dependencies. (We already ran this one for you!)\n npm start Start your development server.\n npm run build Build your website for production.\n npm test Run your tests.\n\n✨ Done in 307.33s.","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"除了react模版，Snowpack還提供了其他模板","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"link","attrs":{"href":"https://github.com/snowpackjs/snowpack/tree/master/create-snowpack-app/app-template-blank","title":null},"content":[{"type":"text","text":"@snowpack/app-template-blank","attrs":{}}]}]},{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"link","attrs":{"href":"https://github.com/snowpackjs/snowpack/tree/master/create-snowpack-app/app-template-blank-typescript","title":null},"content":[{"type":"text","text":"@snowpack/app-template-blank-typescript","attrs":{}}]}]}],"attrs":{}},{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"link","attrs":{"href":"https://github.com/snowpackjs/snowpack/tree/master/create-snowpack-app/app-template-minimal","title":null},"content":[{"type":"text","text":"@snowpack/app-template-minimal","attrs":{}}]}]}],"attrs":{}},{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"link","attrs":{"href":"https://github.com/snowpackjs/snowpack/tree/master/create-snowpack-app/app-template-react","title":null},"content":[{"type":"text","text":"@snowpack/app-template-react","attrs":{}}]}]}],"attrs":{}},{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"link","attrs":{"href":"https://github.com/snowpackjs/snowpack/tree/master/create-snowpack-app/app-template-react-typescript","title":null},"content":[{"type":"text","text":"@snowpack/app-template-react-typescript","attrs":{}}]}]}],"attrs":{}},{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"link","attrs":{"href":"https://github.com/snowpackjs/snowpack/tree/master/create-snowpack-app/app-template-preact","title":null},"content":[{"type":"text","text":"@snowpack/app-template-preact","attrs":{}}]}]}],"attrs":{}},{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"link","attrs":{"href":"https://github.com/snowpackjs/snowpack/tree/master/create-snowpack-app/app-template-svelte","title":null},"content":[{"type":"text","text":"@snowpack/app-template-svelte","attrs":{}}]}]}],"attrs":{}},{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"link","attrs":{"href":"https://github.com/snowpackjs/snowpack/tree/master/create-snowpack-app/app-template-vue","title":null},"content":[{"type":"text","text":"@snowpack/app-template-vue","attrs":{}}]}]}],"attrs":{}},{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"link","attrs":{"href":"https://github.com/snowpackjs/snowpack/tree/master/create-snowpack-app/app-template-lit-element","title":null},"content":[{"type":"text","text":"@snowpack/app-template-lit-element","attrs":{}}]}]}],"attrs":{}},{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"link","attrs":{"href":"https://github.com/snowpackjs/snowpack/tree/master/create-snowpack-app/app-template-lit-element-typescript","title":null},"content":[{"type":"text","text":"@snowpack/app-template-lit-element-typescript","attrs":{}}]}]}],"attrs":{}},{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"link","attrs":{"href":"https://github.com/snowpackjs/snowpack/tree/master/create-snowpack-app/app-template-11ty","title":null},"content":[{"type":"text","text":"@snowpack/app-template-11ty","attrs":{}}]}]}],"attrs":{}},{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"link","attrs":{"href":"https://github.com/snowpackjs/snowpack/tree/master/create-snowpack-app/cli#featured-community-templates","title":null},"content":[{"type":"text","text":"See all community templates","attrs":{}}],"marks":[{"type":"strong"}]}]}],"attrs":{}},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"運行","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"安裝成功以後，我們啓動本地調試服務器","attrs":{}}]},{"type":"codeblock","attrs":{"lang":"shell"},"content":[{"type":"text","text":" cd snowpack-react\n npm start","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"第一次啓動非常快，在啓動調試服務器的同時，我們還發現Snowpack會將react和react-dom兩個庫構建成單獨的文件。","attrs":{}}]},{"type":"codeblock","attrs":{"lang":null},"content":[{"type":"text","text":"snowpack\n\n http://localhost:8080 • http://192.168.2.9:8080\n Server started.\n\n▼ Console\n\n[snowpack] installing dependencies...\n[snowpack] ✔ install complete! [3.92s]\n[snowpack] \n ⦿ web_modules/ size gzip brotli \n ├─ react-dom.js 926.73 KB 212.76 KB 0 KB \n └─ react.js 1.57 KB 0.51 KB 0 KB \n ⦿ web_modules/common/ (Shared)\n └─ index-9e52bee1.js 74.58 KB 20.27 KB 0 KB ","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"color","attrs":{"color":"#24292E","name":"user"}}],"text":"第二次啓動服務器時，啓動時間更短了.","attrs":{}}]},{"type":"codeblock","attrs":{"lang":"shell"},"content":[{"type":"text","text":"snowpack\n\n http://localhost:8080 • http://192.168.2.9:8080 • http://10.122.0.194:8080\n Server started in 33ms.","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"color","attrs":{"color":"#24292E","name":"user"}}],"text":"打開調試工具中的網絡面板，我們發現源代碼中的文件被構建成一個個獨立的文件","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/38/38a9ae987e44507dbc6d5f593b6e3aca.png","alt":null,"title":"","style":[{"key":"width","value":"100%"},{"key":"bordertype","value":"none"}],"href":"","fromPaste":false,"pastePass":false}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"color","attrs":{"color":"#24292E","name":"user"}}],"text":"而react和react-dom通過Snowpack的構建，可以直接以ES模塊的方式加載。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"核心概念","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"Snowpack的核心概念很純粹，","attrs":{}},{"type":"text","marks":[{"type":"strong","attrs":{}}],"text":"不需要打包的開發模式。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/1e/1edca569fa4a2bcd98e07c6dfc2fd4d9.png","alt":null,"title":"","style":[{"key":"width","value":"100%"},{"key":"bordertype","value":"none"}],"href":"","fromPaste":false,"pastePass":false}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"不打包開發模式指文件被","attrs":{}},{"type":"text","marks":[{"type":"color","attrs":{"color":"#24292E","name":"user"}}],"text":"Babel，TypeScript和Sass等工具構建後以原生ES模塊的方式獨立的被瀏覽器加載。任何文件的變更都只會引起單個文件的重新構建。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"不打包的開發模式有如下幾點好處：","attrs":{}}]},{"type":"bulletedlist","content":[{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"更快速的構建","attrs":{}}]}],"attrs":{}},{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"更明確的構建目標","attrs":{}}]}],"attrs":{}},{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"更容易調試","attrs":{}}]}],"attrs":{}},{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"項目體量變大不會影響開發速度","attrs":{}}]}],"attrs":{}},{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"文件被獨立的緩存","attrs":{}}]}],"attrs":{}}],"attrs":{}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong","attrs":{}}],"text":"每一個文件都被單獨的構建和緩存。在開發環境中直到文件被改變前，每個文件只會被構建和下載一次。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"這裏我們在源代碼中新增一個名爲Helloworld的組件，並在App.tsx中使用，然後修改Helloworld組件中的代碼。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/11/1123ac30f37138735f967eab4363fe50.png","alt":null,"title":"","style":[{"key":"width","value":"100%"},{"key":"bordertype","value":"none"}],"href":"","fromPaste":false,"pastePass":false}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"我們發現只有組件本身被瀏覽器重新加載。相比較過往的重新打包構建方式，這樣做十分高效。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"生產環境構建","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"運行命令yarn build.","attrs":{}}]},{"type":"codeblock","attrs":{"lang":"shell"},"content":[{"type":"text","text":"$ yarn build\nyarn run v1.15.2\n$ snowpack build\n(node:63681) ExperimentalWarning: The fs.promises API is experimental\n[snowpack] ! building source…\n[snowpack] ✔ build complete [0.07s]\n[snowpack] installing dependencies...\n[snowpack] ✔ install complete! [0.92s]\n[snowpack] \n ⦿ web_modules/ size gzip brotli \n ├─ react-dom.js 127.47 KB 40.94 KB 0 KB \n └─ react.js 0.22 KB 0.13 KB 0 KB \n ⦿ web_modules/common/ (Shared)\n └─ index-e66f0a38.js 8.99 KB 3.54 KB 0 KB \n\n[snowpack] ! verifying build...\n[snowpack] ✔ verification complete\n[snowpack] ! writing build to disk...\n[snowpack] ✔ build complete [0.07s]\n[snowpack] ▶ Build Complete!\n\n\n✨ Done in 5.54s.","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"會在項目目錄中生成build目錄，我們發現Snowpack默認的生產環境構建與開發環境相同，並沒有打包的功能。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/a6/a616797f37fedaccbf4bcb83c91d2dc5.png","alt":null,"title":"","style":[{"key":"width","value":"100%"},{"key":"bordertype","value":"none"}],"href":"","fromPaste":false,"pastePass":false}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"但通過安裝Snowpack官方提供的webpack插件","attrs":{}},{"type":"text","marks":[{"type":"color","attrs":{"color":"#ce9178","name":"user"}}],"text":"@snowpack/plugin-webpack","attrs":{}},{"type":"text","text":"就可以快速的與Webpack集成。再次構建時得到打包後的結果。","attrs":{}}]},{"type":"codeblock","attrs":{"lang":"shell"},"content":[{"type":"text","text":"$ npm run build\n\n> @ build /Users/eddy/Documents/workspace/snowpack-react\n> snowpack build\n\n[snowpack] ! building source…\n[snowpack] ✔ build complete [0.07s]\n[snowpack] installing dependencies...\n[snowpack] ✔ install complete! [1.33s]\n[snowpack] \n ⦿ web_modules/ size gzip brotli \n ├─ react-dom.js 127.47 KB 40.93 KB 35.99 KB \n └─ react.js 0.22 KB 0.13 KB 0.11 KB \n ⦿ web_modules/common/ (Shared)\n └─ index-e66f0a38.js 8.99 KB 3.54 KB 3.16 KB \n\n[snowpack] ! verifying build...\n[snowpack] ✔ verification complete\n[snowpack] ! writing build to disk...\n[snowpack] ✔ build complete [0.07s]\n Asset Size Chunks Chunk Names\nassets/logo-d264c5adf9650c78ea3f951b10fb965a.svg 2.27 KiB [emitted] [immutable] \n css/commons.5e7507eb870db869e404.css 855 bytes 0 [emitted] [immutable] commons\n js/commons.2176d02c5f58391fdef3.js 146 KiB 0 [emitted] [immutable] commons\n js/commons.2176d02c5f58391fdef3.js.LICENSE.txt 51 bytes [emitted] \n js/index.86114b711cd75fab8af8.js 72 bytes 1 [emitted] [immutable] index\n js/webpack-runtime.21710be6279059296bda.js 1.46 KiB 2 [emitted] [immutable] webpack-runtime\n[snowpack] ▶ Build Complete!","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"功能","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"Snowpack內置了對如下文件類型的支持：","attrs":{}}]},{"type":"bulletedlist","content":[{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"JavaScript（.js，.mjs）","attrs":{}}]}],"attrs":{}},{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"TypeScript（.ts，.tsx）","attrs":{}}]}],"attrs":{}},{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"JSX（.jsx，.tsx）","attrs":{}}]}],"attrs":{}},{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"CSS（.css）","attrs":{}}]}],"attrs":{}},{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"CSS Modules（.module.css）","attrs":{}}]}],"attrs":{}},{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"Images（.svg，.png，.jpg，等）","attrs":{}}]}],"attrs":{}}],"attrs":{}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":4},"content":[{"type":"text","text":"加載別名","attrs":{}}]},{"type":"codeblock","attrs":{"lang":"javascript"},"content":[{"type":"text","text":"// Instead of this:\nimport Button from `../../../../components/Button`;\n\n// You can do this:\nimport Button from `@app/components/Button`;","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"通過在Snowpack","attrs":{}},{"type":"link","attrs":{"href":"https://www.snowpack.dev/#config-files","title":null},"content":[{"type":"text","text":"配置文件","attrs":{}}]},{"type":"text","text":"中對別名的配置可以實現以別名的方式代替文件路徑。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"TypeScript用戶則通過ts.config.json配置文件中的","attrs":{}},{"type":"link","attrs":{"href":"https://www.typescriptlang.org/docs/handbook/module-resolution.html#path-mapping","title":null},"content":[{"type":"text","text":"paths","attrs":{}}]},{"type":"text","text":"配置。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":4},"content":[{"type":"text","text":"環境變量","attrs":{}}]},{"type":"codeblock","attrs":{"lang":"javascript"},"content":[{"type":"text","text":"// `import.meta.env` - Read process.env variables in your web app\nfetch(`${import.meta.env.SNOWPACK_PUBLIC_API_URL}/users`).then(...)\n\n// Supports destructuring as well:\nconst {SNOWPACK_PUBLIC_API_URL} = import.meta.env;\nfetch(`${SNOWPACK_PUBLIC_API_URL}/users`).then(...)\n\n// Instead of `import.meta.env.NODE_ENV` use `import.meta.env.MODE`\nif (import.meta.env.MODE === 'development') {\n // ...","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"import.meta.env與過往的process.env行爲相似，但從安全的角度考慮Snowpack只支持以SNOWPACK_PUBLIC_*開頭的環境變量。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"可以通過@snowpack/plugin-dotenv插件可以實現以環境變量文件的方式設置環境變量，","attrs":{}},{"type":"link","attrs":{"href":"https://github.com/snowpackjs/snowpack/tree/master/plugins/plugin-dotenv","title":null},"content":[{"type":"text","text":"README","attrs":{}}]},{"type":"text","text":"。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":4},"content":[{"type":"text","text":"熱重載","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"熱重載（Hot Module Replacement HMR）是一種以非刷新頁面的方式更新Web應用的技術。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"Snowpack支持包括CSS、CSS Modules和JSON在內的HMR。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"不使用CSA的情況下可以使用一些插件或幾行代碼","attrs":{}}]},{"type":"bulletedlist","content":[{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"Preact: ","attrs":{}},{"type":"link","attrs":{"href":"https://www.npmjs.com/package/@prefresh/snowpack","title":null},"content":[{"type":"text","text":"@prefresh/snowpack","attrs":{}}]}]}],"attrs":{}},{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"React: ","attrs":{}},{"type":"link","attrs":{"href":"https://www.npmjs.com/package/@snowpack/plugin-react-refresh","title":null},"content":[{"type":"text","text":"@snowpack/plugin-react-refresh","attrs":{}}]}]}],"attrs":{}},{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"Svelte: ","attrs":{}},{"type":"link","attrs":{"href":"https://github.com/snowpackjs/snowpack/blob/master/create-snowpack-app/app-template-svelte/src/index.js#L9-L16","title":null},"content":[{"type":"text","text":"A few lines of code","attrs":{}}]}]}],"attrs":{}},{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"Vue: ","attrs":{}},{"type":"link","attrs":{"href":"https://github.com/snowpackjs/snowpack/blob/master/create-snowpack-app/app-template-vue/src/index.js#L7-L14","title":null},"content":[{"type":"text","text":"A few lines of code","attrs":{}}]}]}],"attrs":{}}],"attrs":{}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":4},"content":[{"type":"text","text":"請求代理","attrs":{}}]},{"type":"codeblock","attrs":{"lang":"javascript"},"content":[{"type":"text","text":"// snowpack.config.json\n// Example: Proxy \"/api/pokemon/ditto\" -> \"https://pokeapi.co/api/v2/pokemon/ditto\"\n{\n \"proxy\": {\n \"/api\": \"https://pokeapi.co/api/v2\",\n }\n}","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":4},"content":[{"type":"text","text":"CSS Imports (@import)","attrs":{}}]},{"type":"codeblock","attrs":{"lang":"text"},"content":[{"type":"text","text":"/* Import a local CSS file */\n@import './style1.css';\n/* Import a local Sass file (Sass build plugin still needed to compile file contents) */\n@import './style2.scss';\n/* Import a package CSS file */\n@import 'bootstrap/dist/css/bootstrap.css';","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"Snowpack支持","attrs":{}},{"type":"link","attrs":{"href":"https://developer.mozilla.org/en-US/docs/Web/CSS/@import","title":null},"content":[{"type":"text","text":"原生@import語法","attrs":{}}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"更多Snowpack功能可參見","attrs":{}},{"type":"link","attrs":{"href":"https://www.snowpack.dev/#features","title":null},"content":[{"type":"text","text":"Snowpack features","attrs":{}}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"插件","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"Snowpack不僅是JavaScript的構建工具，還是整個網站的構建工具。 Babel，TypeScript，PostCSS，SVGR和任何喜歡的構建工具都可以通過1行插件的方式直接連接到Snowpack。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"bulletedlist","content":[{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"使用新的語言/框架支持（Svelte，Vue）自定義構建","attrs":{}}]}],"attrs":{}},{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"使用新的構建工具（Babel，PostCSS）自定義構建","attrs":{}}]}],"attrs":{}},{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"在構建和開發過程中運行CLI命令（TypeScript，ESLint）","attrs":{}}]}],"attrs":{}},{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"創建項目特殊的自定義轉換。","attrs":{}}]}],"attrs":{}}],"attrs":{}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"總結","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"隨着瀏覽器的不斷髮展，越來越多的標準得以被實現，這些標準提高了前端開發的生產力。Snowpack建立在ECMAScript中模塊化標準的原生實現，讓我們可以在開發環境中更加高效的調試前端工程。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}}]}