應(yīng)用模塊
1、 關(guān)于webpack -- setup
每次在開(kāi)發(fā)webpack項(xiàng)目的時(shí)候 運(yùn)行 npm run dev 其實(shí)是啟動(dòng)了一個(gè)服務(wù)器 服務(wù)器是node代碼書(shū)寫(xiě)
這個(gè)服務(wù)器的運(yùn)行的入口文件是 build/webpack.dev.conf.js
有關(guān)服務(wù)器的配置項(xiàng)是在 devServer 對(duì)象里面的 如下
devServer: {
clientLogLevel: 'warning',
historyApiFallback: {
rewrites: [
{ from: /.*/, to: path.posix.join(config.dev.assetsPublicPath, 'index.html') },
],
},
hot: true,
contentBase: false, // since we use CopyWebpackPlugin.
compress: true,
host: HOST || config.dev.host,
port: PORT || config.dev.port,
open: config.dev.autoOpenBrowser,
overlay: config.dev.errorOverlay
? { warnings: false, errors: true }
: false,
publicPath: config.dev.assetsPublicPath,
proxy: config.dev.proxyTable,
quiet: true, // necessary for FriendlyErrorsPlugin
watchOptions: {
poll: config.dev.poll,
},
setup(app) {
// 可以通過(guò)express的app 在setup里面寫(xiě)一些自己的中間間
// 這樣寫(xiě)的話 項(xiàng)目中發(fā)送ajax請(qǐng)求地址是/some/path 就可以經(jīng)過(guò)這里做一些處理
app.get('/some/path', function (req, res) {
let url = 'wwwwwwwwwww'
axios.get(url, {
headers: {
referer: '',
host: ''
}
params: req.query
}).then( (response) => {
res.json(response.data)
} )
});
})
}
}
編譯模塊
1、 讓項(xiàng)目支持es6, es7的新語(yǔ)法
- babel-loader 轉(zhuǎn)義es6新語(yǔ)法的， 但是它支持的不全， 還需要一些插件來(lái)支持新的api
- babel-polyfill 支持新的api， 需要全局引用
- babel-runtime / babel-plugin-transform-runtime 抽離了公共模塊, 避免了重復(fù)引入
- .babelrc 對(duì)babel進(jìn)行配置 可以局部使用 babel-polyfill（還不知道怎樣個(gè)局部法）
- 測(cè)試了下， 好像不全局引用 babel-polyfill 也能使用 一些新的語(yǔ)法（后續(xù)待測(cè)）
{
// 配置樣本
"presets": [
["env", {
"modules": false,
"targets": {
"browsers": ["> 1%", "last 2 versions", "ie >= 8", "android >= 4.4"]
}
}],
"stage-2" // 不同的階段
],
"plugins": ["transform-vue-jsx", "transform-runtime"],
"env": {
"test": {
"presets": ["env", "stage-2"],
"plugins": ["transform-vue-jsx", "transform-es2015-modules-commonjs", "dynamic-import-node"]
}
}
}
// 缺啥補(bǔ)啥
"@babel/preset-env": "^7.1.0",
"babel-polyfill": "^6.26.0",
"babel-preset-env": "^1.7.0",
"babel-preset-stage-2": "^6.24.1",
- stage 系列集合了一些對(duì) es7 的草案支持的插件，由于是草案，所以作為插件的形式提供。
stage-0 - Strawman: just an idea, possible Babel plugin.
stage-1 - Proposal: this is worth working on.
stage-2 - Draft: initial spec.
stage-3 - Candidate: complete spec and initial browser implementations.
stage-4 - Finished: will be added to the next yearly release.
報(bào)錯(cuò)模塊
[copy-webpack-plugin] unable to locate 'C:\Users\DELL\Desktop\vue-typescript\vue-typescript-starter\static' at 'C:\Users\DELL\Desktop\vue-typescript\vue-typescript-starter\static'
不能定位到某個(gè)文件夾 需要在項(xiàng)目中手動(dòng)新建一個(gè) static的文件夾
-
原因可能是因?yàn)閟tatic是一個(gè)空文件夾 克隆的時(shí)候或者上傳的時(shí)候 git給過(guò)濾掉了
但是它又是必須的 所以需要手動(dòng)創(chuàng)建出來(lái)
Error: listen EADDRINUSE 127.0.0.1:11001
端口被占用了 改端口吧
原因可能是重復(fù)打包 上一次打包服務(wù)還沒(méi)完全退出導(dǎo)致的
Error in ./src/main.js no-new Do not use 'new' for side effects
- 如果用了 new Vue({}) new 關(guān)鍵字實(shí)例化一個(gè)對(duì)象 要賦值一個(gè)變量 否則報(bào)錯(cuò)
- 但是vue 的語(yǔ)法 又不需要去賦值 這是eslint報(bào)的錯(cuò)
// 下句代碼是讓eslint檢測(cè)語(yǔ)法的時(shí)候 跳過(guò)new關(guān)鍵字的檢測(cè)
/* eslint-disable no-new */
new Vue({
el: 'body',
components: {App}
})
Resource interpreted as script but transferred with MIME type text/plain.
- 描述
項(xiàng)目中 打包好的vue-typescript的文件， 放在tomcat上樣式是對(duì)的，但是放到upjax上樣式出錯(cuò) 并報(bào)了如上警告
tomcat服務(wù)器是根據(jù)自己請(qǐng)求的文件類(lèi)型去返回給你的對(duì)應(yīng)的文件類(lèi)型的 而 upjax沒(méi)那么智能， 如果后臺(tái)的filter沒(méi)有判斷完全的話， 返回前臺(tái)的類(lèi)型是不對(duì)的
這個(gè)項(xiàng)目就是后臺(tái)只判斷了type/html， 導(dǎo)致css文件返回的類(lèi)型也是type/html, 表現(xiàn)是瀏覽器中css樣式失效
解決:后臺(tái)把filter去掉或者就是把類(lèi)型判全， 然后別忘了doFilter放行
node-sass -- XX/node_modules/node-sass: Command failed.
- 描述
在項(xiàng)目根目錄下，直接yarn install 或者 npm intall 安裝項(xiàng)目依賴的時(shí)候 ， 下載到node-sass 就開(kāi)始報(bào)錯(cuò)， 安裝進(jìn)程隨之停止
- 網(wǎng)上找了 好幾種方法 都么解決問(wèn)題
- 既然它一直報(bào)錯(cuò)， 索性就先不安它， 于是去package.json文件，找到此項(xiàng)依賴， 刪除
- 然后 yarn install
- 沒(méi)報(bào)錯(cuò)， 安裝完成
- 然后將剛才刪除的node-sass 項(xiàng)再恢復(fù)
- 再次yarn install 也沒(méi)報(bào)錯(cuò) 項(xiàng)目還正常運(yùn)行起來(lái)了
- 不知道怎么為什么， 反正將node-sass
單獨(dú)安裝就行了，很奇葩?。?！
