samonxian / vite-plugin-build Goto Github PK

emitDeclaration feature is wonderful but sometimes I need to write code in JavaScript and declare type manually using d.ts files. I tried to use ignoreInput and ignore d.ts files. (I used this array instead, ['**/*.spec.*', '**/*.test.*'])

But that will also process d.ts. file which I really don't need so, I restore ignoreInput to normal.

I tried to use the Vite feature like copying files from the public folder to the build folder but it will also ignore d.ts from the folder. I tried to use the Vite copy plugin but it is also the same...

Is there any way to add a manually created d.ts file (excluding vite.d.ts I don't know its function) into the build without processing it?

项目中代码是这样的

<templeta>
        <img src="../../src/assets/logo-title.png" alt="" />
        <img src="@/assets/login-logo.png" alt=""  />
</templeta>

打包后的代码是

const _imports_0 = require("../assets/logo-title.png");
const _imports_1 = require("@/assets/login-logo.png");

即没有解析@的路径，也没有assets文件夹，vite.config.js有配置解析

Hi, I use this plugin for generate my .d.ts, but is not work.

Node: v18.4.0

config:

buildPlugin({
      libBuild: {
        buildOptions: {
          rollupOptions: {
            external: ['react', 'react-dom'],
            output: {
              globals: {
                react: 'React',
                'react-dom': 'ReactDOM',
              },
            },
          },
          lib: {
            entry: path.resolve(__dirname, 'src/index.ts'),
            name: 'cp-common',
            formats: ['es', 'umd'],
            fileName: (format) => `cp-common.${format}.js`,
          },
        },
      },
      fileBuild: { emitDeclaration: true },
    }),

I debug the source code ,found this plugin report error when emit the types file:

basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")
          ^^^^^^^

SyntaxError: missing ) after argument list

this error report from ./bin/tsc shell script.

If I modify this line of code in the emitDeclaration.ts to:

spawn.sync(
        isVue ? vueTscPath : tscPath,
        [
          '--rootDir',
          rootDir,
          '--declaration',
          '--emitDeclarationOnly',
          '--declarationDir',
          outputDir,
        ],
        {
          stdio: 'ignore',
        },
      );

It will be ok.

So this is bug or not ?

配置如下：
import {defineConfig} from 'vite'
import react from '@vitejs/plugin-react'
import {resolve} from 'path'
import dts from "rollup-plugin-dts";

import { buildPlugin } from 'vite-plugin-build';

const globals = {
react: 'React',
'react-dom': 'ReactDOM',
antd: 'antd'
}
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
react(),
buildPlugin({
fileBuild: {
emitDeclaration: true,
},
libBuild: {
buildOptions: {
rollupOptions: {
external: ['react','antd'],
output: {
globals: globals
},
},
lib: {
entry: resolve(__dirname, 'src/index.ts'),
name: 'lrt',
fileName: (format) => lrt-${format}.js,
},
},
},
})
],
css: {
modules: {
localsConvention: 'camelCaseOnly',
generateScopedName: (name: string) => lrt-${name},
},
},
})
`

没有生成 声明文件
vite:4.1.0
vite-plugin-build:0.7.1
node : 18.14.0

系统为MAC
iterm zsh

With the introduction of the React Server Component in Next.js 13, I want to add 'use client' directive on the top of my file to signify the component is Client Component to support RSC.

Currently, the plugin will remove such of directives.

Full error message

The "path" argument must be of type string. Received undefined
error during build:
TypeError [PLUGIN_ERROR]: The "path" argument must be of type string. Received undefined
    at new NodeError (node:internal/errors:387:5)
    at validateString (node:internal/validators:162:11)
    at Object.resolve (node:path:167:9)
    at resolve (file:///F:/Workspace/GithubForks/vite-plugin-build-react-ts-bphvr/node_modules/vite/dist/node/chunks/dep-c842e491.js:46432:35)
    at file:///F:/Workspace/GithubForks/vite-plugin-build-react-ts-bphvr/node_modules/vite/dist/node/chunks/dep-c842e491.js:46545:60
    at Array.map (<anonymous>)
    at doBuild (file:///F:/Workspace/GithubForks/vite-plugin-build-react-ts-bphvr/node_modules/vite/dist/node/chunks/dep-c842e491.js:46545:43)
    at async Module.build (file:///F:/Workspace/GithubForks/vite-plugin-build-react-ts-bphvr/node_modules/vite/dist/node/chunks/dep-c842e491.js:46416:16)
    at async lastBuild (F:\Workspace\GithubForks\vite-plugin-build-react-ts-bphvr\node_modules\vite-plugin-build\lib\buildFiles.js:111:20)
    at async Promise.all (index 0)

Can be easily reproduced using react-ts example.
I only upgrade both Vite (v3.2.2) and vite-plugin-build (v0.6.0) to the latest version.

From my testing with my own repo, the error starts on Vite v3.2.0. It is okay on v3.1.8 and below.

Can I change the output folder?

I want dist folder like:

├── dist
|      ├── umd
|      ├── es
|      ├── lib.es.js
|      ├── lib.umd.js
|      └── style.css
├── node_modules
├── src 
├── package-lock.json
├── package.json
└── vite.config.js

my project files like this

src/index.ts
src/index.vue

src/index.ts like this

import page from './index.vue'
export { page }

vite.config.ts like this

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import { buildPlugin } from 'vite-plugin-build';


export default defineConfig({
  plugins: [
    buildPlugin(
      {
        fileBuild: {
          emitDeclaration: true,
          isVue: true,
          esOutputDir: 'dist',
          commonJsOutputDir: false,
        }
      }
    ),
    vue(),
  ],
});

while vite-plugin-build would transfer like this
src/index.ts => dist/index.js and dist/index.d.ts
src/index.vue => dist/index.js and dist/index.d.ts

so the conflict happened.

emitDeclaration: true 没有生成声明文件

demo
https://stackblitz.com/edit/vitejs-vite-ncrgpz?file=dist%2Frbac-components.es.js

if I run npx vite build --watch it just build one time and doesn't wait for changes to recompile again, but without the plugin it works well.

用这个编译完组件库之后无法import；

使用lib目录下的报export undefined
使用es目录下的报 module undefiened

所以这个插件打包后的文件怎么使用呢？

我将 vue-ts clone下来一份，然后执行 npm i sass，接着将less修改成scss，最后执行npm run build
没有生成对应CSS文件，打包出来index.js的css引用是这样的

import style0 from "xxx/src/a/index.vue?used&vue&type=style&index=0&lang.module.scss";

sass是需要额外的什么配置么？

文件夹下有个 test.json 的文件，执行 pnpm run build 打包文件，test.json 文件没有一起打包进去

I see you have released a new update on npm which has subsequently broken the build

npm i [email protected] is broken

npm ERR! code ETARGET
npm ERR! notarget No matching version found for svelte-tsc@^0.6.1.
npm ERR! notarget In most cases you or one of your dependencies are requesting
npm ERR! notarget a package version that doesn't exist.

npm i [email protected] works

The fix is to release an update to your other package on npm https://www.npmjs.com/package/svelte-tsc => 0.6.1

Another improvement could be to add svelte-tsc as an optional dependency or as a bundled dependency

If you would like help setting up github actions to deploy this repo automatically to npm - please let me know! I'm happy to contribute.

Thanks for the package! <3

It would be cool if you could update the example using the latest versions of Vite and Vue =>3.3.4