前端工程化
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 · 413 阅读 · 0 评论 -
webpack4.x配置详解
webpack入门和实战博文 webpack官网原创 2020-05-13 13:31:36 · 339 阅读 · 0 评论 -
git使用详解
一、安装配置git 1.下载安装不提 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 · 194 阅读 · 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 · 1085 阅读 · 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_modules window上: 直接手动删除 (3)如果有package-lock.json文件就删除它,没有不用管,直接跳到第(4)步 linux上:rm -rf package-lock.json wi原创 2021-05-08 10:21:58 · 999 阅读 · 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 · 221 阅读 · 0 评论 -
Vue项目打包dll优化——提升打包速度
背景 webpack每次打包都会去处理所有的模块,包括第三方模块。但是我们一般不会去改第三方模块,能不能让第三方模块只处理一次呢? webpack的打包时间由两个因素决定:所处理的文件数量,所进行的操作步骤 优化会增加操作步骤,但是减少的时间大于增加的时间,则是对打包有帮助的 dll优化 dll为webpack的内置模块 让webpack只处理一次第三方模块,后续的打包告诉webpack不要处理已经打包过的第三方库。 优化步骤 1、build文件夹下新建webpack.dll.js文件,用于对第三方模块进行原创 2020-08-29 17:11:24 · 1243 阅读 · 0 评论 -
webpack打包原理解析
文章目录什么是 webpack ?webpack 核心概念webpack 构建流程编写简易 webpack总结 什么是 webpack ? 本质上,webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时,它会递归地构建一个依赖关系图(dependency graph),其中包含应用程序需要的每个模块,然后将所有这些模块打包成一个或多个 bundle。 webpack 就像一条生产线,要经过一系列处理流程后才能将源文件转换转载 2020-08-24 11:07:51 · 296 阅读 · 0 评论 -
使用webpack自己构建vue开发环境
脚手架是什么 一套项目的主体结构,包括开发过程中用到的工具、环境配置、模块划分等 主体结构全部搭建好了,我们可以利用这个主体结构直接去开发,完成我们的需求,而不用花时间再去配置项目需要用到的东西 vue-cli是什么 一个下载器(启动器),根据不同的配置,下载git上的一个vue目录,帮助我们快速的构建一个项目 我们所看到运行、打包等功能其实是webpack在起作用,真正重要的是loader webpack文件本身是不认识vue文件的,所以需要各种各样的loader将不同的文件转化为webpack可识别的j原创 2020-08-15 14:35:22 · 254 阅读 · 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 · 517 阅读 · 1 评论