春节后的一周学习任务，春节顺延了一周学习任务，本来还想把两周的学习任务都完成，结果还是高估了自己。不过至少还是完成了 Week17 的学习任务，这周开始工具链的学习。
第一步，准备脚手架 既 Generator
Yeoman
Yeoman是现在社区比较流行的脚手架生成器，既是 generator 的 generator
准备一个 js 模块
npm install yeoman-generator安装yeoman
配置
下面这份是package.json的代码，用于模块配置
{
"name": "generator-vue", // 名字必须'generator-'前缀
"version": "1.0.0",
"description": "",
"main": "generators/app/index.js", // 入口文件
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"dependencies": {
"yeoman-generator": "^4.11.0"
}
}
复制代码
下面这份是index.js的代码，用于配置 generator 模板
var Generator = require('yeoman-generator');
module.exports = class extends Generator { // .......省略部分代码 async initPackage() { // 配置命令行交互，配置一些项目信息 let answer = await this.prompt([ { type: "input", name: "name", message: "Your project name", default: this.appname // Default to current folder name } ]); // Yeoman 依赖系统 const pkgJson = { "name": answer.name, "version": "1.0.0", "description": "", "main": "generators/app/index.js", // .......省略部分代码 }; // Extend or create package.json file in destination path this.fs.extendJSON(this.destinationPath('package.json'), pkgJson); // 执行npm install this.npmInstall(["vue"], { 'save-dev': false}); this.npmInstall(["webpack@4.44.1", "vue-loader", "vue-style-loader", "css-loader@4.2.2", "vue-template-compiler", "copy-webpack-plugin@6.0.3"], { 'save-dev': true}); // .......省略部分代码 // Yeoman 文件模板系统，将模板文件按照配置在对应位置创建文件 this.fs.copyTpl( this.templatePath('webpack.config.js'), this.destinationPath('webpack.config.js') ); // .......省略部分代码 }};
复制代码
*在配置npmInstall的时候，可以通过xxx@1.2.3这样的格式去指定安装包的版本。*
更多详细的配置细节可以参考Yeoman的官方文档
npm link将配置好的本地模块连接到npm的标准模块里
yo vue (可以省略generator-前缀)，执行这命令就可以按照配置好的模板配置一个JavaScript开发环境
第二步，Build 工具
Webpack
Webpack 最初是为 Node 设计的一款打包工具，是完全针对 JavaScript 的，它能将一个 Node 代码打包成一个浏览器的代码。
下面这份是webpack.config.js的代码，用于Webpack打包配置
const webpack = require('webpack'); //to access built-in pluginsconst VueLoaderPlugin = require('vue-loader/lib/plugin');const CopyPlugin = require('copy-webpack-plugin');
module.exports = { entry: "./src/main.js", // 入口文件 module: { // Build 规则配置 rules: [{ test: /\.vue$/, use: 'vue-loader' }, { test: /\.css$/, use: [ 'vue-style-loader', 'css-loader' ] } ] }, plugins: [ // webpack 插件配置 new VueLoaderPlugin(), new CopyPlugin({ patterns: [ { from: 'src/*.html', to: '[name].[ext]' } ], }) ]};
复制代码
Webpack核心机制 --loader，loader配置在module里的rules 中
loader是一个纯粹的文本转换，Webpack会根据import语句或require函数，加载对应的文件
然后通过test规则，决定哪些后缀名文件采用哪些loader
Babel
Babel是完全独立于Webpack的一个独立系统，它的功能是将新版本的 JavaScript 编译成老版本的 JavaScript。
{ "presets": ["@babel/preset-env"]}
复制代码
以上是babel独立使用的方式，更多的时候会结合webpack使用，这时候用的是babel-loader，在 build 过程中，对每个 js 文件都进行转换。
本周学习内容
初始化工具 Yeoman
Webpack 基本知识
Babel 基本知识
参考资料
Yeoman文
Webpack v4 文档
Babel文档
评论