内容简介:初始化 npm,然后在本地安装 webpack 和 webpack-cli(此工具用于在命令行中运行 webpack):新建一个 webpack 配置文件 webpack.config.js,如下:
Flow 是 Facebook 出品的,针对 JavaScript 的静态类型检查工具。它可以帮助捕获 JavaScript 开发中的常见错误,而不需要额外地修改原有的代码,比如静态类型转换,空值引用等问题。同时,Flow 为 JavaScript 添加了静态类型的语法标识,这样开发者便可以明确代码中的类型,让其自动地被 Flow 所维护。本文将详细介绍使用 Webpack、ESlint、Babel 与 Flow 集成的开发环境的构建过程。
安装 Webpack
初始化 npm,然后在本地安装 webpack 和 webpack-cli(此 工具 用于在命令行中运行 webpack):
npm install webpack webpack-cli --save-dev
新建一个 webpack 配置文件 webpack.config.js,如下:
const path = require('path') module.exports = { entry: './src/index.js', output: { filename: 'bundle.js', path: path.resolve(__dirname, 'dist') } }
配置 ES6 开发环境
使用 Babel 编译器配置 es6 开发环境,使用 Babel 编译器必须先安装 @babel/core 和 @babel/preset-env 两个模块,其中 @babel/core 是 Babel 的核心存在,Babel 的核心 api 都在这个模块里面,比如:transform。而 @babel/preset-env 是一个智能预设,允许您使用最新的 JavaScript,而无需微观管理您的目标环境需要哪些语法转换(以及可选的浏览器polyfill)。因为这里使用的打包工具是 Webpack,所以还需要安装 babel-loader 插件。
npm install --save-dev babel-loader @babel/core @babel/preset-env
修改 webpack.config.js 文件,增加以下配置:
{ module: { rules: [ { test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader' } ] } }
创建 .babelrc 文件:
{ "presets": [ "@babel/preset-env" ] }
由于 babel 默认只转换 ES6 新语法,不转换新的 API,如:Set、Map、Promise等,所以需要安装 @babel/polyfill 转换新 API。安装 @babel/plugin-transform-runtime 优化代码,@babel/plugin-transform-runtime 是一个可以重复使用 Babel 注入的帮助程序代码来节省代码的插件。
npm install --save-dev @babel/polyfill @babel/plugin-transform-runtime
修改 .babelrc 配置文件:
{ "presets": [ [ "@babel/preset-env", { "useBuiltIns": "usage", // 在每个文件中使用polyfill时,为polyfill添加特定导入。利用捆绑器只加载一次相同的polyfill。 "modules": false // 启用将ES6模块语法转换为其他模块类型,设置为false不会转换模块。 } ] ], "plugins": [ [ "@babel/plugin-transform-runtime", { "helpers": false } ] ] }
其他配置项,如:浏览器兼容性等,可按需求配置。
配置 ESlint 代码格式检查
安装 ESlint 相关依赖:
npm install --save-dev eslint eslint-loader babel-eslint
修改 webpack.config.js 配置文件,添加 eslint-loader:
{ test: /\.js$/, exclude: /node_modules/, loader: ["babel-loader", "eslint-loader"] }
新建 .eslintrc 配置文件,如下:
{ "parser": "babel-eslint", "extends": "eslint:recommended", "parserOptions": { "env": { "es6": true } } }
配置 Flow 静态类型检查
安装依赖:
npm install --save-dev flow-bin @babel/plugin-syntax-flow @babel/plugin-transform-flow-comments babel-plugin-transform-class-properties eslint-plugin-flowtype-errors
依赖解释:
- flow-bin :Flow 的二进制包装器—— JavaScript 的静态类型检查器
- @babel/plugin-syntax-flow :在 Babel 中增加了对 Flow 语法的支持
- @babel/plugin-transform-flow-comments :使用 Babel 进行编译之前,从源文件中将 Flow 语法指令转换为注释代码。
- babel-plugin-transform-class-properties :添加对类属性和静态方法的支持
- eslint-plugin-flowtype-errors :将 Flow 错误通过 ESlint 传递给编辑器的 eslint 插件(如果有的话)。
在 .eslintrc 配置文件中增加以下配置项:
{ "plugins": [ "flowtype-errors" ], "rules": { "flowtype-errors/show-errors": 2 } }
修改 .babelrc 配置文件中的 plugins 配置项,如下:
{ "plugins": [ "babel-plugin-transform-class-properties", "@babel/plugin-syntax-flow", "@babel/plugin-transform-flow-comments", [ "@babel/plugin-transform-runtime", { "helpers": false } ] ] }
注意插件顺序。这与 Babel 预设和插件运行顺序有关。
Babel 预设与插件运行顺序:
- 插件在预设之前运行。
- 插件从第一至最后顺序运行。
- 预设顺序相反(从最后到第一)。
例如:
{ "plugins": ["transform-decorators-legacy", "transform-class-properties"] }
先运行 transform-decorators-legacy 然后再运行 transform-class-properties。
重要的是要记住,对于预设,顺序是相反的。下列:
{ "presets": ["es2015", "react", "stage-2"] }
将按照以下顺序运行:stage-2,react,然后 es2015。
执行以下命令:
flow init
该命令将创建一个 Flow 配置文件 .flowconfig 文件,该文件可以为空文件,但必须保证有这个文件。
在 src 目录下新建一个 index.js 文件,编写带有 Flow 静态类型检查代码:
/* @flow */ const x: number = 10 function square (x: number = 5): number { return x * x } square() square(x)
完整的配置文件
webpack.config.js 配置文件:
const path = require("path") module.exports = { mode: "none", watch: true, entry: "./src/index.js", output: { filename: "bundle.js", path: path.resolve(__dirname, "dist"), }, module: { rules: [ { test: /\.js$/, include: /src/, exclude: /node_modules/, loader: ["babel-loader", "eslint-loader"] }, ], }, };
.babelrc 配置文件:
{ "presets": [ [ "@babel/preset-env", { "useBuiltIns": "usage", "modules": false } ] ], "plugins": [ "babel-plugin-transform-class-properties", "@babel/plugin-syntax-flow", "@babel/plugin-transform-flow-comments", [ "@babel/plugin-transform-runtime", { "helpers": false } ] ] }
.eslintrc配置文件:
{ "parser": "babel-eslint", "extends": ["eslint:recommended"], "parserOptions": { "env": { "es6": true } }, "plugins": [ "flowtype-errors" ], "rules": { "flowtype-errors/show-errors": 2 } }
项目 Github 地址: https://github.com/JofunLiang/flow-typecheck-example
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网
猜你喜欢:- 利用 MinIO 轻松搭建静态资源服务
- 如何快速搭建静态资源服务器
- # golang搭建静态web服务器
- 快速搭建 HTTP 静态服务的 10 种方法
- Node.js 系列 - 搭建静态资源服务器
- 深入nodejs-搭建静态服务器(实现命令行)
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。