Aaron

Aaron 查看完整档案

广州编辑广东石油化工学院  |  测控技术与仪器 编辑某互联网公司  |  前端攻城狮 编辑 www.cnblogs.com/aaron-pan/ 编辑
编辑

苦逼进阶中的前端,求指教
公众号:前端美食汇
备注:https://www.bing.com/?FORM=Z9...

个人动态

Aaron 发布了文章 · 2020-11-18

百人打call计划

百人打call计划!

各位大佬好,小弟我打算求婚了,打算来个百人打call计划给女票一个惊喜。 打call计划,发布个祝福的话到《爱情小副手》小程序,结构希望是: 祝福的话+(地标建筑+手拿祝福卡片+时间)+定位 可参考已有动态~
image

查看原文

赞 0 收藏 0 评论 0

Aaron 提出了问题 · 2020-02-11

react-native init 报错,求解

`error D:React_Testnode_modulescore-js: Command failed.
Exit code: 1
Command: node -e "try{require('./postinstall')}catch(e){}"
Arguments:
Directory: D:React_Testnode_modulescore-js
Output:
ϵͳ�Ҳ���ָ����·����
info Visit https://yarnpkg.com/en/docs/c... for documentation about this command.
Error: Command failed: yarn add react-native --exact

at checkExecSyncError (child_process.js:621:11)
at execSync (child_process.js:657:15)
at run (C:\Users\Admin\AppData\Roaming\npm\node_modules\react-native-cli\index.js:294:5)
at createProject (C:\Users\Admin\AppData\Roaming\npm\node_modules\react-native-cli\index.js:249:3)
at init (C:\Users\Admin\AppData\Roaming\npm\node_modules\react-native-cli\index.js:200:5)
at Object.<anonymous> (C:\Users\Admin\AppData\Roaming\npm\node_modules\react-native-cli\index.js:153:7)
at Module._compile (internal/modules/cjs/loader.js:956:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:973:10)
at Module.load (internal/modules/cjs/loader.js:812:32)
at Function.Module._load (internal/modules/cjs/loader.js:724:14) {

status: 1,
signal: null,
output: [ null, null, null ],
pid: 6564,
stdout: null,
stderr: null
}
Command yarn add react-native --exact failed.`

请问有大佬知道这个报错的原因么?试了很多次都不成功,以及设置过了镜像源
`
yarn config set registry https://registry.npm.taobao.org --global
yarn config set disturl https://npm.taobao.org/dist --global
`

关注 2 回答 1

Aaron 发布了文章 · 2020-01-08

webpack的基本配置都掌握了么?

webpack5都出了,webpack4的的基本配置,解析ES6,引入CSS,编译Less,设置image等等,你都会了么?

​解析ES6

了解Babel

Babel是一个JavaScript编译器,可以实现将ES6+转换成浏览器能够 识别的代码。

Babel在执行编译时,可以依赖.babelrc文件,当设置依赖文件时, 会从项目的根目录下读取.babelrc的配置项,.babelrc配置文件 主要是对预设(presets)插件(plugins)进行配置。

其中,presets可以标识需要转换的源码使用了哪些新特性, 可以理解为一系列plugins的集合,例如babel-preset-es2015,可以 将es6转换为es5;而plugins则指示babel如何对代码进行转换, 例如plugin-transform-arrow-functions可将ES6语法转换为 ES5。

解析ES6

1、安装依赖

npm i @babel/core @babel/preset-env babel-loader -D

2、配置webpack.config.js设置loader


 module: {
        rules: [
            {
                test: /.js$/,
                use: 'babel-loader' }
        ]
    }

3、根目录创建.babelrc,并配置preset-env对ES6+语法特性进行转换

{ "presets": [ "@babel/preset-env" ]}

解析React:JSX

1、安装react及@babel/preset-react

npm i react react-dom @babel/preset-react -D

2、配置解析React的presets

{ "presets": 
[ "@babel/preset-env", "@babel/preset-react" ]
}

解析CSS和Less

css-loader:用于加载.css文件并转换成commonjs对象。
style-loader:将样式通过style标签插入到head中。

1、安装依赖css-loader和style-loader

npm i style-loader css-loader -D

2、webpack配置项添加loader配置,其中由于loader的执行顺序是从右 向左执行,所以会先进行css的样式解析后执行style标签的插入。

{
   test:/.css$/,
   use: [ 'style-loader', 'css-loader' ]
}

3、less-loader,将less转换成css。安装less-loader依赖并添加webpack配置

{
    test:/.less$/,
    use: [ 'style-loader', 'css-loader', 'less-loader' ]
}

解析图片和字体

file-loader

file-loader:用于处理文件及字体。

按照file-loader依赖并配置

npm i file-loader -D
{
   test: /\.(png|svg|jpg|jpeg|gif)$/,
   use: 'file-loader' },
{
    test:/\.(woff|woff2|eot|ttf|otf|svg)/,
    use:'file-loader' }

url-loader

url-loader也可以处理文件及字体,对比file-loader的优势就是可以通过设置配置, 设置小资源自动转换为base64。

安装url-loader依赖并配置webpack。

{
     test: /\.(png|svg|jpg|jpeg|gif)$/,
      use: [
           {
               loader:'url-loader',
               options: {
                   limit:10240 }
           }
      ]
}

文件监听:watch

通过监听源码的变化,自动构建出新的输出文件。

可通过webpack添加配置或者CLI添加的方式开启监听模式,该方式源码变化时需要每次手动刷新浏览器:

1、webpack配置设置

module.export = {
    watch: true 
}

2、CLI添加参数:-- watch。

除了通过watch参数的配置方式开启监听,亦可通过定制watch模式选项的形式watchOptions来 定制监听配置。

module.export = {
    watch: true, // 只有开启了监听模式,才有效
    watchOptions: {
        ignored: /node\_modules/, //默认为空,设置不监听的文件或文件夹
        aggregateTimeout: 300, // 默认300ms,监听变化后需要等待的执行时间
        poll:1000   // 默认1000ms,通过轮询的方式询问系统指定文件是否发生变化
 }
}

热更新:webpack-dev-server

热更新基本原理

热更新大概流程:

webpack Compiler,将JavaScript编译成输出的bundle文件。
HMR Server,将热更新的文件输出到HMR Runtime。
Bundle Server,通过提供服务器的形式,提供浏览器对文件的访问。
HMR Runtime,开发打包阶段时,将构建输出文件注入到浏览器,更新文件的变化。

当启动webpack-dev-server阶段时,将源码在文件系统进行编译,通过webpack Compiler编译器 打包,并将编译好的文件提交给Bundle Server服务器;Bundle Server即可以服务器的 方式供浏览器访问。

当监听到源码发生变化时,经过webpack Compiler的编译后提交给 HMR Server,一般通过websocket实现监听源码的变化,并通过json数据的格式通知HMR Runtime,HMR Runtime 对bundle进行改变并刷新浏览器。

热更新配置

相比于watch不能自动刷新浏览器,webpack-dev-server的优势就明显了。webpack-dev-server构建的内容会存放在内存中,所以构建速度更快, 并且可自动的实现浏览器的自动识别并作出变化。其中,webpack-dev-server 需要配合webpack内置的HotModuleReplacementPlugin插件一起使用。

1、安装依赖webpack-dev-server并配置启动项

npm i webpack-dev-server -D
// package.json
"scripts": { "dev": "webpack-dev-server --open" }

2、配置webpack,其中webpack-dev-server一般在开发环境中使用,所以需 设置mode模式为development。

const webpack = require('webpack')
plugins: [ new webpack.HotModuleReplacementPlugin()
    ],
    devServer: {
        contentBase: path.join(__dirname,'dist'),// 监听dist文件夹下内容
        hot: true//启动热更新
}

更多配置项可参考:https://www.webpackjs.com/configuration/dev-server/

文件指纹

hash:整个项目的构建相关,当有文件修改,整个项目构建的hash值就会更新。
chunkhash:和webpack打包的chunk相关,不同的entry会生成不同的chunkhash,一般用于js的打包。
contenthash:根据文件内容来定义hash,文件内容不变,contenthash不变。例如css的打包,由于 修改js或html文件,但是没有修改引入的css样式时,文件不需要生成新的哈希值,所以可适用于css的打包。

备注,文件指纹不能和热更新一起使用。

JS文件指纹设置:chunkhash

webpack.dev.js

module.export = {
     entry: {
           index: './src/index.js',
           search: './src/search.js' },
        output: {
            path: path.resolve(__dirname,'dist'),
            filename: '[name][chunkhash:8].js' },
}

CSS文件指纹:contenthash

由于上面方式通过style标签将CSS插入到head中并没有生成单独的CSS文件,我们可以 通过min-css-extract-plugin插件将CSS提取成单独的CSS文件,并添加文件指纹。

1、安装依赖mini-css-extract-plugin

npm i mini-css-extract-plugin -D

2、配置CSS文件指纹

const MiniCssExtractPlugin = require('mini-css-extract-plugin')
module.export = {
    module: {
        rules: [
            {
                test:/\.css$/,
                use: [
                    MiniCssExtractPlugin.loader, 'css-loader',
                ]
            },
        ]
    },
     plugins: [ new MiniCssExtractPlugin({
           filename: '[name][contenthash:8].css' })
     ]
}

图片文件指纹设置:hash

其中,hash对应的是文件内容的哈希值,默认为md5生成,不同于前面所说的hash值。

module.export = {
    module:{
        rules: [
            {
                 test: /\.(png|svg|jpg|jpeg|gif)$/,
                 use: [{
                     loader:'file-loader',
                     options: {
                         name: 'img/[name][hash:8].[ext]' }
                 }],           
            }
        ]
    }
}

代码压缩

其中js压缩,webpack4.x版本已经内置了uglifyjs-webpack-plugin实现压缩。

CSS 文件压缩:optimize-css-assets-webpack-plugin

1、安装optimize-css-assets-webpack-plugin和预处理器cssnano

npm i optimize-css-assets-webpack-plugin cssnano -D

2、配置webpack

const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin')
module.export = {
    plugins: [ new OptimizeCssAssetsPlugin({
             assetNameRegExp: /\\.css$/g,
             cssProcessor: require('cssnano')
         })
    ]
}

html文件压缩:html-webpack-plugin

1、安装html-webpack-plugin插件

npm i html-webpack-plugin -D

2、配置webpack

const HtmlWebpackPlugin = require('html-webpack-plugin')  
module.export = {  plugins: [  
 new HtmlWebpackPlugin({  
  template: path.join(__dirname,'src/search.html'), // 使用模板  
  filename: 'search.html',    //  打包后的文件名  
  chunks: ['search'], // 打包后需要使用的chunk(文件)  
  inject: true, // 默认注入所有静态资源  
  minify: {  
  html5:true,  
  collapsableWhitespace: true,  
  preserveLineBreaks: false,  
  minifyCSS: true,  
  minifyJS: true,  
  removeComments: false  
 } }), ]}

对应的完整demo代码可查看地址:https://github.com/PCAaron/blogCode/tree/master/webpack/webpack-basic

推荐

后续文章优先更新于GitHub和公众号上,欢迎大家star和关注提前获取最新文章,感谢~

GitHub:https://github.com/PCAaron/PCAaron.github.io

公众号:前端美食汇,亦可直接扫二维码直接关注
erweima.jpg

webpack学习流程

webpack简介

  • 构建发展史

基础篇:webpack的基本用法

  • webpack的基本用法
  • webpack的进阶用法

进阶篇:webpack的构建优化

  • 编写可维护的webpack构建配置
  • webpack构建速度和体积优化

原理篇:webpack的打包原理

推荐阅读

Babel:https://babeljs.io/docs/en/

webpack-dev-middleware:https://github.com/webpack/webpack-dev-middleware

webpack热更新原理:https://segmentfault.com/a/1190000020310371

查看原文

赞 0 收藏 0 评论 0

Aaron 赞了回答 · 2019-06-10

解决vue.js的keep-alive include无效

name,是name属性!!!注意一定要给需要缓存的组件都写name属性的值。我一开始还以为是路由的name值,后来发现搞错了 = =

关注 13 回答 8

Aaron 提出了问题 · 2019-06-05

如何设置input file值

在Vue中使用input file进行文件上传,删除文件时同时情况file值,设置为null,但是就会引起报错,报错信息为:
"InvalidStateError: Failed to set the 'value' property on 'HTMLInputElement': This input element accepts a filename, which may only be programmatically set to the empty string."
有大佬知道如何解决这个问题么?因为现在遇到的问题是,删除值之后可能用户还是提交同一个文件,则不会再次触发file 的change事件。

关注 2 回答 1

Aaron 提出了问题 · 2019-03-14

app分享vue hash模式项目,如何避免?from=groupmessage参数拼接在#之前

如题,从APP分享到微信群的链接,默认在url后面拼接了参数,并且由于vue路由形式的hash模式,所以把参数拼接在#之前,导致页面路径错误,有大神可以解答么

关注 2 回答 1

Aaron 分享了头条 · 2019-01-22

关于vue开发中需要注意的细节

赞 0 收藏 0 评论 0

Aaron 提出了问题 · 2019-01-18

vue history模式微信分享的坑有哪个大佬懂

vue 路由模式为history模式时,微信授权分享出去的链接和封面是失败的,有大佬知道么?
如图:

clipboard.png

关注 2 回答 1

Aaron 分享了头条 · 2019-01-15

主要是关于vue-cli单页应用开发在开发中及项目部署上的一些小结及踩坑指南。

赞 0 收藏 0 评论 0

Aaron 回答了问题 · 2019-01-11

vue history模式调用微信支付,提示get_brand_wcpay_request:fail

谢谢各位的回答,后台的参数大小写错了

关注 4 回答 4

认证与成就

  • 获得 29 次点赞
  • 获得 26 枚徽章 获得 0 枚金徽章, 获得 3 枚银徽章, 获得 23 枚铜徽章

擅长技能
编辑

开源项目 & 著作
编辑

注册于 2017-06-07
个人主页被 1k 人浏览