前端页面设计网站,中国商标网商标查询网,wordpress 无图主题,做架构图简单的网站文章目录 前言eslint安装配置设置规则 devtool设置js.map文件使用模式解释文件说明建议方案 devServer安装配置 前言
有些知识点不知道咋归类#xff0c;就先暂时放在同一个文章里了。这里只记录配置方式#xff0c;配置的东西是什么就不过多解释了#xff0c;因为一般需要… 文章目录 前言eslint安装配置设置规则 devtool设置js.map文件使用模式解释文件说明建议方案 devServer安装配置 前言
有些知识点不知道咋归类就先暂时放在同一个文章里了。这里只记录配置方式配置的东西是什么就不过多解释了因为一般需要配置这些东西的也都了解是什么了。 eslint
一般在用cli创建vue工程或者cra创建react工程的时候会默认帮你安装webpack会自动帮你配置好我也比较推荐这种形式。
但是要是没有也没关系自己重新添加即可。
安装
npm i eslint-loader eslint -D同时还需要一个代码规范库这里例子选用airbub我们选择不包含react规范的eslint-config-airbub-base这个库也需要另外的插件支持eslint-plugin-import。
npm i eslint-config-airbub-base eslint-plugin-import -D配置
const HtmlWebpackPlugin require(html-webpack-plugin)module.exports {module: {rules: [{test: /\.js$/,exclude: /node_modules/, // 排除对第三方库的检查loader: eslint-loader,options: {fix: true, // 开启自动修复}}]},plugins: [new HtmlWebpackPlugin({template: ./src/index.html })]
}设置规则
可以在package.json中eslintConfig中设置
{eslintConfig : {extends: airbub-base // 继承我们安装的airbub}
}devtool设置js.map文件
这是啥就不解释了
使用
module.exports {devtool: source-map
}模式解释
可以配置很多种模式但我只记录我认为有用的模式不增加心智负担
source-map生成js.map文件让压缩后的代码在控制台查看起来和源码差不多方便定位问题nosources-source-map生成js.map文件此时如果报错了只会和你说在源码哪个位置报错类似index.js7:2但是你无法查看代码文件因为map文件不给你看。
不写devtool直接就不生成map文件了
文件说明
js.map文件一般都是很大的因为你的工程代码量很多但有些东西是固定的可以说说 内容整理来自https://www.python100.com/html/4WMO9FF4328L.html {version: 3, // 指定map文件版本file: script.min.js, // 压缩后的代码文件名sourceRoot: , // 源文件的根路径sources: [ // 压缩前的文件名数组用来指定map文件中各个部分对应的源代码script.js],names: [], // 指定各个变量和函数名的数组。这在调试的时候可以通过map来查看变量和函数名称mappings: ;;AAAA,GAAIA,IAAIC,MAAY,CAAZ,KAAK,EAAE;CCAgBF,EAAE,KAAK, // 压缩后的代码和源代码对应的具体位置。这是一个非常复杂的字符串它通过映射的方式来指定压缩后的代码和原始代码之间的对应关系sourcesContent: [ // 每个文件的原始代码console.log(\hello world\);]
}了解就行了一般也不会去细看map文件
建议方案
我的建议是开发环境开启但生产环境为了代码安全还是选择关闭。
但是咧这样排查生产环境问题就会很麻烦了难以定位到错误所以生产的要单独一个方案处理。
我看到的基本都是采用监控的方式可以看看这篇文章生产上的问题你不会用 sourcemap 定位吗 devServer
一般在用cli创建vue工程或者cra创建react工程的时候会默认帮你安装webpack会自动帮你配置好我也比较推荐这种形式。
但是要是没有也没关系自己重新添加即可。
安装
npm i webpack-dev-server配置
一些默认就配置的很好的功能就不记录了例如热刷新hot、开启gzip压缩compress等
module.exports {devServer: {open: true, // 项目启动后默认打开网址port: 8081, // 端口号proxy: { // 代理请求服务/api: { // 识别符号target: https://mock.mengxuegu.com/mock/64cc976f686aea63fd6b58d9/ui-collection, // 替换的目标地址pathRewrite: { // 这里可以把地址修改// 去掉api^/api: /,},},},server: https, // 强行用https请求慎用}
}
