E2E ESBuild #10106
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| on: | |
| schedule: | |
| - cron: '0 */4 * * *' | |
| push: | |
| branches: | |
| - master | |
| pull_request: | |
| paths: | |
| - .github/actions/prepare/action.yml | |
| - .github/workflows/e2e-esbuild-workflow.yml | |
| - scripts/e2e-setup-ci.sh | |
| name: 'E2E ESBuild' | |
| jobs: | |
| chore: | |
| name: 'Validating ESBuild' | |
| runs-on: ubuntu-latest | |
| steps: | |
| - uses: actions/checkout@v4 | |
| - uses: ./.github/actions/prepare | |
| - name: 'Running the integration test' | |
| run: | | |
| source scripts/e2e-setup-ci.sh | |
| yarn init -p | |
| yarn add -D esbuild ts-node typescript | |
| echo "require('esbuild').build({bundle: true, format: 'cjs', target: 'node14', entryPoints: ['./src/main.js'], outfile: './dist/bundle.js'})" > build.js | |
| # Tree-shaking | |
| echo "export default {input: 'src/main.js', output: {file: 'dist/bundle.js', format: 'cjs'}};" | tee rollup.config.js | |
| mkdir src | |
| echo "export function square(x) {return x * x} export function cube(x) {return x * x * x}" | tee src/maths.js | |
| echo "import {cube} from './maths.js'; console.log(cube(5));" | tee src/main.js | |
| yarn ts-node --transpile-only build.js | |
| [[ "$(node dist/bundle.js)" = "125" ]] | |
| ! cat dist/bundle.js | grep "square" | |
| # With NPM packages | |
| yarn add lodash | |
| echo "import _ from 'lodash';function printHello() { console.log(_.join(['Hello', 'webpack'], ' '))}; printHello();" | tee src/main.js | |
| yarn ts-node --transpile-only build.js | |
| [[ "$(node dist/bundle.js)" = "Hello webpack" ]] | |
| # Make sure we play nicely with esbuild plugins that create virtual modules with resolveDirs | |
| echo "require('esbuild').build({bundle: true, format: 'cjs', target: 'node14', entryPoints: ['./src/main.js'], outfile: './dist/bundle.js', plugins: [require('./virtualModulePlugin')]})" > build.js | |
| cat <<- "EOF" | tee virtualModulePlugin.js | |
| const { resolve, dirname } = require('path'); | |
| module.exports = { | |
| name: 'virtualModules', | |
| setup(build) { | |
| build.onResolve({ filter: /\?virtual$/ }, function({ path, importer }) { | |
| const resolveDir = dirname(resolve(dirname(importer), path)); | |
| return { path, pluginData: { resolveDir }, namespace: 'virtual-module' }; | |
| }); | |
| build.onLoad({ filter: /\?virtual$/ }, function({ path, pluginData }) { | |
| const specifier = path.replace(/\?virtual/, ''); | |
| return { resolveDir: pluginData.resolveDir, contents: `export * as virtual from ${JSON.stringify(specifier)}`, loader: 'js' }; | |
| }); | |
| } | |
| } | |
| EOF | |
| echo "import {virtual} from './maths.js?virtual'; console.log(virtual.cube(6));" | tee src/main.js | |
| yarn ts-node --transpile-only build.js | |
| [[ "$(node dist/bundle.js)" = "216" ]] |