在開始寫正式項(xiàng)目內(nèi)容前，首先要?jiǎng)?chuàng)建兩個(gè)文件：

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

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.這是因?yàn)?babel-loader@8.x是webpack用于Babel 7.x的一個(gè)整合loader模塊，Babel 7.x已經(jīng)把所有的相關(guān)的包從babel-遷移到了@babel的npm環(huán)境倉庫。

此處有兩種解決方案消除報(bào)錯(cuò)：

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

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

再進(jìn)行如下配置，先需要安裝一下

• babel-preset-env（解決es6轉(zhuǎn)碼兼容問題）
• babel-plugin-transform-vue-jsx（webpack只認(rèn)識(shí).js，所以要轉(zhuǎn)化vue里的.jsx）

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

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

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

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

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。