npm link 包不支持ts,tsx文件

[deng-yc]

问题描述
npm link 包不支持ts,tsx文件

复现步骤
[复现问题的步骤]

1. 使用npm link 添加自定义包
2. 导入该包的 .ts 或 .tsx文件
3. 报错 缺少npm包${pkgName}，开始安装...

期望行为
期望支持npm包中的.ts,.tsx文件, 如果能加上 .{TARO_ENV}.ts,tsx 就更棒了

报错信息

系统信息

• 操作系统: Windows 10
• Taro 版本 v1.3.19
• Node.js 版本 v10
• 报错平台 [weapp]

补充信息
[可选]

cli 中 util -> resolve_npm_files.js 中,加入以下代码好想可以实现, 可能其他地方也需要有一些修改,对cli不是很熟悉,不知道可行否

function resolveNpmPkgMainPath(pkgName, isProduction,npmConfig,buildAdapter = 'weapp' /* WEAPP */, root) {
    try {
        return resolvePath.sync(pkgName, {
            basedir: root,
            extensions: [
                '.' + buildAdapter + '.js',
                '.' + buildAdapter + '.tsx',
                '.' + buildAdapter + '.ts',
                '.js',
                '.ts',
                '.tsx'
            ]
        });
    } catch (err) {
        console.error(err);
        if (err.code === 'MODULE_NOT_FOUND') {
            console.log(`缺少npm包${pkgName}，开始安装...`);
            const installOptions = {
                dev: false
            };
            if (pkgName.indexOf(npmProcess.taroPluginPrefix) >= 0) {
                installOptions.dev = true;
            }
            npmProcess.installNpmPkg(pkgName, installOptions);
            return resolveNpmPkgMainPath(
                pkgName,
                isProduction,
                npmConfig,
                buildAdapter,
                root
            );
        }
    }
}

[taro-bot]

欢迎提交 Issue~

如果你提交的是 bug 报告，请务必遵循 Issue 模板的规范，尽量用简洁的语言描述你的问题，最好能提供一个稳定简单的复现。🙏🙏🙏

如果你的信息提供过于模糊或不足，或者已经其他 issue 已经存在相关内容，你的 issue 有可能会被关闭。

Good luck and happy coding~

[iugo]

要编译之后才能引用吧. 直接的 ts, tsx 不能用呀.

源码用 ts 是因为在构建的过程中编译了, 而依赖包一般是不经过编译的.

[taro-bot]

CC @luckyadam

[luckyadam]

npm link 包不支持ts,tsx文件

可以，在 config/index.js 里配置一下 weapp.compile.include ，值为数组，把包名写进去

[deng-yc]

node_modules里面包写了include也不行

[fengwuxp]

@luckyadam 要支持ts,tsx文件 需要在 taro-cli/src/util/resolve_npm_files.js 文件更改2处代码 1；1 1：1: resolveNpmPkgMainPath 方法中的

 return resolvePath.sync(pkgName, {
      basedir: root, 
   // 查找 ts tsx 和js 文件 防止查找ts文件时进入catch代码段
     extensions:['.ts','.tsx','.js']
    })

2:recursiveRequire 方法中的：

//替换输出文件后缀名称，这个后缀替换代码不是太严谨，只是能达到效果
 let outputNpmPath = filePath.replace(rootNpm, npmOutputDir).replace(/node_modules/g, npmConfig.name).replace(".ts",".js").replace(".tsx",".js");

希望可以吧这2个小代码做一个变更，开发的时候可以方便点。

[Garfield550]

@fengwuxp 你有测试过这样改之后，带类型定义的 ts 能编译通过吗

[fengwuxp]

@Garfield550 之前我做了一个简单测试是可以的 ，但是刚才做了一个比较复杂的测试发现
方法 recursiveRequire

// 这一行代码的 filePath 在编译typescript 时后缀名称会丢失掉，到加载文件失败
// 应该是 ts里面导入了其他ts文件，导入语句没有默认没有加上扩展名称导致的，
// 这里 或者调用recursiveRequire的方法要做一个扩展名称不全，具体要修改哪里的代码还没找到
let fileContent = fs.readFileSync(filePath).toString();

[Garfield550]

@fengwuxp 我觉得既然思路都成了把 ts 强改 js，那不如按照 npm package 的规范，在 scripts 里指定 "prepack": "npm run build" 之类的命令，把 ts 文件编译后再导出。

https://docs.npmjs.com/misc/scripts

[taro-bot]

Hello~

您的问题楼上已经有了确切的回答，如果没有更多的问题这个 issue 将在 15 天后被自动关闭。

如果您在这 15 天中更新更多信息自动关闭的流程会自动取消，如有其他问题也可以发起新的 Issue。

Good luck and happy coding~