ECMA进阶2之从0~1搭建react同构体系项目2

环境变量的配置

package.json

1. npm-run-all
   同一时间通过串行与并行执行多个包的构建，或者多个命令行脚本的话，run-s这个命令执行
2. dev、build、analyze三大块分别用于 开发环境、生产环境、分析包大小。
3. engines：开发中要求npm、node的版本号
4. browserslist：支持的浏览器
5. “private”: true, 包为私有包，这个包不会发布到npm市场上
6. main去掉，因为main主要用于别人引用包时候的入口文件
7. 安装之前指定husky，开发时候自动关联husky
8. pnpm run dev:build && nodemon ./public/server
   nodemon：在服务端构建时候，只会执行一次，但是nodemon会监听public/server下的产物，当server有变化时候，会重新执行pnpm run dev，达到实时更新

babel.config.js

module.exports = (api) => {
   
  // 实现csr ssr(客户端、服务端)
  const isWeb = api.caller((caller) => caller && caller.target === "isWeb");

  return {
   
    presets: [  //处理默认引用的包
      [
        "@babel/env",
      ],
      "@babel/typescript",
      [
        "@babel/react",
        {
   
          runtime: "automatic",
        },
      ],
    ],       //loadable将插件内容分包，注入到babel中
    plugins: ["@loadable/babel-plugin", "@babel/plugin-transform-runtime"], //第二个包是运行时态的转换
    env: {
     //指向环境变量
      development: {
     //通过不同的环境注入不同的能力，web端的话要添加react-refresh，更快的fresh刷新，用于开发更新的
        plugins: isWeb ? ["react-refresh/babel"] : undefined,
      },
    },
  };
};

tsconfig.json

{
   
  "compilerOptions": {
   
    "sourceMap": true,
    "target": "es5",  //ts编译后的产物，有es6,es7,esNext
    "module": "commonjs",  //编译后代码安装的过程
    "lib": ["dom", "dom.iterable", "esnext"], //浏览器的配置，一般这三个就够了
    "jsx": "react-jsx",  //能够解析react-jsx的代码，才能解析react组件
    // Specify module resolution strategy: "node" (Node.js) or "classic" (TypeScript pre-1.6)
    "moduleResolution": "node", //包版本转换
    // Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports.
    // Implies "allowSyntheticDefaultImports". Recommended by TS
    "esModuleInterop": true,  //esmodule引入 能不能这么写：import react from 'react' 而不是 import * as react from 'react'
    // Skip type checking of declaration files. Recommended by TS
    "skipLibCheck": true,  //需不需要过滤掉.d.ts文件
    // Disallow inconsistently-cased references to the same file. Recommended by TS
    "forceConsistentCasingInFileNames": true,
    // Do not emit outputs
    "noEmit": true,
    // Raise error on expressions and declarations with an implied "any" type
    "noImplicitAny": false,
    // Report errors on unused locals
    "noUnusedLocals": true,
    // Report errors on unused parameters
    "noUnusedParameters": true,
    // Report error when not all code paths in function return a value
    "noImplicitReturns": true,
    // Report errors for fallthrough cases in switch statement
    "noFallthroughCasesInSwitch": true
  }
}

postcss.config.js

module.exports = {
   
  plugins: [require("autoprefixer")],  //通过postcss最终产物进行样式autoprefixer
};</