入个门, 实践webpack, yarn, bable, sass, ……

基础环节

安装环节
#yarn
brew install yarn #如果没有yarn 用这一句. 
cnpm install -g yarn #实际上用npm安装yarn更好. brew安装会有各种问题. 
#安装依赖
yarn add --dev webpack @babel/core babel-loader @babel/preset-env node-sass css-loader sass-loader style-loader postcss-loader autoprefixer

#添加react
yarn add react react-dom
  • 参考: https://medium.com/front-end-weekly/what-are-npm-yarn-babel-and-webpack-and-how-to-properly-use-them-d835a758f987
  • 问题, 说明以及解决方案
#纯示例, 不必执行这个 --save-dev的意思是这些工具只是开发使用的, 生产编译的时候不要带上
npm install webpack webpack-cli --save-dev

#如果安装过yarn, 或者无法安装yarn
neton #我的代理alias 为了brew能快一点
brew upgrade yarn #mac用brew省心
brew link --overwrite yarn #或许需要这一句

#安装依赖
yarn add --dev webpack @babel/core babel-loader @babel/preset-env node-sass css-loader sass-loader style-loader postcss-loader autoprefixer

# 这里会遇到问题, 老办法, 先开代理试一下. 
neton #这其实是一个开全局代理的alias
# 报警告: node-sass > request@2.88.2: request has been deprecated, 这里其实是request这个项目停止维护了.  request是和express相对的, request负责client, express负责server

# 继续报错:
		# error /Users/bergman/node_modules/node-sass: Command failed.
		#	gyp: No Xcode or CLT version detected!
		# 并且惊讶的发现, yarn 安装到了bergman的根目录. 神啊.

# 三个问题中, 第一个问题依赖于第二个问题, 要先解决第二个才能解决第一个.
yarn init #貌似可以解决第三个问题.

#解决第二个问题(xcode)
xcode-select --print-path
# in my case /Library/Developer/CommandLineTools
sudo rm -rf /Library/Developer/CommandLineTools
# install them (again) if you don't get a default installation prompt, 大概率不必, 系统会自动安装
xcode-select --install
# 此时可能发生错误: 不能安装该软件，因为当前无法从软件更新服务器获得。

yarn add node-sass #目标解决第一个问题, 失败了, 依旧有第二个问题.
源文件环节
// .eslintrc.js 需要配置不然的话jsx会通不过校验
module.exports = {
	"extends": [
    "eslint:recommended",
    "plugin:react/recommended"
],
	parserOptions: {
		sourceType: 'module',
		allowImportExportEverywhere: true,
	}
};

//package.json可以添加script
"scripts": {
    "lint": "eslint src/**/*.js src/**/*.jsx"
}//这里出问题了. 为了避开node_modules, 所以源文件确实要一个单独目录.
//webpack.config.js 这样也可以: 
module: {
  rules: [
    {
      test: /\.(js|jsx)$/,
      exclude: /node_modules/,
      use: ["babel-loader", "eslint-loader"]
    }
  ]
},

//需要命令行安装
yarn add eslint-plugin-react@latest --save-dev
  • 参考: https://medium.com/@RossWhitehouse/setting-up-eslint-in-react-c20015ef35f7
  • https://www.robinwieruch.de/react-eslint-webpack-babel
webpack环节
#设置webpack.config.js, postcss.config.js, package.json之后
yarn run build
yarn add --dev webpack-dev-server
yarn run dev

这里也会报错

yarn run build 
#错误的原因是: 
"webpack-cli": "^3.3.10",
#原本用了: 
"webpack-cli": "^4.1.0",

原因是 webpack-cli 4 和 3 有重大区别 参见下文 webpack5和cli4

  • https://webpack.js.org/api/cli/

关于为什么?

https://dev.to/getd/wtf-are-babel-and-webpack-explained-in-2-mins-43be

  • 前端需要webpack, 因为:
    • 前端n多文件类型要处理.
    • 需要把文件打包合并压缩, 提升加载.
    • 前端本身没有模块机制, 就算有也不好用. babel能翻译模块机制, 但是, 不论咋翻译, 浏览器里面几乎没有执行的可能性. 顺便说一句, 浏览器号称支持es6模块, 但是, 其实就算了吧.
  • 后端只要babel就够了.
    • 后端只有js.
    • 后端就是个模块导入而已.
    • 服务端什么时候也要webpack呢? 一个理由是服务端渲染server-side render
  • webpack能干啥
    • webpack可以运行babel.
    • 可以收集inlinestyle, 并且提取出来.
  • 所以
    • 前端用webpack(他会调用babel).
    • 后端用babel
webpack v5和webpack cli v4
  • 有中文页面: https://webpack.docschina.org/concepts/
"scripts": {

  编译
  // v3
  "build": "webpack -p",
  // v4
  "build": "webpack --progress --mode=production",




  "watch": "webpack --progress --watch"


  运行   
  // For webpack-cli 3.x:
		"dev": "webpack-dev-server --hot --inline",
  // For webpack-cli 4.x:
  "start:dev": "webpack serve"
}
webpack使用babel react eslint
{
  test: /\.jsx/,
  use: {
    loader: 'babel-loader',
    options: {presets: ['@babel/preset-react','@babel/preset-env']}
  }
},
{
  test: /\.(js|jsx)$/,
  exclude: /node_modules/,
  use: ["babel-loader", "eslint-loader"]
}
单独使用babel
npm install @babel/core @babel/preset-env babel-loader --save-dev
javascript的各种工具
  • 包管理器 package manager
    • bower
    • npm
    • 主流: yarn
  • 打包工具 mobule bundler
    • browserify
    • 主流: webpack
    • parcel
    • rollup 更适合库的打包
  • 编译工具 compiler
    • css
      • 主流: sass
      • less
      • stylus
    • js
      • coffee github
      • typescript ms
      • 主流: babel
  • lint工具
    • eslint
    • stylelint
  • 格式化工具
    • prettier
  • 语法检查工具
    • flow
  • 自动任务执行ci/cd task runner
    • 任务包括
      • 压缩代码
      • 优化图片
      • 自动测试
    • 工具
      • grunt
      • gulp
      • 主流: npm package.json
  • 脚手架工具scaffolding
    • slush
    • yeoman
    • umi
  • 框架
    • 界面工具
      • react
      • angular
      • vue
    • 状态工具
      • flux
      • 主流: redux
    • 测试
      • jest
      • enzyme
    • react 的 debug工具
      • logrocket
  • 参考
    • https://medium.com/the-node-js-collection/modern-javascript-explained-for-dinosaurs-f695e9747b70
    • https://stackoverflow.com/questions/35062852/npm-vs-bower-vs-browserify-vs-gulp-vs-grunt-vs-webpack?rq=1
打包工具 mobule bundler
  • 4个主力
    • browserify
    • 主流: webpack
    • parcel 这个最简单, 适合小项目
    • rollup 更适合库的打包
  • 新的, 参考第一篇文章
    • snowpack
    • poi
    • pax
  • 参考
    • 质量非常好: https://blog.logrocket.com/benchmarking-bundlers-2020-rollup-parcel-webpack/
    • https://medium.com/swlh/webpack-vs-rollup-vs-parcel-vs-browserify-bundle-size-build-time-ease-of-use-comparison-d80699822c37
    • https://www.infoq.com/news/2020/07/google-team-build-tool-benchmark/
    • 对这四个工具进行测试: https://bundlers.tooling.report/

后续

1029
  • 这些都不行……
npm i eslint@es6jsx #这个可以让eslint支持, 但是有些问题
npx install-peerdeps --dev eslint-config-airbnb #这个更是执行报错
1030
  • 经过昨天的安装之后, 今天果然卡壳了, 卡在了: yarn run build
  • 返回头从来一遍, 发现可能有不少问题, 被我忽略了. 重装xcode commandlinetools解决了. 之前的问题.