webpack4+react+ts项目搭建

作者: sweetBoy_9126 | 来源:发表于2019-10-18 14:20 被阅读0次

webpack4+react+ts项目搭建
iOS项目组件化搭建
从0到1再到100:搭建,编写,构建一个前端项目
手把手教你构建一个web前端项目，全网最详细教程！
JAVA后台搭建(springboot+mybatis+mysq
跨平台开发---iOS笔记摘录
RN-Redux-Project-01
收藏整理(持续更新)
nodejs 搭建项目流程
搭建企业微信群机器人通知助手(3)

创建项目

创建目录与远程仓库
克隆你的项目到本地
git clone 项目地址
npm初始化

npm init -y

webpack初始化

初始化webpack-cli

yarn add webpack webpack-cli --dev

新建lib/index.tsx
新建 webpack.config.js
i. 配置entery

entry: {
      index: './lib/index.tsx'
  },

上面的index对应的就是我们的文件名，我们只需要把index改成IReact即可
ii. 配置output

const path = require('path')
output: {
    path: path.resolve(__dirname, 'dist/lib'),
    library: 'IReact', //我们的库的名字，如果不写别人是用不了我们的库的
    libraryTarget: 'umd' //我们的库的输出格式，默认写umd
},

问题1：为什么要引入path
答：上面的__dirname就是你当前的项目目录比如我的是IReact那么它就是IReact，之所以引入一个path，是因为这里需要一个绝对路径，而对于mac和liux的用户需要写成__dirname + '/dist',在windows上你就需要写成__dirname+ '\\dist'，所以你不管怎么写都是错的，而我们直接通过path.resolve(__dirname, 'dist/lib')，它会自动根据不同的操作系统给我们拼接成合适的绝对路径。
问题2：libraryTarget为什么要写umd
答：输出格式一般分为amd,commonjs和umd
1). 前端一开始是没有包管理系统的，所有的都是通过script标签一个个加载到页面的，这就存在全局变量之间互相影响，所以我们需要打包，也就是通过require.js，所有人把你需要的变量定义到一个define函数里，那么这个变量只在这个函数的作用域内，而这个require.js的标准就是amd，也就是异步模块定义。
2). nodejs中的模块定义是通过module.exports= {}导出，你在当前文件的module.exports外定义一个变量，那这个变量只对当前文件有效

1.js

var a = 1 //a变量只在1.js中有效
module.exports = {
}

这个模块定义就叫做commonjs
3). 不管是commonjs还是requirejs（amd)都不通用，因为common.js只在nodejs中使用，而amd只在浏览器中使用。为了统一定义的方式，兼容其他的定义方式，umd（统一的模块定义）诞生了。umd的核心是：如果存在define函数就用define函数来定义（也就是amd），如果不存在define函数，它就会查找有没有module，如果有就说明是commonjs的方式，如果还是没有就会用script方式
iii. 配置 module.rules
a. jsx
b. tsx

{
    test: /\.tsx?$/,
    loader: 'awesome-typescript-loader'
}

yarn add awesome-typescript-loader --dev

c. scss

iv. 配置plugins

iiv. 配置mode
如果你正在开发就配成development，如果你需要发布正式环境就配成production

创建ts配置

安装ts

yarn add typescript --dev

创建tsconfig.json

{
    "compilerOptions": {
        "declaration": true,
        "baseUrl": ".",
        "module": "esnext",
        "target": "es5",
        "lib": ["es6", "dom"],
        "sourceMap": true,
        "jsx": "react",
        "moduleResolution": "node",
        "rootDir": ".",
        "forceConsistentCasingInFileNames": false,
        "noImplicitReturns": true,
        "noImplicitThis": true,
        "noImplicitAny": true,
        "importHelpers": true,
        "strictNullChecks": true,
        "allowSyntheticDefaultImports": true,
        "noUnusedLocals": true
    },
    "include": [
    ],
    "exclude": [
        "node_modules",
        "build",
        "dist",
        "scripts",
        "acceptance-tests",
        "webpack",
        "jest",
        "src/setupTests.ts",
        "*.js"
    ]
}

创建tslint.json

{
  "extends": ["tslint:recommended", "tslint-react"],
  "rules": {
    "no-console": [false, "log", "error"],
    "jsx-no-multiline-js": false,
    "whitespace": false,
    "no-empty-interface": false,
    "space-before-function-paren": false,
    "no-namespace": false,
    "label-position": false,
    "quotemark": [true, "single", "jsx-double"],
    "member-access": false,
    "semicolon": [true, "always", "ignore-bound-class-methods"],
    "no-unused-expression": [true, "allow-fast-null-checks"],
    "member-ordering": false,
    "trailing-comma": false,
    "arrow-parens": false,
    "jsx-self-close": false,
    "max-line-length": false,
    "interface-name": false,
    "no-empty": false,
    "comment-format": false,
    "ordered-imports": false,
    "object-literal-sort-keys": false,
    "eofline": false,
    "jsx-no-lambda": false,
    "no-trailing-whitespace": false,
    "jsx-alignment": false,
    "jsx-wrap-multilines": false,
    "no-shadowed-variable": [
      false,
      {
        "class": true,
        "enum": true,
        "function": false,
        "interface": false,
        "namespace": true,
        "typeAlias": false,
        "typeParameter": false
      }
    ]
  },
  "linterOptions": {
    "exclude": [
      "config/**/*.js",
      "node_modules/**/*.ts",
      "coverage/lcov-report/*.js"
    ]
  }
}

/dist/*

现在运行npx webpack已经可以打包了

安装`webpack-dev-server`自动打包

通过上面的配置我们可以把我们的index.tsx打包成index.js，但是我们每当有内容修改都得重新打包，所以我们需要webpack-dev-serve来自动打包

yarn add webpack-dev-server
npx webpack-dev-server

安装html-webpack-plugin插件，使我们可以访问页面

创建一个index.html
安装html-webpack-plugin
在webpack.config.js中配置

const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
  plugins: [
        new HtmlWebpackPlugin({
            template: 'index.html'
        })
    ]
}

添加package.json配置

"start": "webpack-dev-server",
"build": "webpack"

创建一个简单的button组件

function Button() {
    return (
        <div>
            按钮
        </div>
    )
}
export default Button

在index.tsx中引入我们的组件
1). 安装react和react-dom

yarn add react react-dom

import React from 'react';
import ReactDom from 'react-dom';

2). 安装react和react-dom的声明文件

yarn add @types/react @types/react-dom --dev

3). 引入Button

import Button from './button'
ReactDom.render(<Button />, document.querySelector('#root'));

这时候我们会看到这么两个报错

i. 它找不到我们的./button文件；
解决方法：在webapck配置文件中添加下面的代码

resolve: {
        extensions: ['.ts', '.tsx', '.js', '.jsx']
},

ii. 我们在button里定义了React但是没有引入

button.tsx

import React from 'react'
function Button() {
    return (
        <div>
            按钮
        </div>
    )
}
export default Button

上面的代码我们看上去并没使用React，那是因为我们写的其实是React的语法糖就等价于

function Button() {
    return (
       React.createElement('div', null, 'hi')
    )
}

相关补充：
yarn.lock文件是做什么的？

指引；是yarn的lock文件
它lock（锁）的是所有依赖的版本号

减小我们打包后index.js的大小

正常情况下我们打包会把我们依赖的库react和react-dom都打包进去，所以就会让我们的js很大，如果我们不想把它们打包进去，只需要在webpack里配置一个externals（外部的包）

externals: {
    react: {
        commonjs: 'react',
        commonjs2: 'react',
        amd: 'react',
        root: 'React',
    },
    'react-dom': {
        commonjs: 'react-dom',
        commonjs2: 'react-dom',
        amd: 'react-dom',
        root: 'ReactDOM'
    }
}

mode中devlopment和production的区别

如果是development它的代码不会压缩，production就会压缩你所有的代码

区分我们的production和devlepment模式

在webpack.config的基础上新建一个webpack.config.dev和webpack.config.prod，其中
webpack.config里的代码是生产和开发都需要用到的共同的代码, 开发环境不需要代码压缩，所以不需要把react他们拆出来，生产环境也就是我们打包的时候是不需要生成一个html文件的，所以生产的不需要加HtmlWebpackPlugin，最后我们只需要在共有的代码基础上添加新的代码就行，也就是在一个新的对象上添加共有代码和自己的代码。

webpack.config.js

const path = require('path')
module.exports = {
    entry: {
        index: './lib/index.tsx'
    },
    resolve: {
        extensions: ['.ts', '.tsx', '.js', '.jsx']
    },
    output: {
        path: path.resolve(__dirname, 'dist/lib'),
        library: 'IReact',
        libraryTarget: 'umd'
    },
    module: {
        rules: [
            {
                test: /\.tsx?$/,
                loader: 'awesome-typescript-loader'
            }
        ]
    }
}

webpack.config.dev.js

const path = require('path')
const base = require('./webpack.config')
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = Object.assign({}, base, {
    mode: 'development',
    plugins: [
        new HtmlWebpackPlugin({
            template: 'index.html'
        })
    ]
})

webpack.config.prod.js

const path = require('path')
const base = require('./webpack.config')
module.exports = Object.assign({}, base, {
    mode: 'production',
    externals: {
        react: {
            commonjs: 'react',
            commonjs2: 'react',
            amd: 'react',
            root: 'React',
        },
        'react-dom': {
            commonjs: 'react-dom',
            commonjs2: 'react-dom',
            amd: 'react-dom',
            root: 'ReactDOM'
        }
    }
})

安装cross-env来保证我们的环境变量在各个平台上都可以成功的运行

package.json

"start": "cross-env NODE_ENV=development webpack-dev-server --config webpack.config.dev.js",
"build": "cross-env NODE_ENV=production webpack --config webpack.config.prod.js"

配置我们的类型声明文件

将我们的.d.ts的类型声明文件生成的出口改成dist

tsconfig.json

"compilerOptions": {
        "outDir": "dist"
}

这样我们打包后就会在dist目录下生成.d.ts对应的文件

在package.json里添加我们类型声明文件使用的文件，以及修改我们的main文件为dist目录下的

"main": "dist/lib/index.js",
 "types": "dist/lib/index",

配置Jest单元测试

安装

yarn add --dev jest babel-jest @babel/preset-env @babel/preset-react react-test-renderer

创建.babelrc

{
    "presets": ["react-app"]
}

在package.json里配置测试命令

"test": "cross-env NODE_ENV=test jest --config=jest.config.js --runInBand",

创建jest.config.js

// https://jestjs.io/docs/en/configuration.html

module.exports = {
    verbose: true,
    clearMocks: false,
    collectCoverage: false,
    reporters: ["default"],
    moduleFileExtensions: ['js', 'jsx', 'ts', 'tsx'],
    moduleDirectories: ['node_modules'],
    globals: {
      'ts-jest': {
        tsConfig: 'tsconfig.test.json',
      },
    },
    moduleNameMapper: {
      "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/test/__mocks__/file-mock.js",
    },
    testMatch: ['<rootDir>/**/__tests__/**/*.unit.(js|jsx|ts|tsx)'],
    transform: {
      "^.+unit\\.(js|jsx)$": "babel-jest",
      '^.+\\.(ts|tsx)$': 'ts-jest',
    },
    setupFilesAfterEnv: ["<rootDir>test/setupTests.js"]
  }

安装ts-jest

yarn add ts-jest --dev

创建test/setupTests.js，我们可以先什么也不写
运行yarn test

看到上面图片中的代码就说明你成功了

开始写我们的单元测试
testMatch: ['<rootDir>//tests//*.unit.(js|jsx|ts|tsx)'],
我们的jest.config.js中的上面的testMatch就是测试的时候匹配的文件目录，所以我们需要在我们的lib目录下创建一个tests目录，下面的文件以.unit.(js|jsx|ts|tsx)来命名

tests/hello.unit.tsx

function add(a: number, b:number): number {
    return a + b
}
describe('add(1,2)', () => {
    it('等于3', () => {
        expect(add(1,2)).toEqual(3)
    })
})

运行yarn test
会发现报错说tsconfig.test.json是没有发现的

创建tsconfig.test.json

{
    "extends": "./tsconfig.json",
  //   "compilerOptions": {
  //     "module": "commonjs"
  //   }
}

这样我们的单元测试就可以成功的运行了
针对button的单元测试

button.unti.tsx

import React from 'react'
import renderer from 'react-test-renderer'
import Button from '../button'

describe('button', () => {
    it('是个div', () => {
        //渲染一个Button，因为Button是一个对象所以我们可以把它转成json
        const json = renderer.create(<Button/>).toJSON()
        //期待它去匹配Snapshot
        expect(json).toMatchSnapshot()
    })
})

运行yarn test报错，说我们的renderer是undefined
原因：我们没有默认导出
解决方法：

import后加* as
修改tsconfig里的allowSyntheticDefaultImports为esModuleInterop

webpack4+react+ts项目搭建
创建项目创建目录与远程仓库克隆你的项目到本地git clone 项目地址 npm初始化 webpack初始化 ...
iOS项目组件化搭建
iOS项目组件化搭建 iOS项目组件化搭建
从0到1再到100:搭建,编写,构建一个前端项目
1. 选择现成的项目模板还是自己搭建项目骨架搭建一个前端项目的方式有两种：选择现成的项目模板、自己搭建项目骨架。...
手把手教你构建一个web前端项目，全网最详细教程！
1. 选择现成的项目模板还是自己搭建项目骨架搭建一个前端项目的方式有两种：选择现成的项目模板、自己搭建项目骨架。...
JAVA后台搭建(springboot+mybatis+mysq
前言上篇文章写了基本环境配置的搭建,接下来我们需要搭建项目了,项目搭建使用的IDEA,springboot项目的...
跨平台开发---iOS笔记摘录
1. Cordova 1.1 简介 1.2 环境搭建与创建项目环境搭建 cordova项目 ionic项目 2 ...
RN-Redux-Project-01
React + Redux 搭建项目 1.项目搭建 ①新建项目 ②安装 redux 和 react-redux 2...
收藏整理(持续更新)
项目搭建优雅快速的搭建一个IOS项目，让你的项目结构不再混乱！（纯代码）手把手教你如何搭建iOS项目基本框架 ...
nodejs 搭建项目流程
nodejs 搭建项目流程 1、搭建项目需要的插件 koa / koa-router / nodemon【...
搭建企业微信群机器人通知助手(3)
前两篇介绍了背景需求技术选型，那么，今天终于可以开始搭建项目，进行实战了！项目搭建后端搭建新建项目开发工具...