npm 包 generator-frontend-create 使用教程-JavaScript中文网-JavaScript教程资源分享门户

简介

generator-frontend-create 是一个由 Yeoman 构建的前端项目脚手架，它提供了一个使用 Webpack 和 Babel 进行打包的基本工程。使用 generator-frontend-create 可以快速搭建一个前端项目，并且集成了一些常用的前端编译工具，如 SASS、PostCSS 等等。

安装

首先你需要安装 Yeoman，并使用 npm 安装 generator-frontend-create：

npm install -g yo
npm install -g generator-frontend-create

使用

使用 Yeoman 生成一个新项目非常简单，只需要从命令行输入：

yo frontend-create

然后按照提示输入每个项目的详细信息，比如项目名称、作者、描述等等。接下来 generator 会自动创建一个包含预设的目录结构以及默认设置的基本文件的项目模板。

在项目创建成功后，你可以使用 npm run dev 命令启动一个本地服务器，同时也会启动 watch 任务监听你的代码变化。你可以使用 npm run build 命令来构建生产环境的代码。

在项目模板中，generator-frontend-create 还集成了常用的 PostCSS 和 SASS 插件来优化 CSS 代码，同时 Snowpack 能够帮助你优化 JavaScript 的打包速度。

自定义配置

generator-frontend-create 提供了许多配置项供你自定义配置，以下是一些常用的配置：

Browserslist

在项目的根目录下生成了一个 .browserslistrc 文件，你可以在这里配置项目需要支持的浏览器版本。你可以根据需求在浏览器兼容性列表中添加或删除条目，也可以使用全局的 browserslist 配置文件。

ESLint

ESLint 是一个 JavaScript 代码检查工具，generator-frontend-create 集成了 ESLint，你可以在根目录下的 .eslintrc 文件中配置自定义的 ESLint rules。

Webpack

generator-frontend-create 集成了 Webpack，你可以在项目根目录的 webpack.config.js 文件中自定义配置 Webpack。同时，你可以在项目中使用 .env 文件来设置环境变量，这些变量可以在 Webpack 配置中使用。

示例代码

// 手动引入 lodash，这是一个例子
import _ from 'lodash';

let greeting = 'Hello, world!';

console.log(_.upperCase(greeting));

以上通过 generator-frontend-create 创建的项目会支持这种 import 语法，此外还有更多的示例代码可以在创建项目后查看。

结论

使用 generator-frontend-create 可以快速搭建一个前端项目，它默认集成了许多有用的工具和插件，可以提高你的工作效率。同时，你可以根据需求自定义配置来满足项目的要求。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/6005603e81e8991b448de6be