开发 npm 包的一份配置

const gulp = require("gulp");
const { series, watch } = gulp;
const gulpBabel = require("gulp-babel");
const gulpSass = require("gulp-sass");
const gulpAutoprefixer = require("gulp-autoprefixer");

const fs = require("fs");
const path = require("path");
const semver = require("semver");
const pkg = require("./package.json");
const execFile = require("child_process").execFile;

function esToCjs() {
  return gulp
    .src(["dist/lib/**/*.js", "dist/lib/**/*.jsx"])
    .pipe(
      gulpBabel({
        presets: [
          [
            "@babel/env",
            {
              targets: {
                browsers: ["last 2 versions", "ie>=11"] //可取值：chrome, opera, edge, firefox, safari, ie, ios, android, node, electron.
              },
              modules: "commonjs", //可取值"amd" | "umd" | "systemjs" | "commonjs" | false, defaults to "commonjs".
              useBuiltIns: "usage",
              debug: true
            }
          ],
          "@babel/react"
        ],
        plugins: [
          "@babel/plugin-proposal-class-properties",
          "@babel/plugin-transform-runtime"
        ]
      })
    )
    .pipe(gulp.dest(`dist/lib`));
}

function scssToCss() {
  return gulp
    .src("src/**/*.scss")
    .pipe(
      gulpSass({
        outputStyle: "expanded"
      })
    )
    .pipe(gulpAutoprefixer())
    .pipe(gulp.dest("src/"));
}

function copy() {
  const sourceFiles = ["src/**/*", "!src/index.js"];
  const destination = "dist/lib/";
  return gulp.src(sourceFiles).pipe(gulp.dest(destination));
}

function generateExtraFile(cb) {
  pkg.version = semver.inc(pkg.version, "patch");
  fs.writeFileSync(
    path.resolve(__dirname, "./package.json"),
    JSON.stringify(pkg, null, 2)
  );
  delete pkg.devDependencies;
  delete pkg.scripts;

  fs.writeFileSync(
    path.resolve(__dirname, "./dist/package.json"),
    JSON.stringify(pkg, null, 2)
  );

  fs.copyFileSync("./README.md", "./dist/README.md");
  cb();
}

function devServer(cb) {
  execFile("react-app-rewired", ["start"]).stdout.on("data", function(data) {
    console.log(data);
  });
  cb();
}

function watchFile() {
  watch("src/**/*.scss", series(scssToCss));
}

exports.build = series(scssToCss, copy, esToCjs, generateExtraFile);
exports.dev = series(scssToCss, devServer, watchFile);

{
  "name": "@xx/scripts-store",
  "version": "0.1.9",
  "main": "lib/PluginStore/index.js",
  "dependencies": {
    "axios": "0.18.0",
    "core-js": "2.6.5",
    "events": "3.0.0",
    "react": "16.8.3",
    "react-dom": "16.8.3",
    "react-inlinesvg": "0.8.4"
  },
  "scripts": {
    "start": "gulp dev",
    "build-cjs": "rm -rf dist && mkdir dist && gulp build",
    "publish": "cd dist && npm publish"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
  ],
  "devDependencies": {
    "@babel/plugin-proposal-class-properties": "7.3.4",
    "@babel/plugin-transform-runtime": "7.3.4",
    "@babel/preset-react": "7.0.0",
    "@shimo/react-svg-loader": "2.1.3",
    "eslint-plugin-prettier": "2.6.1",
    "eslint-plugin-react": "7.5.1",
    "gulp": "4.0.0",
    "gulp-autoprefixer": "6.0.0",
    "gulp-babel": "8.0.0",
    "gulp-sass": "4.0.2",
    "react-app-rewired": "^2.1.1",
    "react-scripts": "2.1.5",
    "semver": "5.6.0"
  }
}