在開始寫正式項目內容前，首先要創建兩個文件：

- .babelrc（處理.jsx的配置文件）
需要安裝babel-loader@8.0.6和@babel/core@7.8.7，如果直接用npm i babel-loader babel-core會報錯

npm WARN babel-loader@8.0.6 requires a peer of @babel/core@^7.0.0 but n one is installed. You must install peer dependencies yourself.

而在npm倉庫中babel-core最新版本是6.26.3.這是因為 babel-loader@8.x是webpack用于Babel 7.x的一個整合loader模塊，Babel 7.x已經把所有的相關的包從babel-遷移到了@babel的npm環境倉庫。

此處有兩種解決方案消除報錯：

npm i @babel/core以此代替babel-core

這方法我不推薦，就是將babel-loader@8.x降級為babel-loader@7.x

再進行如下配置，先需要安裝一下

• babel-preset-env（解決es6轉碼兼容問題）
• babel-plugin-transform-vue-jsx（webpack只認識.js，所以要轉化vue里的.jsx）

//.babelrc {"presets": ["env"],"plugins": ["transform-vue-jsx" //轉化vue里的jsx代碼] }

- postcss.config.js（優化css代碼的配置文件）
需要安裝postcss-loader@3.0.0和autoprefixer@9.7.4兩個依賴，配置如下：

//postcss用來后處理css文件，優化css代碼 //autoprefixer用來自動解決兼容問題（如-webkit，-moz等） const autoprefixer = require('autoprefixer')module.exports = {plugins: [autoprefixer()] }

現在開始就可以寫項目代碼了，這次是真的了！
其他心得：

• scoped讓配置的css樣式只在本組件內生效，不會與外部沖突
• --save-dev和-save的區別
  前者會把依賴添加到 package.json 里的 devDependencies 下，后者則添加到dependencies 鍵下。dependencies是運行時依賴，devDependencies是開發時的依賴（打包完運行時不會下載）。

總結

以上是生活随笔為你收集整理的我的tudo日记2（关于babel和postcss）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。