魔改 Laya 编译脚本实现兼容常规 NPM 包

方式 1:魔改 laya 编译器

修改 tsconfig

{
  "compilerOptions": {
    "module": "es6",
    "target": "es6",
    "noEmitHelpers": true,
    "sourceMap": true,
    "moduleResolution": "node",
    "allowSyntheticDefaultImports": true,
    "baseUrl": ".",
    "paths": {
      "tslib": ["node_modules/tslib/tslib.d.ts"]
    }
  },
  "exclude": ["node_modules"]
}

添加关键依赖

{
  "devDependencies": {
    "rollup-plugin-commonjs": "^10.1.0",
    "rollup-plugin-node-resolve": "^5.2.0",
    "tslib": "^2.1.0"
  }
}

修改 .laya/compile.js

//...
const resolve = require("rollup-plugin-node-resolve");
const commonjs = require("rollup-plugin-commonjs");
//...
gulp.task("compile", prevTasks, function () {
  //...
  return rollup.rollup({
    //...
    plugins: [
      //...
      resolve(),
      commonjs(),
    ],
  });
  //...
});

方式 2:利用 webpack5 辅助增量编译

这种方式仅用于生成bundle.js，不能编译 UI 编辑器内修改的内容。

安装必要依赖

{
  "scripts": {
    "dev": "webpack -w --mode development"
  },
  "dependencies": {},
  "devDependencies": {
    "@babel/core": "^7.13.10",
    "@babel/plugin-proposal-class-properties": "^7.13.0",
    "@babel/preset-typescript": "^7.13.0",
    "babel-loader": "^8.2.2",
    "webpack": "^5.28.0",
    "webpack-cli": "^4.5.0"
  }
}

编写 webpack.config.js

const path = require("path");

module.exports = {
  entry: "./src/Main.ts",
  output: {
    path: path.resolve(__dirname, "bin/js"),
    filename: "bundle.js",
  },
  resolve: {
    extensions: [".wasm", ".mjs", ".js", ".json", ".ts"],
  },
  module: {
    rules: [
      {
        test: /\.ts$/,
        use: {
          loader: "babel-loader",
          options: {
            presets: ["@babel/preset-typescript"],
            plugins: ["@babel/plugin-proposal-class-properties"],
          },
        },
      },
    ],
  },
};