入门篇 · 前端工程化指南

[TOC] ## 前言从之前的教程中你也许知道了一些npm script的基本命令，但是深入的使用并用之更好的引导实践你可能还不清楚。 ## 包初始化 ### 基本初始化 npm init 可以实现基本的包文件初始化，在一系列的确认选择中你可以输入自己设置的包文件的基本信息。 ### 使用默认设置如果你想跳过这些基本的配置，你可以通过npm init -f 使用默认配置来完成包文件的初始化 ~~~ npm init -f npm WARN using --force I sure hope you know what you are doing. Wrote to /Users/bingo/Documents/work/demo2/package.json: { "name": "demo2", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "keywords": [], "author": "", "license": "ISC" } ~~~ ### 自定义初始化配置你可以通过配置文件实现自定义包文件的默认配置 ~~~ cnpm config set init.author.name 'zhangbing' cnpm config set init.author.email 'hdu007@163.com' cnpm config set init.author.url 'http://github.com/csnikey' cnpm config set init.license 'MIT' cnpm config set init.version '1.0.0' cnpm config set init.scripts.start 'node index.js' //查看相关的配置项 cat ~/.npmrc init.author.name=zhangbing init.author.email=hdu007@163.com init.author.url=http://github.com/csnikey init.license=MIT init.version=1.0.0 ~~~ ## 运行命令 ### 运行命令 ~~~ npm run == npm run-script npm run start npm run dev ~~~ ### 简写对于特定的一些命令，不需要加run ，这些有`start test stop restart `,可以直接`npm start`运行 ## 配置eslint 前置知识：在npm script中执行的命令默认支持/node_modules/.bin 执行的相关命令。 ### 基本配置初始化你可以通过eslint init 实现基本的格式配置，在一系列的操作之后可以生成一个eslint的相关配置文件。你可以基于这个修改你的配置文件，也可以与团队商定之后自定义团队的规则去完成代码的规范部分。 ~~~ ./node_modules/.bin/eslint --init How would you like to configure ESLint? Answer questions about your style ? Are you using ECMAScript 6 features? Yes ? Are you using ES6 modules? Yes ? Where will your code run? Browser ? Do you use CommonJS? Yes ? Do you use JSX? Yes ? Do you use React? Yes ? What style of indentation do you use? Tabs ? What quotes do you use for strings? Single ? What line endings do you use? Unix ? Do you require semicolons? Yes ? What format do you want your config file to be in? JavaScript Successfully created .eslintrc.js file in /Users/bingo/Documents/work/demo2 ~~~ ### script 配置在script中你可以直接配置 `eslint :"eslint xxx.file"`,检查结果会帮你输出所有的错误以及可能的修改建议。 ~~~ 1:7 error 'a' is assigned a value but never used no-unused-vars 1:14 error Missing semicolon semi 2:7 error 'url' is assigned a value but never used no-unused-vars 2:13 error Strings must use singlequote quotes 2:19 error Missing semicolon semi ✖ 5 problems (5 errors, 0 warnings) 3 errors, 0 warnings potentially fixable with the `--fix` option. ~~~ ### 进一步依赖 ## 跨平台方案你一定会有需要设置npm工作流在mac ,linux 以及win都可以用的，那么必然性的需要知道常用的跨平台的工具模块。下面从不同用途为大家介绍一些模块。 ### 设置环境或者变量备注：记得给项目里装上模块的包依赖哦，在这个模块使用的时候你可以设置全局的环境变量，不止于NODE_ENV. ~~~ cnpm i cross-env -D //package.json "scripts": { "dev": " cross-env NODE_ENV=development&& webpack -d --watch --color", }, ~~~ - [cross-env模块](https://npm.taobao.org/package/cross-env) ### 文件管理 ## 其他 ### 简写依赖如果你想把包依赖撞到dev中，你可以通过-D实现，你之前可能是通过--save-dev实现的，两者等效。`cnpm i eslint -D ` ###