入門篇 · 前端工程化指南

[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 ` ###