前端模块化开发

更新时间:2020-08-07 09:47:11点击次数:320次

一、.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. 配置

三、webpack.config 文件或者 .webpackrc 文件


四、.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  #运行的脚本

五、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 不是内部或外部命令

3. Module not found
这也是最常见的错误,未发现模块。出现这个错误一般有两个原因。

  • 如果错误指向的是业务组件,一般是项目路径有误。特别是有时候调换项目文件,会导致关联依赖地址引用报错。
  • 如果不是业务组件,就是模块未安装了,需要执行 npm install 命令安装模块。
  • 项目经理 点击这里给我发消息
  • 项目经理 点击这里给我发消息
  • 项目经理 点击这里给我发消息
  • 项目经理 点击这里给我发消息