记一次react+ts的环境搭建,并上传到npm

在 github 创建了一个由 react 搭建的 UI 组件库,最初为了方便直接使用了 create-react-app 官方脚手架搭建了项目,虽然方便了,但是显得太臃肿以及不够灵活。因此自己使用 webpack 来重新搭建整个环境

项目地址:https://github.com/Dilomen/Dark-Compontent
通过 npm install dark-ui -D 指令进行安装使用

react 环境

创建 package.json

在项目文件夹下输入指令,创建 package.json 文件

npm init

webpack 创建环境

npm install webpack webpack-cli --save-dev

react 的环境

npm install react react-dom

babel 相关,babel7 和 6 的依赖会有些差别

npm install @babel/cli @babel/core @babel/preset-env @babel/preset-react --save-dev

创建文件

1. 创建一下目录

在这里插入图片描述

2. index.html 内容


<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"
    />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  head>
  <body>
    <div id="root">div>
  body>
html>

3. index.jsx

import React from "react";
import ReactDOM from "react-dom";
import "./index.css"; // 随便在src下建一个index.css测试样式是否导入
ReactDOM.render(

Hello World

, document.getElementById("root"));

4. babel.config.js

module.exports = {
  presets: ["@babel/preset-env", "@babel/preset-react"]
};

5. webpack.config.js

  • 先安装依赖
npm install html-webpack-plugin clean-webpack-plugin  --save-dev
npm install style-loader css-loader file-loader url-loader --save-dev
  • 编写 webpack.config.js 文件
// 导入
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
// CleanWebpackPlugin的导入,看版本,之前的版本的默认,不需要加{}
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
module.exports = {
  // 这里输入输出是一对一的,如果想一对多,多对多请参考 webpack 配置
  // 输入文件:
  entry: [path.resolve(__dirname, "./src/index.js")],
  output: {
    path: path.resolve(__dirname, "./build"),
    filename: "[hash:8].js"
  },
  // 识别后缀
  resolve: {
    extensions: [".js", ".jsx", "ts", "tsx"]
  },
  // 插件
  plugins: [
    new CleanWebpackPlugin(),
    new HtmlWebpackPlugin({
      filename: "index.html",
      template: "./index.html"
    })
  ],
  // 不同类型文件的模块
  module: {
    rules: [
      {
        test: /\.css$/,
        exclude: /node_modules/,
        use: ["style-loader", "css-loader"]
      },
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        loader: "babel-loader"
      },
      {
        test: /\.(jpg|png|svg)$/,
        loader: ["file-loader"]
      },
      {
        test: /\.(woff|woff2|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
        loader: "url-loader?limit=10000"
      }
    ]
  }
};

6. 修改 package.json

"scripts": {
    "dev": "npm run start",
    "start": "webpack-dev-server --config webpack.config.js",
    "build": "webpack --config webpack.config.js"
  }

7. 执行 npm run start

在这里插入图片描述

sass/scss 等环境

npm install html-webpack-plugin cnode-sass sass-loader  --save-dev

然后在 webpack.config.js 文件中的 module 下添加

module: {
    rules: [
        {
            test: /\.scss$/,
            loaders: ['style-loader', 'css-loader', 'sass-loader']
        },
        ...
    ]
}

typescript 环境

tip: 由于本人 ts 的功力有限,暂时还没有学习 ts 文件声明,而下面的@types/*的依赖就是为了你不需要在写文件声明

安装依赖

如果在全局安装了就不要再执行下面的指令

npm install typescript ts-loader source-map-loader --save-dev

1. 生成 tsconfig.json

  • 执行下面的指令就会自动生成
tsc -init
  • 修改 tsconfig.json
{
  "compilerOptions": {
    "sourceMap": true,
    "noImplicitAny": true,
    "module": "commonjs",
    "target": "es5",
    "jsx": "react",
    "esModuleInterop": true
  },
  "exclude": ["node_modules"]
}

2. webpack 配置 ts

ts 关于 react

npm install @types/react @types/react-dom

在 webpack.config.js 文件下 modules 的 rules 中添加

{
    test: /\.ts(x?)$/,
    exclude: /node_modules/,
    use: ["ts-loader"]
},
{
    enforce: "pre",
    test: /\.js$/,
    loader: "source-map-loader"
}

jest 环境

前端单元测试 —— jest

1. 安装依赖

js环境就装
npm install jest react-test-renderer --save-dev
ts环境就装
npm install @types/jest @types/react-test-renderer --save-dev

2. 修改 package.json

"scripts": {
  ...
  "test": "jest"
}

如何上传到 npm

tip:接下来的部分属于个人项目,别的项目可能需要有所改变

ts 和 scss 不能执行,最终还是要转化成 js 和 css 的,由于没有找到更好的办法,这边直接使用 gulp 将 scss 实时编译成 css,在 js 中直接引入 css

  • 1.在根目录下创建一个 gulpfile.js 文件
npm install gulp gulp-sass --save-dev
let gulp = require("gulp");
let sass = require("gulp-sass");
gulp.task("sass", function() {
  return gulp
    .src("src/components/**/*.scss")
    .pipe(sass())
    .pipe(gulp.dest("src/style/"));
});
gulp.task("watch", function() {
  gulp.watch("./src/components/**/*.scss", gulp.series("sass"));
});
  • 2.执行以下命令监听 scss,实时转化为 css
gulp watch
  • 3.然后在 ts 或者 js 中直接引入的是 style 下的 css

进入正题

1. 新建一个文件夹,生成一个 package.json

2. 将上面项目文件中的 component 和 style(视自己项目情况而定,就是一般 src 下的记个文件夹)放到该目录下,将component改名为lib,这个也可以通过不改名,通过babel指令来生成lib,就是将编译好的放到lib里,如果考虑到js版本,还是建议使用babel,这边就不再叙述了

3.编辑 tsconfig.js,通过 tsc 指令将 ts 转化为 js

// tsconfig.js
{
  "compilerOptions": {
    "outDir": "./lib",
    "noImplicitAny": false,
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "commonjs",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "react",
    "baseUrl": "./",
    "paths": { "*": ["types/*"] }
  },
  "exclude": ["node_modules"],
  "include": ["lib/*"]
}

4. 修改package.js,一定要写明

  • name名称 :你npm项目的名称怎么少得了,如果重复就不能上传
  • version版本号 : 每次上传都必须比上次高
  • file :传上去的文件
{
  "name": "dark-ui",
  "version": "0.1.2",
  "description": "react开发的UI组件",
  "main": "./lib/index.js",
  "files": [
    "lib",
    "style"
  ],
  "keywords": [
    "react",
    "component"
  ],
  "author": "dilomen",
  "dependencies": {},
  "devDependencies": {
    "react": "^16.9.0",
    "react-dom": "^16.9.0"
    ...
  }
}

5. 上传吧,记得登录哦(npm login)

npm publish

然后你就可以通过npm install 来安装你的项目啦

你可能感兴趣的:(webpack)