Search code examples
typescriptbundlebazelrolluprollupjs

Rollup can't bundle source with Bazel and Typescript


I trying get bundle with rollup, typescript and bazel env. I cant import relative paths. Typescript building correctly but rollup cant bundle that source.

WORKSPACE

# WORKSPACE
workspace(
    name = "WORKSPACE",
    # Map the @npm bazel workspace to the node_modules directory.
    # This lets Bazel use the same node_modules as other local tooling.
    managed_directories = {"@npm": ["node_modules"]},
)

# Imports
load("//tools:dependencies.bzl", "fetch_dependencies")
fetch_dependencies()

load("@build_bazel_rules_nodejs//:index.bzl", "yarn_install")
yarn_install(
    name = "npm",
    package_json = "//:package.json",
    yarn_lock = "//:yarn.lock",
)

# Set up web testing, choose browsers we can test on
load("@io_bazel_rules_webtesting//web:repositories.bzl", "web_test_repositories")

web_test_repositories()

load("@io_bazel_rules_webtesting//web/versioned:browsers-0.3.2.bzl", "browser_repositories")

browser_repositories(
    chromium = True,
    firefox = True,
)

FOLDER STRUCTURE

apps
    mobile
        index.ts
        src
            index.tsx
            asd.ts

packages
    core
        index.ts
        src
            index.ts
        ...

CORE BUILD FILE

# Package Info
package(default_visibility = ['//visibility:public'])

# Imports
load('@npm//@bazel/typescript:index.bzl', 'ts_library')
load('@build_bazel_rules_nodejs//:index.bzl', 'pkg_npm')

ts_library(
    name = "core",
    module_name = '@app/core',
    srcs = glob(["**/*.ts"]),
    deps = [
        "@npm//reflect-metadata",
        "@npm//moment",
        "@npm//rxjs",
        "@npm//axios",
    ]
)

pkg_npm(
    name = "core-package",
    srcs = [],
    substitutions = {"//internal/": "//"},
    deps = [
        '//packages/core:core'
    ],
)

APP BUILD FILE

# Package Info
package(default_visibility = ['//visibility:public'])

# Imports
load('@npm//@bazel/typescript:index.bzl', 'ts_library')
load("@npm//http-server:index.bzl", "http_server")
load("@npm//@bazel/rollup:index.bzl", "rollup_bundle")

ts_library(
    name = "mobile",
    module_name = '@app/mobile',
    srcs = glob(["**/*.ts", "**/*.tsx"]),
    deps = [
        "@npm//react",
        "@npm//@types/react",
        "@npm//react-router-dom",
        "@npm//@types/react-router-dom",
        "@npm//rxjs",
        "@npm//moment",

        "//packages/core:core",
    ]
)

filegroup(
    name = "mobile-source",
    srcs = [":mobile"],
    output_group = "es6_sources",
)

rollup_bundle(
    config_file = "//:rollup.config.js",
    name = "bundle",
    entry_points = {
        "index.ts" : "bundle"
    },
    srcs = [],
    output_dir = True,
    deps = [
        ":mobile",
        "@npm//@rollup/plugin-node-resolve"
    ],
)

http_server(
    name = "devserver",
    data = [
        "public/index.html",
        "bundle",
    ],
    args = ["."],
)

rollup.config.js

import { nodeResolve } from '@rollup/plugin-node-resolve';

export default {
    input: 'index.ts',
    output: {
        name: 'bundle',
        format: 'umd',
        plugins: [
            nodeResolve({
                mainFields: ['browser', 'es2015', 'module', 'jsnext:main', 'main'],
            })
        ]
    },
    onwarn: function (warning) {
        if (warning.code === 'THIS_IS_UNDEFINED') { return; }
        console.warn(warning.message);
    }
};

my index file in apps/mobile

export * from '@apps/mobile/src';
import { A } from './src/as';

console.log(A.a());

When i run bazel build //apps/mobile:bundle i got following error and not completed bundle file.

bazel-out/k8-fastbuild/bin/apps/mobile/index.mjs → bazel-out/k8-fastbuild/bin/apps/mobile/bundle...
'@app/mobile/src' is imported by bazel-out/k8-fastbuild/bin/apps/mobile/index.mjs, but could not be resolved – treating it as an external dependency
The "buildStart" hook used by the output plugin node-resolve is a build time hook and will not be run for that plugin. Either this plugin cannot be used as an output plugin, or it should have an option to configure it as an output plugin.
The "load" hook used by the output plugin node-resolve is a build time hook and will not be run for that plugin. Either this plugin cannot be used as an output plugin, or it should have an option to configure it as an output plugin.
The "resolveId" hook used by the output plugin node-resolve is a build time hook and will not be run for that plugin. Either this plugin cannot be used as an output plugin, or it should have an option to configure it as an output plugin.

GENRATED BUNDLE FILE

export * from '@apps/mobile/src';

class A {
    static a() {
        return 's';
    }
}

console.log(A.a());

Solution

  • After tons of hours i find the solution. ts_library rule have devmode_target and devmode_module. if you building under devmode, tslibrary doesn't read confs in tsconfig. it looks to devmode_target and devmode_module. when i setted correctly(es2015) those params, i got build.