从0到1搭建企业级vue3脚手架 （二）

前言

以往像我们搭建vue项目，第一时间想到的就是vue-cli直接命令生成脚手架。

这种方式看似非常轻松、方便，平时写写业务代码或许无所谓，但直到需要你优化项目、解决原理层棘手问题的时候你才猛然发现，过于依赖这个工具反而会导致我们对于底层原理一概不知。这个时候就会措手不及，才逐渐开始去了解底层的部分。

与其到时被动，不如现在主动从0到1去搭建vue3脚手架！

这本小书会手把手地教你如何从“空文件夹”搭建到企业级脚手架。

Babel

到这里得开始关注自身代码的需求了，大多数项目最基础也需要使用到ES6语法了。虽然目前有好一部分浏览器都支持，但是难免会有某些不支持的情况，最好的做法全部转成ES5再给浏览器解析。

我们选择目前非常热门的ES编译器Babel来进行转换，需要安装@babel/core和@babel/preset-env两个插件和创建babel.config.js配置文件。

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

// babel.config.js
module.exports = {presets: [["@babel/preset-env", // ES{targets: {browsers: ["> 0.25%", "not dead"],},},],],
}; 

Babel & Webpack

配置好babel后还需要借助Webpack来对js文件进行构建转换，需要安装babel-loader来配置。

npm i -D babel-loader 

// webpack.base.js
module.exports = {entry: {index: path.resolve(__dirname, "../src/index.js"),},output: {path: path.resolve(__dirname, "../dist"),},plugins: [new HtmlWebpackPlugin({template: path.resolve(__dirname, "../public/index.html"),favicon: path.resolve(__dirname, "../public/logo.svg"),}),],module: {rules: [{test: /\.js$/,exclude: /node_modules/,use: {loader: "babel-loader"},},],},
}; 

这样一来babel-loader就会自动使用babel.config.js的配置了，我们添加ES6语法验证一下。

// src/index.js
console.log("hello world!");
const test = 123;
console.log(test);

let a = 1;
const b = 2;
const c = 333;
console.log("result", a, b, c);

console.log([1, 2, 3].map((n) => n + 1)); // 使用ES6箭头函数 

接着执行npm run build看看构建结果