前端工程化（四）

npm install esbuild

./node_modules/.bin/esbuild --version

./node_modules/.bin/esbuild app.jsx --bundle --outfile=out.js

npm install esbuild-wasm

import * as esbuild from 'https://deno.land/x/esbuild@v0.14.22/mod.js'
const ts = 'let test: boolean = true'
const result = await esbuild.transform(ts, { loader: 'ts' })
console.log('result:', result)
esbuild.stop()

let envPlugin = {
  name: 'env',
  setup(build) {
    // Intercept import paths called "env" so esbuild doesn't attempt
    // to map them to a file system location. Tag them with the "env-ns"
    // namespace to reserve them for this plugin.
    build.onResolve({ filter: /^env$/ }, args => ({
      path: args.path,
      namespace: 'env-ns',
    }))

    // Load paths tagged with the "env-ns" namespace and behave as if
    // they point to a JSON file containing the environment variables.
    build.onLoad({ filter: /.*/, namespace: 'env-ns' }, () => ({
      contents: JSON.stringify(process.env),
      loader: 'json',
    }))
    
    let path = require('path')

    // Redirect all paths starting with "images/" to "./public/images/"
    build.onResolve({ filter: /^images\// }, args => {
      return { path: path.join(args.resolveDir, 'public', args.path) }
    })

    // Mark all paths starting with "http://" or "https://" as external
    build.onResolve({ filter: /^https?:\/\// }, args => {
      return { path: args.path, external: true }
    })
    
    // Load ".txt" files and return an array of words
    build.onLoad({ filter: /\.txt$/ }, async (args) => {
      let text = await fs.promises.readFile(args.path, 'utf8')
      return {
        contents: JSON.stringify(text.split(/\s+/)),
        loader: 'json',
      }
    })
    
    build.onStart(() => {
      console.log('build started')
    })
    
    build.onEnd(result => {
      console.log(`build ended with ${result.errors.length} errors`)
    })
  },
}

require('esbuild').build({
  entryPoints: ['app.js'],
  bundle: true,
  outfile: 'out.js',
  plugins: [envPlugin],
}).catch(() => process.exit(1))

import { defineConfig } from 'vite'
import path from 'path';

export default defineConfig({
  resolve: {
    alias: [
      { find: "src", replacement: path.resolve(__dirname,'src') },
    ]
  },
  server: {
  	// 端口
    port: 8001,
    // 是否开启https服务
    https: true,
    // 代理
    proxy: {
      '/project/delete': {
        target: 'https://www.your-request-url.com',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/project\/delete/, '')
      },
      '/project/update': {
        target: 'https://www.your-request-url.com',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/project\/update/, '')
      },
    }
  },
  css: {
    preprocessorOptions: {
      less: {
        additionalData: `@import "${path.resolve(__dirname, 'src/theme.module.less')}";`,
        javascriptEnabled: true,
      }
    },
  },
})

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
}

npm i vite-plugin-imp -D

import { defineConfig } from 'vite'
import vitePluginImp from 'vite-plugin-imp'
export default defineConfig({
  plugins: [
  	vitePluginImp({
      libList: [
        {
          libName: 'lodash',
          libDirectory: '',
          camel2DashComponentName: false
        },
        {
          libName: 'antd',
          style(name) {
            // use less
            return `antd/es/${name}/style/index.js`
          }
        },
      ]
    })
  ]
})

import { defineConfig } from 'vite'
import reactRefresh from '@vitejs/plugin-react-refresh'
import path from 'path';

export default defineConfig({
  plugins: [reactRefresh()],
})

// vite.config.js
import vue from '@vitejs/plugin-vue'

export default {
  plugins: [vue()],
}

// vite.config.js
import vueJsx from '@vitejs/plugin-vue-jsx'

export default {
  plugins: [
    vueJsx({
      // options are passed on to @vue/babel-plugin-jsx
    }),
  ],
}

import { defineConfig } from 'vite'
import reactRefresh from '@vitejs/plugin-react-refresh'
import path from 'path';

export default defineConfig({
  plugins: [reactRefresh()],
  build: {
    rollupOptions: {
      output:{
		  entryFileNames: `[name].${timestamp}.js`,
	      chunkFileNames: `[name].${timestamp}.js`,
	      // css文件名
	      assetFileNames: `[name].${timestamp}.[ext]`
	      // 比如你想构建出来的css为dist/index.css，那么你可以这样
	      //  assetFileNames: `index.[ext]`
	  }
	}
  },
})

import { defineConfig } from 'vite'
import path from 'path';

export default defineConfig({
  build: {
    lib: {
      // 入口文件
      entry: path.resolve(__dirname, 'src/index.tsx'),
      // umd、iife的格式vite要求必须要有name作为导出的全局变量
      name: "SpecialEffect",
      // 导出格式，默认为["iife","umd"]
      formats: ['iife'],
      // js打包名称，当然这部分官方文档更加详细
      fileName: () => "index.js"
    },
	
	// umd格式下，支持将不需要打包的第三方库，排除在外，并指定全部环境
	// 提供的全局变量代替，比如以下的例子，不将react打包，由全局React
	// 变量提供react库
	rollupOptions: {
      external: ['react'],
      output: {
        globals: {
          react: 'React'
        }
      }
    }
  },
})

npm install -g wp2vite

cd your_workspace/your_project
## 执行wp2vite的命令行
wp2vite 
or 
wp2vite init

// 安装依赖
npm install

// 启动项目
npm run dev // 如果原先你的项目有dev script，请执行下面的命令
or
npm run vite-start

npm install vite-svg-loader --save-dev

import svgLoader from 'vite-svg-loader'

export default defineConfig({
  plugins: [vue(), svgLoader({
    svgoConfig: {
      multipass: true
    }
  })
  ]
})

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import federation from "@originjs/vite-plugin-federation";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    react(),
    federation({
      name: "app1",
      remotes: {
        app2: "http://localhost:3002/assets/remoteEntry.js",
      },
      shared: ["react"],
    }),
  ],
});

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import federation from "@originjs/vite-plugin-federation";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    react(),
    federation({
      name: "app2",
      filename: "remoteEntry.js",
      library: { type: "module" },
      exposes: {
        "./App": "./src/App.jsx",
      },
      shared: ["react"],
    }),
  ],
});

remotes: {
    app2: {
        external: 'http://localhost:5011/remoteEntry.js',
        format: 'var',
        from: 'webpack'
    }
}

const examplePlugin = () => {
  let config

  return {
    name: 'read-config',

    configResolved(resolvedConfig) {
      // 存储最终解析的配置
      config = resolvedConfig
    },

    // 在其他钩子中使用存储的配置
    transform(code, id) {
      if (config.command === 'serve') {
        // dev: 由开发服务器调用的插件
      } else {
        // build: 由 Rollup 调用的插件
      }
    },
  }
}

const myPlugin = () => ({
  name: 'configure-server',
  configureServer(server) {
    // 返回一个在内部中间件安装后
    // 被调用的后置钩子
    return () => {
      server.middlewares.use((req, res, next) => {
        // 自定义请求处理...
      })
    }
  },
})

const myPlugin = () => ({
  name: 'configure-preview-server',
  configurePreviewServer(server) {
    // 返回一个钩子，会在其他中间件安装完成后调用
    return () => {
      server.middlewares.use((req, res, next) => {
        // 自定义处理请求 ...
      })
    }
  },
})

const htmlPlugin = () => {
  return {
    name: 'html-transform',
    transformIndexHtml(html) {
      return html.replace(
        /<title>(.*?)<\/title>/,
        `<title>Title replaced!</title>`,
      )
    },
  }
}

function myPlugin() {
  return {
    name: 'build-only',
    apply: 'build' // 或 'serve'
    // apply(config, { command }) {
  	// 非 SSR 情况下的 build
  	// return command === 'build' && !config.build.ssr
  	// }
  }
}

npm i magic-string

import MagicString from 'magic-string';
import fs from 'fs'

const s = new MagicString('problems = 99');

s.update(0, 8, 'answer');
s.toString(); // 'answer = 99'

s.update(11, 13, '42'); // character indices always refer to the original string
s.toString(); // 'answer = 42'

s.prepend('var ').append(';'); // most methods are chainable
s.toString(); // 'var answer = 42;'

const map = s.generateMap({
  source: 'source.js',
  file: 'converted.js.map',
  includeContent: true
}); // generates a v3 sourcemap

fs.writeFileSync('converted.js', s.toString());
fs.writeFileSync('converted.js.map', map.toString());

<div id="root"></div>

// Babel Input: ES2015 arrow function
[1, 2, 3].map((n) => n + 1);

// Babel Output: ES5 equivalent
[1, 2, 3].map(function(n) {
  return n + 1;
});

npm install --save-dev @babel/core @babel/cli

babel src --out-dir lib # 将src下的文件处理后输出到lib

module: {
  rules: [
    {
      test: /\.js$/,
      loader: 'babel-loader',
      options: {
          // 配置项
      }
    }
  ]
}

// babel.config.js
module.exports = {
  presets: [],
  plugins: []
};

npm install --save-dev @babel/template

// 引入babel-template
const template = require('babel-template');

// 定义try/catch语句模板
let tryTemplate = `
try {
} catch (e) {
console.log(CatchError：e)
}`;

// 创建模板
const temp = template(tryTemplate);

// 给模版增加key，添加console.log打印信息
let tempArgumentObj = {
   // 通过types.stringLiteral创建字符串字面量
   CatchError: types.stringLiteral('Error')
};

// 通过temp创建try语句的AST节点
let tryNode = temp(tempArgumentObj);

module.exports = function(babel) {
  let t = babel.type
  return {
    visitor: {
      Identifier(path, state) {
        const name = path.node.name;
        // reverse the name: JavaScript -> tpircSavaJ
        path.node.name = name
          .split("")
          .reverse()
          .join("");
      },
    },
  };
}

module.exports = function (babel) {
   let t = babel.type
   return { 
     visitor: {
       AwaitExpression(path) {
       
        // 判断父路径中是否已存在try语句，若存在直接返回
        if (path.findParent((p) => p.isTryStatement())) {
          return false;
        }
       
         let node = path.node;
         const asyncPath = path.findParent((p) => p.node.async && (p.isFunctionDeclaration() || p.isArrowFunctionExpression() || p.isFunctionExpression() || p.isObjectMethod()));
         
         let tryNode = temp(tempArgumentObj);
         
         // 获取父节点的函数体body
         let info = asyncPath.node.body;

         // 将函数体放到try语句的body中
         tryNode.block.body.push(...info.body);

         // 将父节点的body替换成新创建的try语句
         info.body = [tryNode];
       }
     }
   }
 }

npm install --save-dev @babel/plugin-transform-runtime 
npm install --save @babel/runtime # 提供缺失的特性，须要在生产环境中安装

// babel.config.json
{
  "presets": [
    [
      "@babel/preset-env",
      {
        "useBuiltIns": "usage",
        "corejs": 3
      }
    ]
  ],
  "plugins": [["@babel/plugin-transform-runtime"]]
}

import Button from 'antd/lib/button';
import 'antd/lib/button/style';

npm install babel-plugin-import --save-dev

'plugins': [
	['import',{'libraryName': 'antd', 'style': true,'libraryDirectory': 'lib'},'antd']
	['import',{'libraryName': 'antd-mobile', 'libraryDirectory': 'lib'},'antd-mobile']
]

yarn add --dev sucrase  # Or npm install --save-dev sucrase
node -r sucrase/register main.ts

yarn add --dev sucrase ts-node typescript
./node_modules/.bin/ts-node --transpiler sucrase/ts-node-plugin main.ts

ts-node --transpiler sucrase/ts-node-plugin

import {transform} from "sucrase";
const compiledCode = transform(code, {transforms: ["typescript", "imports"]}).code;

npm i -D @swc/core @swc/cli
## yarn add --dev @swc/core @swc/cli

[
  {
    "jsc": { // 编译规则 
      "target": "es5", // 输出js的规范 
      "parser": { 
        // 除了 ecmascript，还支持 typescript 
        "syntax": "ecmascript", 
        // 是否解析jsx，对应插件 @babel/plugin-transform-react-jsx 
        "jsx": false, 
        // 是否支持装饰器，对应插件 @babel/plugin-syntax-decorators 
        "decorators": false, 
        // 是否支持动态导入，对应插件 @babel/plugin-syntax-dynamic-import 
        "dynamicImport": false, 
        // …… 
        // babel 的大部分插件都能在这里找到对应配置 
      }, 
      "minify": {}, // 压缩相关配置，需要先开启压缩 
    },
    "env": {
      "targets": {
        "chrome": "58",
        "ie": "11"
      }
    }
    "minify": true // 是否开启压缩 
  }
]

const { config } = require("@swc/core/spack");

module.exports = config({
  //入口文件
  entry: __dirname + "/src/index.ts",
  //输出
  output: {
    path: __dirname + "/dist",
  },
  // swc编译配置
  options:{
    jsc: {
        //解析配置
        parser: {
          syntax: "typescript", //输入文件格式
          tsx: false,    // 是否支持tsx
          dynamicImport: false, //是否支持动态导入
          decorators: false, //是否支持装饰器
        },
        transform: null,
        target: "es5", //转译目标
        loose: false, 
        externalHelpers: false,
        keepClassNames: false
      },
      // 输出文件配置
      module: {
          type: "commonjs",  
          strict: false,
          strictMode: true,
          lazy: false,
          noInterop: false,
          ignoreDynamic: false
        }
  }
});

"scripts": {
  "build": "spack"
}

cnpm install --save-dev @swc/core swc-loader

const path = require('path');

module.exports = {
  //  入口文件
  entry: './src/main.js',
  output: {
    //  打包完成后输出的目录
    path: path.resolve(__dirname, 'dist'),
    //  打包完成后的 JS 文件名
    filename: 'index.js',
  },
  module: {
    rules: [
      //  SWC 的 Loder 配置
      {
        test: /\.m?js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'swc-loader',
        },
      },
    ],
  },
};

cnpm install --save-dev core-js

import 'core-js/features/promise';