前端进阶之路

# 打包

# gulp3和gulp4，有什么区别？

  1. task写法改变，升级4之后已经启动的任务需要用callback或者return，否则任务不会继续往下进行 gulp.task('task1', (cb) => { cb(); })
  2. gulp4引入了gulp.series和gulp.parallel来串行和并行执行任务。 现在我们可以用gulp.series来替代原来引入的第三方库sequence来串行执行任务 gulp.task('pack', Sequence()) => gulp.task('pack', gulp.series());
  3. gulp.task不再支持通过数组的形式传入任务，需要替换成gulp.series()或gulp.parallel()来执行 gulp.task('default', ['task1', 'task2'])=>gulp.tack('default', gulp.series('task1', 'task2'))

# 如何引入eslint和prettier？

midway的代码风格库是mwts。使用mwts里面为我们定义的默认配置

.prettierrc.json =》 创建.prettierrc.js文件，将mwts下的prettierrc配置require进来展开即可
module.exports = {
...require('mwts/.prettierrc.json'),
};
.eslintrc 里面的extends属性继承mwts的配置文件 "extends": "./node_modules/mwts/"
1
2
3
4
5

# babel原理？(解析-转换-生成)

  • 通过babylon解析es6+代码，得到AST(抽象语法树)->通过babel-traverse对ast进行遍历转译->
  • 得到新的ast->用babel-generator通过抽象语法树生成ES5代码

# babel的preset和plugin代表什么？

  • preset是预设，可以把多个plugin封装成一个preset，通过preset来批量引入plugin
  • 配置处理顺序：先plugin再preset。plugin从前到后，preset从后到前

# rollup了解过吗？

  • 比webpack更小巧，没有webpack功能强大
  • 支持tree-shaking。支持esm转cjs
  • rollup打包结果依然可读 (开发一个应用涉及很多第三方模块，不适合rollup，但如果是设计一个js框架或者类库就比较适合。因为rollup执行效率更高)
rollup main.js即可输出打包结果
rollup main.js --file bundle.js(指定文件) =》 打包到指定文件
1
2

# esbuild

  • esbuild 文件(app.jsx) --bundle --outfile=dist.js=>打包到指定文件
  • 主要功能：bundler用来代码编译 minifier功能类似terser

# npm传参

  1. 通过--的方式 如:"dev": npm run test --tt=dev 再通过"test": "echo $npm_config_tt"可以取到 tt的值为dev
  2. 通过配置的方式 如:在package.json中配置 "config": { "ee": 123 } "test": "echo $npm_package_config_ee" 可以取到ee的值是123
  3. 通过script直接传值 "dev": "abc=123 npm run test" "test": "echo $abc" 输出123