vee-cli脚手架实践(下)—模板编译与npm发包

前端

2023-11-04 04:24:19

模板编译

选择对应模板后，即可开始编译。编译过程如下：

执行 npm run build 命令。
webpack开始构建项目。
babel将ES6代码转换为ES5代码。
postcss处理CSS代码。
sass/less/stylus将预处理CSS代码转换为CSS代码。
pug/handlebars/ejs将模板代码渲染为HTML代码。
最终生成编译后的项目文件。

npm发包

编译完成后，即可将项目发布到npm。发布过程如下：

执行 npm publish 命令。
npm将检查项目是否符合发布要求。
npm将生成项目包并将其上传到npm仓库。
项目包即可在npm上供他人下载使用。

模板编译依赖包

metalsmith

metalsmith是一个用于文件操作的工具，它可以帮助我们轻松地读取、修改和写入文件。在vee-cli脚手架中，metalsmith主要用于读取模板文件并将其转换为最终的项目文件。

webpack

webpack是一个用于构建项目的工具，它可以将各种类型的文件（如JS、CSS、图片等）打包成一个或多个文件。在vee-cli脚手架中，webpack主要用于构建最终的项目文件。

babel

babel是一个用于转换代码的工具，它可以将ES6代码转换为ES5代码。在vee-cli脚手架中，babel主要用于将项目中的ES6代码转换为ES5代码，以便兼容旧的浏览器。

postcss

postcss是一个用于处理CSS代码的工具，它可以帮助我们轻松地添加CSS前缀、压缩CSS代码等。在vee-cli脚手架中，postcss主要用于处理项目中的CSS代码。

sass/less/stylus

sass、less和stylus都是CSS预处理器，它们可以帮助我们轻松地编写CSS代码。在vee-cli脚手架中，sass、less和stylus都可以用于预处理项目中的CSS代码。

pug/handlebars/ejs

pug、handlebars和ejs都是模板引擎，它们可以帮助我们轻松地生成HTML代码。在vee-cli脚手架中，pug、handlebars和ejs都可以用于生成项目中的HTML代码。

总结

vee-cli脚手架是一个非常强大的工具，它可以帮助我们快速地构建Vue.js项目。通过使用vee-cli脚手架，我们可以轻松地创建项目、编译项目和发布项目。

附录

包目录结构

|- node_modules/
  |- @vue/cli-service
  |- babel-core
  |- chalk
  |- cross-env
  |- eslint
  |- eslint-loader
  |- eventsource-polyfill
  |- express
  |- extract-text-webpack-plugin
  |- file-loader
  |- html-webpack-plugin
  |- http-proxy-middleware
  |- identity-obj-proxy
  |- ip
  |- js-cookie
  |- less
  |- less-loader
  |- loader-utils
  |- metalsmith
  |- mini-css-extract-plugin
  |- node-notifier
  |- normalize.css
  |- postcss
  |- postcss-cssnext
  |- postcss-import
  |- postcss-loader
  |- postcss-url
  |- pug
  |- pug-loader
  |- querystring
  |- resolve
  |- sass
  |- sass-loader
  |- serialize-javascript
  |- sockjs-client
  |- style-loader
  |- stylus
  |- stylus-loader
  |- terser-webpack-plugin
  |- url-loader
  |- v8-compile-cache
  |- vue
  |- vue-client-only
  |- vue-loader
  |- vue-router
  |- vue-server-renderer
  |- vue-template-compiler
  |- webpack
  |- webpack-cli
  |- webpack-dev-middleware
  |- webpack-hot-middleware
  |- webpack-merge
  |- webpack-node-externals
  |- webpack-sources
|- public/
  |- favicon.ico
  |- index.html
  |- manifest.json
|- src/
  |- App.vue
  |- main.js
  |- router.js
|- .babelrc
|- .gitignore
|- .postcssrc.js
|- package-lock.json
|- package.json
|- README.md
|- vue.config.js