前端中框架配置中常用配置属性学习

package.json

1、homepage

package.json 其实还有很多属性可以配置的，这里就介绍一个 homepage 属性的作用。

homepage 的作用是设置应用的跟路径，我们的项目打包后是要运行在一个域名之下的，有时候可能是运行在跟域名下，也有可能运行在某个子域名下或或域名的某个目录下，这时候我们就需要让我们的应用知道去哪里加载资源，这时候就需要我们设置一个跟路径，而且有时候我们的资源会部署在 CDN 上，你必须告诉打包工具你的CDN地址是什么。

比如我们用 create-react-app 开发的 React 应用，以及 Vue CLI 开发的项目，默认是继承了 webpack 的，当不配置 homepage 属性，build 打包之后的文件资源应用路径默认是 / ，如下图

当设置了"homepage": “./”,
打包后所有底之前都会自动加上./

2、resolutions

Yarn允许您覆盖特定嵌套依赖项的版本,强制指定以来版本号

3、peerDependencies

假设我们当前的项目是MyProject，项目中有一些依赖，比方其中有一个依赖包PackageA，该包的package.json文件指定了对PackageB的依赖：

{
    "dependencies": {
        "PackageB": "1.0.0"
    }
}

如果我们在我们的MyProject项目中执行npm install PackageA, 我们会发现我们项目的目录结构会是如下形式：

MyProject
|- node_modules
   |- PackageA
      |- node_modules
         |- PackageB

那么在我们的项目中，我们能通过下面语句引入"PackageA"：

var packageA = require('PackageA')

但是，如果你想在项目中直接引用PackageB:

var packageA = require('PackageA')
var packageB = require('PackageB')

这是不行的，即使PackageB被安装过；因为Node只会在“MyProject/node_modules”目录下查找PackageB，它不会在进入PackageA模块下的node_modules下查找。

为了解决这种问题：

如果你安装我，那么你最好也安装X,Y和Z.

于是peerDependencies就被引入了。例如上面PackageA的package.json文件如果是下面这样：

{
    "peerDependencies": {
        "PackageB": "1.0.0"
    }
}

那么，它会告诉npm：如果某个package把我列为依赖的话，那么那个package也必需应该有对PackageB的依赖。

也就是说，如果你npm install PackageA，你将会得到下面的如下的目录结构：

MyProject
|- node_modules
   |- PackageA
   |- PackageB

.webpackrc

1、 roadhog#配置

dva介绍
copy-webpack-plugin

tsconfig.json

1、compilerOptions

baseUrl, 解析非相对模块名的基准目录。
strictNullChecks, 在严格的 null检查模式下， null和 undefined值不包含在任何类型里，只允许用它们自己和 any来赋值（有个例外， undefined可以赋值到 void）。
noUnusedLocals或者noUnusedParameters 没有使用的变量ts校验抛出错误
noUnusedLocals, 若有未使用的参数则抛错。
moduleResolution, 决定如何处理模块。或者是"Node"对于Node.js/io.js，或者是"Classic"（默认）。
allowSyntheticDefaultImports, 允许从没有设置默认导出的模块中默认导入。这并不影响代码的输出，仅为了类型检查。
jsx, 在 .tsx文件里支持JSX： "React"或 “Preserve”。
removeComments, 删除所有注释，除了以 /!*开头的版权信息。
typeRoots, 要包含的类型声明文件路径列表。查看 @types，–typeRoots和–types章节了解详细信息。
paths, 模块名到基于 baseUrl的路径映射的列表。
“skipLibCheck”: true, // 跳过所有声明文件的类型检查
noImplicitAny // noImplicitAny属性的作用是，允许你的注解类型 any 不用特意表明
compilerOptions 配置项

eslintrc.json

关闭只能使用箭头函数

 "prefer-arrow-callback": "off"

关闭未使用变量报错

  "rules": {
    "no-unused-vars": "off"
  }

tslint.json

关闭ts末尾添加逗号报错

"trailing-comma": [
            false,
            {
                "multiline": "never",
                "singleline": "never"
            }
        ],

持续更新中…