全面了解前端模块化开发
全面了解前端模块化开发
- 前言
- 一、.idea 文件与 .svn 文件
- 二、package.json 文件
- 三、webpack.config 文件或者 .webpackrc 文件
- 四、.travis.yml 文件
- 五、README 文件
- 六、异常处理
前言
模块化开发、工程化开发如今也成为前端领域的代名词。但是大部分人只停留在下载脚手架之后进行一些 npm run start 或者 npm run dev 以及 npm install 的命令操作。但是工程化开发中，还有很多其他的文件，比如让人耳熟能详的 package.json，你知道它的作用是什么吗？我们常使用的命令 npm run start 以及 npm build 又是如何驱动执行的呢？在开发中遇到一些非项目业务逻辑的异常情况，比如经常遇到的缺少 Module 又该如何处理，及其原因到底是什么呢？本文将一步步解开前端工程化、模块化开发的面纱。
一、.idea 文件与 .svn 文件
项目中有时候会出现一些 .idea 文件、.svn 文件、.vscode 文件。其实这些文件都是工具的关联配置。
比如 .idea 文件会记录在 webstorm 中配置的一些工具的字体大小、背景色、语言版本（ES5还是ES6）等，有了 .idea 文件，下次再打开工具的时候不需要重新配置。
而 .svn 文件会记录与 SVN 关联的操作，比如红色感叹号（表示文件被修改过）、对勾（状态正常，本地项目与 SVN 上一致）、黄色感叹号（在提交或者更新过程中出现文件冲突）、加号（文件已经被加入到版本控制中）等。有了 .svn 文件，才有这些标记。
二、package.json 文件
1. 创建
使用 npm init 命令可以创建 package.json 文件。
2. 作用
创建了 package.json 文件之后，基本上不会再修改了。而且很多人搭建项目的时候是直接使用命令下载的脚手架，也省略了创建这个文件的过程，所以很多人会忽视这个文件。但其实际上这个文件非常重要。比如我们经常执行的命令 npm run start 或者 npm run build 都是来源于 package.json 文件中的 scripts 属性的配置。
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build"
},
3. 执行
上面有提到我们经常使用的命令来源于 package.json 文件中的 scripts 属性，那么它是如何执行的昵？scripts 的值是一个键值对构成的对象。通常键为命令简称，值为执行的路径。比如 "start": "react-scripts start"，执行简称 npm run start 就是执行 react-scripts start。也就是 react-scripts 模块下的 bin 文件夹下的 react-scripts 文件。
switch (script) {
case 'build':
case 'eject':
case 'start':
case 'test': {
const result = spawn.sync(
'node',
nodeArgs
.concat(require.resolve('../scripts/' + script))
.concat(args.slice(scriptIndex + 1)),
{ stdio: 'inherit' }
);
if (result.signal) {
if (result.signal === 'SIGKILL') {
console.log(
'The build failed because the process exited too early. ' +
'This probably means the system ran out of memory or someone called ' +
'`kill -9` on the process.'
);
} else if (result.signal === 'SIGTERM') {
console.log(
'The build failed because the process exited too early. ' +
'Someone might have called `kill` or `killall`, or the system could ' +
'be shutting down.'
);
}
process.exit(1);
}
process.exit(result.status);
break;
}
default:
console.log('Unknown script "' + script + '".');
console.log('Perhaps you need to update react-scripts?');
console.log(
'See: https://facebook.github.io/create-react-app/docs/updating-to-new-releases'
);
break;
}
4. 配置
关于 package.json 文件的详细配置可参考《package.json 文件详解》。
三、webpack.config 文件或者 .webpackrc 文件
webpack.config 文件就是 webpack 打包的一些配置，这个大多数人应该都知道，详细配置可参考 《webpack 常用配置》。
四、.travis.yml 文件
travis.yml 文件是 travis 自动化构建的配置，基础配置如下。
language: node_js # 环境为nodejs
node_js:
- '10.13.0' # nodejs版本
install:
- npm install mocha -g
- npm install
script:npm run test #运行的脚本
详情可参考 《持续集成(Travis CI 和 Jenkins CI)使用教程》。
五、README 文件
README 文件主要是对项目的一些描述。包括但不限于项目的特征、用法说明、浏览器兼容性描述、项目贡献方式。以下是 ant-design-pro 部分README 内容。
English | [简体中文](./README.zh-CN.md)
# Ant Design Pro
## Features
- :gem: **Neat Design**: Follow [Ant Design specification](http://ant.design/)
- :triangular_ruler: **Common Templates**: Typical templates for enterprise applications
- :rocket: **State of The Art Development**: Newest development stack of React/dva/antd
- :iphone: **Responsive**: Designed for varies of screen size
- :art: **Theming**: Customizable theme with simple config
- :globe_with_meridians: **International**: Built-in i18n solution
- :gear: **Best Practice**: Solid workflow make your code health
- :1234: **Mock development**: Easy to use mock development solution
- :white_check_mark: **UI Test**: Fly safely with unit test and e2e test
## Templates
- Dashboard
- Analytic
- Monitor
- Workspace
- Form
- Basic Form
- Step Form
- Advanced From
- List
- Standard Table
- Standard List
- Card List
- Search List (Project/Applications/Article)
- Profile
- Simple Profile
- Advanced Profile
- Result
- Success
- Failed
- Exception
- 403
- 404
- 500
- User
- Login
- Register
- Register Result
## Usage
$ git clone https://github.com/ant-design/ant-design-pro.git --depth=1
$ cd ant-design-pro
$ npm install
$ npm start # visit http://localhost:8000
Or you can use the command tool: [ant-design-pro-cli](https://github.com/ant-design/ant-design-pro-cli)
$ npm install ant-design-pro-cli -g
$ mkdir pro-demo && cd pro-demo
$ pro new
More instruction at [documentation](http://pro.ant.design/docs/getting-started).
## Compatibility
Modern browsers and IE11.
## Contributing
Any Contribution of following ways will be welcome:
- Use Ant Design Pro in your daily work.
- Submit [issue](http://github.com/ant-design/ant-design-pro/issues) to report bug or ask questions.
- Propose [pull request](http://github.com/ant-design/ant-design-pro/pulls) to improve our code.
六、异常处理
说一下在工程化开发中经常遇到的三种异常处理。
1. 在错误的文件目录下执行命令
出现以上报错是因为不在项目根路径，而在根路径的上一层路径执行命令。
比如我的项目根路径是 microport_pc。但是刚刚却在它的上一层路径microport.dingding 目录去执行命令。
2. webpack 不是内部或外部命令
这一点可以参考《彻底理解并解决 ‘webpack’ 不是内部或外部命令，也不是可运行的程序或批处理文件》 ，写得非常详细。
3. Module not found
这也是最常见的错误，未发现模块。出现这个错误一般有两个原因。
- 如果错误指向的是业务组件，一般是项目路径有误。特别是有时候调换项目文件，会导致关联依赖地址引用报错。
- 如果不是业务组件，就是模块未安装了，需要执行
npm install命令安装模块。