前端工程化
star-1331
码而不思则惘,思而不码则怠
展开
-
非webpack、cli环境下,babel解析es6代码转为es5,以及grunt中配置babel
在非webpack、cli环境下,引入es6代码,如果不注意直接发布生产,在部分低版本浏览器(IE)或手机(如iphone6P系统版本ios10以下的)会报错。这时,需要通过babel解析,将es6代码转为es5才可以正常运行。第一步新建目录,命令行输入npm init 对项目进行初始化,生成package.json配置文件第二步在根目录下新建一个用于babel编译.babelrc文件{...原创 2020-04-02 14:24:11 · 411 阅读 · 0 评论 -
webpack4.x配置详解
webpack入门和实战博文webpack官网原创 2020-05-13 13:31:36 · 313 阅读 · 0 评论 -
git使用详解
一、安装配置git1.下载安装不提2.配置git配置你的名字和邮箱$ git config --global user.name “John Doe”$ git config --global user.email "johndoe@example.com"二、上传项目1.选择要上传的文件,右击选择Git Bash Here打开命令行;2.执行git init将本地库变为本地git...原创 2018-11-07 13:47:33 · 189 阅读 · 0 评论 -
grunt构建项目打包上传
全局安装grunt: npm install -g grunt-cli 生成package.json文件: npm init 安装grunt和所需要的插件: npm install grunt –save-dev npm install –save-dev grunt-contrib-concat grunt-contrib-jshint grunt-...原创 2018-09-17 17:26:34 · 1064 阅读 · 0 评论 -
npm问题——npm ERR! code ELIFECYCLE
问题原因npm install安装的是package-lock.json中的指定版本,而不是package.json中适配你本地环境的版本。解决方案(1)第一步npm cache clean --force(2)第二步 删除node_modules文件夹linux上:rm -rf node_moduleswindow上: 直接手动删除(3)如果有package-lock.json文件就删除它,没有不用管,直接跳到第(4)步linux上:rm -rf package-lock.jsonwi原创 2021-05-08 10:21:58 · 975 阅读 · 0 评论 -
yarn使用中的问题
There appears to be trouble with your network connection. Retrying…npm 和 yarn 混用导致的,删除 yarn.lock 文件后重新 yarn设置淘宝镜像代理yarn config set registry https://registry.npm.taobao.org原创 2021-05-08 10:17:42 · 217 阅读 · 0 评论 -
Vue项目打包dll优化——提升打包速度
背景webpack每次打包都会去处理所有的模块,包括第三方模块。但是我们一般不会去改第三方模块,能不能让第三方模块只处理一次呢?webpack的打包时间由两个因素决定:所处理的文件数量,所进行的操作步骤优化会增加操作步骤,但是减少的时间大于增加的时间,则是对打包有帮助的dll优化dll为webpack的内置模块让webpack只处理一次第三方模块,后续的打包告诉webpack不要处理已经打包过的第三方库。优化步骤1、build文件夹下新建webpack.dll.js文件,用于对第三方模块进行原创 2020-08-29 17:11:24 · 1217 阅读 · 0 评论 -
webpack打包原理解析
文章目录什么是 webpack ?webpack 核心概念webpack 构建流程编写简易 webpack总结什么是 webpack ?本质上,webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时,它会递归地构建一个依赖关系图(dependency graph),其中包含应用程序需要的每个模块,然后将所有这些模块打包成一个或多个 bundle。webpack 就像一条生产线,要经过一系列处理流程后才能将源文件转换转载 2020-08-24 11:07:51 · 178 阅读 · 0 评论 -
使用webpack自己构建vue开发环境
脚手架是什么一套项目的主体结构,包括开发过程中用到的工具、环境配置、模块划分等主体结构全部搭建好了,我们可以利用这个主体结构直接去开发,完成我们的需求,而不用花时间再去配置项目需要用到的东西vue-cli是什么一个下载器(启动器),根据不同的配置,下载git上的一个vue目录,帮助我们快速的构建一个项目我们所看到运行、打包等功能其实是webpack在起作用,真正重要的是loaderwebpack文件本身是不认识vue文件的,所以需要各种各样的loader将不同的文件转化为webpack可识别的j原创 2020-08-15 14:35:22 · 251 阅读 · 0 评论 -
基于node构建前端脚手架工具
解析vue中的build.js文件'use strict'require('./check-versions')()process.env.NODE_ENV = 'production'//显示进度条const ora = require('ora')//用于删除文件夹,node自身不能读取或删除文件夹const rm = require('rimraf')//操作路径const path = require('path')//改变打印的字体颜色const chalk = requi原创 2020-07-25 13:07:01 · 499 阅读 · 1 评论