自己搭建一个Vue项目工程

这里的意思是不在使用Vue-cli脚手架生成项目了,而是自己从零开始配置webpack打包,完成一个完整的项目。

首先说一下为什么不在使用脚手架,首先是脚手架一般不适合在公司作为项目开发的主力军,脚手架配置并不符合公司的业务场景,一般还要拓展一些额外的功能,在现有的脚手架中修改变得额外的麻烦,所以一般公司都是开发人员自己配置项目打包。

现在我们开始吧!

配置ES6

为了支持ES6,你需要安装如下包

babel-loader 在webpack中必须要loader才能处理代码,所以要安装loader
@babel/core 这个是babel里面自己的方法
@babel/preset-env 这里是将现有已经支持的高级语法转换成低级语法
@babel/runtime-corejs3 这个是浏览器还没有的语法,也就是提案中的语法,浏览器没有,就自己实现,这个包就是实现的所有提案代码
@babel/runtime 如果每个代码都使用了提案的代码,那么每个代码都有一个实现的方法,这样就重复了,那么就要使用把他们放到一个单独的文件中,作为模块带引入
@babel/plugin-transform-runtime 具体怎么引入,需要生成一段代码import这样的添加到我们的代码中,之前是没有的,要用来生成插入到我们的代码中
@babel/plugin-proposal-class-properties 这次插件是支持一些类里面的写法,可以选择性的安装

我们开始安装把,主要是开发依赖还是生成依赖

npm i @babel/core @babel/plugin-transform-runtime @babel/preset-env babel-loader @babel/plugin-proposal-class-properties -D
npm i @babel/runtime @babel/runtime-corejs3 -S

然后创建.babelrc 文件

 

猜你喜欢

转载自blog.csdn.net/wu_xianqiang/article/details/104553658