buildpackagets.js

const { spawn } = require('child_process'); const path = require('path'); const { getEnv } = require('./util'); // The path to run the script const runtimePath = process.cwd(); // Script path const codePath = __dirname; const commandPath = path.join(codePath, 'node_modules', '.bin', path.sep); // buildPackage generates directory name const generateDirName = 'lib'; // buildPackage original name const srcDirName = 'SRC '; // code outputPath const outputPath = path.join(runtimePath, generateDirName); // Let compilePath; let index = 0; Const tasks = [// clear build directory clearTask, // TSC conversion, convert typescript tscTask, // style gulpTask,]; /** * clearTask * @return {Promise} */ function clearTask() {return new Promise((resolve, reject) => { const command = process.platform === 'win32' ? `rimraf.cmd` : `rimraf`; const rimrafProcess = spawn(command, [outputPath], { cwd: codePath, encoding: 'utf-8', env: getEnv(commandPath), }); rimrafProcess.stdout.on('data', (data) => { console.log(`stdout: ${data}`); }); rimrafProcess.stderr.on('data', (data) => { console.log(`stderr: ${data}`); }); Rimrafprocess. on('close', (code) => {console.log(' rimrafClose: ${code} '); resolve(); }); }); Return tscTask() {return tscTask() {return tscTask(); reject) => { const command = process.platform === 'win32' ? `tsc.cmd` : `tsc`; const tscProcess = spawn(command, ['-p', runtimePath], { cwd: codePath, encoding: 'utf-8', env: getEnv(commandPath), }); tscProcess.stdout.on('data', (data) => { console.log(`stdout: ${data}`); }); tscProcess.stderr.on('data', (data) => { console.log(`stderr: ${data}`); }); Tscprocess. on('close', (code) => {console.log(' tscClose: ${code} '); resolve(); }); }); } /** * gulpTask * @return {Promise} */ function gulpTask() { return new Promise((resolve, reject) => { const command = process.platform === 'win32' ? `gulp.cmd` : `gulp`; Const gulpProcess = spawn(command, ['--outputpath', // outputpath path.join(outputpath, path.sep), '--compilepath', // compilePath. Join (compilePath, path.sep),], {CWD: codePath, encoding: 'utF-8 ', env: getEnv(commandPath),},); gulpProcess.stdout.on('data', (data) => { console.log(`stdout: ${data}`); }); gulpProcess.stderr.on('data', (data) => { console.log(`stderr: ${data}`); }); Gulpprocess. on('close', (code) => {console.log(' gulpTaskClose: ${code} '); resolve(); }); }); } /** * loopTask * @return {Promise} */ function loopTask() { return new Promise((resolve, reject) => { if (index >= tasks.length) { resolve(); } else { const task = tasks[index++]; if (task) { task() .then(() => { loopTask().then(() => { resolve(); }); }) .catch((error) => { reject(error); }); } else { reject(); }}}); } module.exports = {/** * build * @param {String} -srcpath */ build(srcPath) {if (srcPath) {// specifies the build directory if (path.isabsolute (srcPath)) {// Yes absolute path compilePath = srcPath; } else {// Yes relative path compilePath = path.join(runtimePath, srcPath); }} else {compilePath = path.join(runtimePath, srcDirName); } loopTask() .then(() => { console.log('finish'); process.exit(); }) .catch((error) => { console.log(error); }); }};Copy the code

It’s similar to buildpackage.js, except that buildpackage.js uses Babel to compile JS and JSX files. Instead, we use TSC to compile JS, JSX, TS, and TSX files. TSC is provided by typescript. This uses the -p argument to specify the context path to find the tsconfig.js file. The rest of the operations are the same as buildpackage.js. To make typescript configuration easier, there is also a default typescript configuration file that can be referenced by the host project

{
  "compilerOptions": {
    "declaration": true,
    "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",
    "paths": {
      "*": ["types/*"]
    }
  }
}
Copy the code

   github

  • Write a WebPack-based React packaging tool (1)
  • Write a WebPack-based React packaging tool (2)
  • Write a WebPack-based React packaging tool (3)
  • Write a WebPack-based React packaging tool (4)
  • Write a WebPack-based React packaging tool (5)
  • Write a WebPack-based React packaging tool (6)