Webpack

學習如何使用 Vue 創建單一檔案來封裝一個組件的所有相關內容，集中管理外觀和行為。 一個 Vue 組件可以在一個 JavaScript 檔案（.js）中這樣聲明： Vue.component('component-name', { /* 選項 */ }) 或者： new Vue({ /* 選項 */ }) 也可以在一個 .vue 檔案中指定。 這個 .vue 檔案非常酷，因為它允許你在一個檔案中定義以下內容： JavaScript 邏輯 HTML 代碼模板 CSS 樣式 所有這些內容都包含在一個檔案中，因此它得名為單檔元件。 以下是一個例子： <template> <p>{{ hello }}</p> </template> <script> export default { data() { return { hello: 'Hello World!' } } } </script> <style scoped> p { color: blue; } </style> 所有這些都是可能的，感謝 webpack 的使用。Vue CLI 讓這一切變得非常容易並且支援開箱即用。在沒有 webpack 設置的情況下，無法使用 ....

如何修復錯誤 ruleSet[1].rules[3].oneOf[8].use[2]!./styles/globals.css 找不到模組 我的一些學員在進行 Next.js 項目的 npm run dev 時遇到了一個我無法重現的問題。 他們遇到了如下錯誤： ➜ rest-api git:(main) npm run dev > [[email protected]](/cdn-cgi/l/email-protection) dev > next dev ready - started server on 0.0.0.0:3000, url: http://localhost:3000 info - Loaded env from /Users/flaviocopes/dev/bootcamp/rest-api/.env wait - compiling... error - ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[3].oneOf[8].use[1]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[3].oneOf[8].use[2]!./styles/globals.css Error: Cannot find module 'tailwindcss' 最後一行中出現了 tailwindcss，同時還有 autoprefixer 的問題。 還有可能出現這個錯誤：Error: Your custom PostCSS configuration must export a plugins key. 這個錯誤信息其實並不是很有用！ 經過大量的調試，找到了問題的原因。 出現錯誤的項目並沒有安裝 Tailwind CSS，但在之前的幾周，我們使用了 Tailwind。 問題的原因如下：...

create-react-app 是開始使用 React 應用的最簡單方法。 create-react-app 是一個旨在讓您快速掌握 React 的項目。它提供了一個現成的 React 應用程序起始器，讓您可以開始構建應用程序，而不必處理 Webpack 和 Babel 的配置。 它提供了以下功能： 具有熱重載的開發服務器 集成了 Jest 的測試環境 构建 React 應用程序的能力 兼容 ES6+ 語法 打包所有 JavaScript 和資源文件 包含 CSS 自動添加器、SASS 和 CSS Modules 支持 等等！ 您可以通過使用 npx 開始使用，這是一種在不安裝命令的情況下下載和執行 Node.js 命令的簡單方法。npx 隨 npm 一起提供（自版本 5.2 起）。如果您尚未安裝 npm，請從 https://nodejs.org 安裝（npm 會隨 Node 一同安裝）。 如果您不確定自己的版本，我建議您檢查是否需要更新。 提示：如果您對終端機不熟悉，請查看我的終端機教程 https://flaviocopes.com/macos-terminal/。 當您運行 npx create-react-app <app-name> 時，npx 將下載最新的 create-react-app 版本，並運行它，然後將其從您的系統中刪除。這非常好，因為您的系統上永遠不會有過時的版本，每次運行該命令時，您都會獲得最新和最好的代碼。 讓我們開始： npx create-react-app todolist 執行完畢時的截圖： 這是執行完成後的截圖： create-react-app 在您指定的文件夾中（此例中為todolist）創建了文件結構，並初始化了 Git 存儲庫。...

在進行項目開發時，有時會遇到以下錯誤： TypeError: Cannot assign to read only property 'exports' of object '# <Object>' error 該錯誤是由 Webpack 生成的，它表示您試圖在需要使用 ES 模塊 的地方使用了 CommonJS！ 請避免使用 CommonJS 語法： const myfunction = () => {} module.exports = myfunction 改用 ES 模塊語法： const myfunction = () => {} export default myfunction 然後，您可以像這樣導入導出的函數或對象： import myfunction from './myfunction' 您也可以從文件中導出多個函數或對象： myfunctions.js const myfunction1 = () => {} const myfunction1 = () => {} export { myfunction1, myfunction2 } 然後，您可以像這樣導入它們：...