Demo-wang-browse NPM

React-Basic-framework

npm install --save-dev demo-wang-browse

关于当前模块需要处理的一个问题，查看 antd 他打包处理的都是源码，而我这边都给编译了导致关系丢失了，这个需要修改

//demo.js
import { Browse } from 'demo-wang-browse';
import 'demo-wang-browse/css/main.min.css';

const title = {
  firstTitle: '逛会场',
  endTitle: '逛会场完成',
  browseEndTitle: '任务完成',
};
const postxxx = () => {
  console.log('倒计时完成');
};

const navigateTo = () => {
  console.log('点击跳转');
};
/** time 倒计时秒数 title 展示标题 browseType 倒计时类型 browseNumber当前倒计时第几次 browseAllNum 当日总次数
 * afterChange 结束后的回调 navigateToPage结束后的点击跳转
 * */
ReactDom.render(
  <Browse
    time={15}
    title={title}
    browseType='次'
    browseNumber={2}
    browseAllNum={4}
    afterChange={postxxx}
    navigateToPage={navigateTo}
  />,
  document.querySelector('#root'),
);

CSS 问题解决：模块化问题导致两者不统一

处理关于打包 NPM 发布流程总结：

1.基于 webpack 的 npm 包基本处理

1.在打包 npm 的时候是不需要处理 html 的所以 webpack 中 htmlwebpackplug 插件是不需要的（代验证）

2.打包成 npm 包的时候如果只是打包成组件所以我们只需要打包成 dist 然后在部署就可以，但是在打包后发布 npm 的时候，缺少需要的 package.json、README.md、LICENSE 文件，所以我们要通过一个脚本把这几个文件给导入

const fs = require('fs');
const path = require('path');
console.log('Making last minutes changes... \n');
const ORIG_PKG_PATH = path.resolve(__dirname, '../package.json');
const DEST = path.resolve(__dirname, '../dist/package.json');
const pkgData = require(ORIG_PKG_PATH);
delete pkgData.scripts;
delete pkgData.devDependencies;
delete pkgData.files;
delete pkgData['lint-staged'];
console.log('1. Writing new package.json file \n');
fs.writeFileSync(DEST, JSON.stringify(pkgData, null, 2), (err) => {
  if (err) throw err;
});
console.log('2. Copying README.md \n');
fs.copyFileSync(path.resolve(__dirname, '../README.md'), path.resolve(__dirname, '../dist/README.md'));
console.log('3. Copying LICENSE \n');
fs.copyFileSync(path.resolve(__dirname, '../LICENSE'), path.resolve(__dirname, '../dist/LICENSE'));
console.log('Build completed ;)\n ');

3.同样的我们打包 npm 包的时候也要处理下 package.json 文件中 main 这个属性，这个是做 npm 打包后生成的文件的一个入口，所以我们要配置成我们打包后的文件 main:./main.js

4.打包后再引入使用我们会发现报个错误

Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports. 这个经过了解知道是我们 webpack 打包输出的格式不太对，这时候我们要修改输出的格式 output.library: {type: 'umd'} 然后在调用后发现这个错误没了但是回出现一个 Minified React error#321 的错误通过 baidu 知道这是我的轮子库没有成功获取到测试项目 react 跟 react-dom

https://zhuanlan.zhihu.com/p/93773786

所以接着修改 webpack

//webpack.prod.js
在 webpack 配置中将 react 和 react-dom 标记为 externals（这同时要求 output.libraryTarget 为 umd ），使轮子库可以在运行时获取到宿主环境的依赖
output: {
    path: path.join(BUILD_PATH, 'dist'),
    filename: 'main.js',
    clean: true, // 在生成文件之前清空 output 目录
    assetModuleFilename: 'assets/images/[name].[contenthash].[ext]',
    library: {
      type: 'umd',
    },
    libraryTarget: 'umd',
  },
  externals: {
    react: {
      commonjs: 'react',
      commonjs2: 'react',
      amd: 'react',
      root: 'React',
    },
    'react-dom': {
      commonjs: 'react-dom',
      commonjs2: 'react-dom',
      amd: 'react-dom',
      root: 'ReactDOM',
    },
  },
//package.json
在 package.json 中为 react 和 react-dom 添加同伴依赖 peerDependencies 的映射，这是为了检测宿主环境中这两项依赖的版本如果低于你规定的最低版本，那么在 npm@3 中会给出警告（npm@1 和 npm@2 中会自动安装）。配置如下：
"peerDependencies": {
    "react": "^16.8.4",
    "react-dom": "^16.8.4"
  }