@rollup/plugin-node-resolve#nodeResolve JavaScript Examples

function getConfig(entry, filename, perf) {
  // Remove the extension
  let basename = filename.replace(/\.[^.]*/, '');

  return {
    input: entry,
    output: {
      dir: perf ? 'dist/perf' : 'dist',
      entryFileNames: filename,
      chunkFileNames: `${basename}-[name]-[hash].js`,
      format: 'esm',
      exports: 'named'
    },
    plugins: [
      !perf &&
        alias({
          entries: {
            'perf-deets': path.resolve(
              __dirname,
              './node_modules/perf-deets/noop.js'
            )
          }
        }),
      webWorkerLoader({
        pattern: /.*\/worker\.js/,
        targetPlatform: 'browser',
        external: [],
        plugins: [terser()]
      }),
      nodeResolve()
    ],
    ...(perf ? { external: ['perf-deets'] } : {})
  };
}

config = {
    input: "src/lootsheetnpc5e.js",
    external: ["../../../../../systems/dnd5e/module/actor/sheets/npc.js"],
    output: {
        dir: "dist/",
        format: "es",
        sourcemap: true,
        assetFileNames: "[name].[ext]",
    },
    plugins: [
        replace({
            // If you would like DEV messages, specify 'development'
            // Otherwise use 'production'
            'process.env.NODE_ENV': JSON.stringify('production')
        }),
        nodeResolve({
            tippy: true,
        }),
        sourcemaps(),
        copy({
            watch: staticFiles,
            targets: staticFiles.map((file) => ({
                src: `${file}`,
                dest: "dist",
            })),
        }),
        terser({ ecma: 2020, keep_fnames: true }),
    ],
}

configs = bundles.map(({ input: inputPath, output }) => ({
    input: inputPath,
    output,
    plugins: [
        nodeResolve(),
        babel({
            babelHelpers: 'bundled',
            plugins: ['annotate-pure-calls'],
        }),
        replace({
            __DEV__: false,
            preventAssignment: true,
        }),
        output.file.includes('.min.') && terser(),
    ],
}))

config = {
	input: {
		serverless: 'src/serverless.js',
		shims: 'src/shims.js'
	},
	output: [
		{
			dir: 'files/cjs',
			format: 'cjs'
		},
		{
			dir: 'files/esm',
			format: 'esm'
		}
	],
	plugins: [nodeResolve(), commonjs(), json()],
	external: (id) => id === '0SERVER' || id.startsWith('node:'),
	preserveEntrySignatures: 'exports-only'
}

// 整合打;包
config.push({
    input: resolve(__dirname, "../src/index.ts"),
    plugins: [
        url(),
        nodeResolve(),
        commonjs(),
        postcss({
            extensions: [ '.css', 'scss' ],
            name: 'index',
            to: `${output}/index.css`,
            plugins: [
                autoprefixer()
            ],
            // extract: `${output}/index.css`
            extract: false
        }),
        typescript({
            tsconfig: getPath('../tsconfig.json'), // 导入本地ts配置
            tsconfigDefaults: defaults,
            tsconfigOverride: {
                compilerOptions: {
                    declaration: true
                }
            },
            extensions
        }),
        json(),
        replace({
            preventAssignment: true
        })
    ],
    output: [
        { name: 'WebUIPlus', file: `${output}/web-plus.umd.js`, format: 'umd' },
        // { file: `${output}/web-plus.cjs.js`, format: 'cjs' },
        // { file: `${output}/web-plus.esm.js`, format: 'es' }

    ]
})

config = [
    {
        input: `./src/index.tsx`,
        plugins: [
            terser(),
            url({
                include: ['**/*.svg', '**/*.png', '**/*.jp(e)?g', '**/*.gif', '**/*.webp', '**/*.ttf', '**/*.woff']
            }),
            nodeResolve(),
            commonjs(),
            postcss({
                name: 'index',
                extensions: [ '.css', 'scss' ],
                to: `./dist/index.css`,
                plugins: [
                    autoprefixer()
                ],
                // extract: `${output}/${name}/lib/index.css`
                extract: false
            }),
            // tsPlugin,
            typescript({
                tsconfig: getPath('../tsconfig.build.json'), // 导入本地ts配置
                tsconfigDefaults: defaults,
                tsconfigOverride: {
                    compilerOptions: {
                        declaration: true
                    }
                },
                extensions
            }),
            json(),
            replace({
                preventAssignment: true
            })
        ],
        output: [
            { name: name, file: `${output}/index.umd.js`, format: 'umd' },
            { file: `${output}/index.cjs.js`, format: 'cjs' },
            { file: `${output}/index.esm.js`, format: 'es' }

        ]
    }
]

module.exports = {
    input: join(cwd, '/src/index.js'),
    onwarn: (warning) => {
        if (typeof warning === 'string') {
            return colors.yellow('warning');
        }
        const code = (warning.code || '').toLowerCase();
        if (code === 'mixed_exports' || code === 'missing_global_name') {
            return;
        }
        let message = warning.message;
        console.log(`${colors.yellow(`${code}`)}${colors.dim(':')} ${message}`);
    },
    output: OutputOptions(),
    external:Object.keys(globals || {}).filter(
        v => !/^[\.\/]/.test(v)
    ),
    plugins: [
        vuePlugin({
            css: false
        }),
        postcss({
            minimize: true,
            extract: false,
            plugins: [
                cssUrl({
                    imgExtensions : /\.(png|jpg|jpeg|gif|svg)$/,
                    fontExtensions : /\.(ttf|woff|woff2|eot)$/,
                    limit : 8192,
                    hash : false,
                    slash : false
                }),
            ]
        }),
        externals({
            devDeps: false
        }),
        formCreateNodeResolve(),
        nodeResolve({
            extensions: ['.js', '.json', '.jsx', '.ts', '.tsx'],
            preferBuiltins: true,
            jsnext: true,
            module: true
        }),
        commonjs({
            ignore: (name) => {
                return isExternal(not_externals, name);
            }
        }),
        babel({
            babelHelpers: 'bundled',
            exclude: 'node_modules/**',
            extensions: ['.js', '.jsx', '.mjs', '.ts', '.tsx', '.vue'],
        }),
        replace({
            preventAssignment: true,
            'process.env.NODE_ENV': JSON.stringify('production'),
        }),
        buble(),
        visualizer()
    ]
};

// 整合打;包
config.push({
    input: resolve(__dirname, "../src/index.ts"),
    plugins: [
        terser({
                output: {
                    comments: false,
                },
                numWorkers: cpuNums, //多线程压缩
            }
        ),
        url({
            include: ['**/*.svg', '**/*.png', '**/*.jp(e)?g', '**/*.gif', '**/*.webp', '**/*.ttf', '**/*.woff']
        }),
        nodeResolve(),
        commonjs(),
        postcss({
            extensions: [ '.css', 'scss' ],
            name: 'index',
            to: `${output}/index.css`,
            plugins: [
                autoprefixer()
            ],
            // extract: `${output}/index.css`
            extract: false,
            minimize: true
        }),
        typescript({
            tsconfig: getPath('../tsconfig.json'), // 导入本地ts配置
            tsconfigDefaults: defaults,
            tsconfigOverride: {
                compilerOptions: {
                    declaration: true
                }
            },
            // https://unpkg.com/vue@3
            // unpkg.com/:package@:version/:file
            // https://unpkg.com/@canyuegongzi/[email protected]/dist/index.umd.js
            extensions
        }),
        json(),
        replace({
            preventAssignment: true
        })
    ],
    output: [
        {
            name: 'webUIPlus',
            file: `${output}/index.umd.js`,
            format: 'umd',
            globals: {
                '@canyuegongzi/web-core-plus': 'webCorePlus'
            }
        },
        { file: `${output}/index.cjs.js`, format: 'cjs' },
        { file: `${output}/index.esm.js`, format: 'es' }

    ],
    external: [/web-core-plus$/],
})

config = readdirSync(input)
    .filter(name => ![].includes(name))
    .map(name => ({
        input: `${input}/${name}/index.tsx`,
        plugins: [
            terser({
                    output: {
                        comments: false,
                    },
                    numWorkers: cpuNums, //多线程压缩
                }
            ),
            url({
                include: ['**/*.svg', '**/*.png', '**/*.jp(e)?g', '**/*.gif', '**/*.webp', '**/*.ttf', '**/*.woff']
            }),
            nodeResolve(),
            commonjs(),
            postcss({
                name: 'index',
                extensions: [ '.css', 'scss' ],
                to: `${output}/${name}/lib/index.css`,
                plugins: [
                    autoprefixer()
                ],
                // extract: `${output}/${name}/lib/index.css`
                extract: false,
                minimize: true
            }),
            tsPlugin,
            json(),
            replace({
                preventAssignment: true
            })
        ],
        output: [
            { name: name, file: `${output}/${name}/lib/index.umd.js`, format: 'umd' },
            { file: `${output}/${name}/lib/index.cjs.js`, format: 'cjs' },
            { file: `${output}/${name}/lib/index.esm.js`, format: 'es' }

        ]
    }))

// 整合打;包
config.push({
    input: resolve(__dirname, "../src/index.ts"),
    plugins: [
        terser({
                output: {
                    comments: false,
                },
                numWorkers: cpuNums, //多线程压缩
            }
        ),
        url({
            include: ['**/*.svg', '**/*.png', '**/*.jp(e)?g', '**/*.gif', '**/*.webp', '**/*.ttf', '**/*.woff']
        }),
        nodeResolve(),
        commonjs(),
        postcss({
            extensions: [ '.css', 'scss' ],
            name: 'index',
            to: `${output}/index.css`,
            plugins: [
                autoprefixer()
            ],
            // extract: `${output}/index.css`
            extract: false,
            minimize: true
        }),
        typescript({
            tsconfig: getPath('../tsconfig.json'), // 导入本地ts配置
            tsconfigDefaults: defaults,
            tsconfigOverride: {
                compilerOptions: {
                    declaration: true
                }
            },
            extensions
        }),
        json(),
        replace({
            preventAssignment: true
        })
    ],
    output: [
        {
            name: 'webUIPlus',
            file: `${output}/index.umd.js`,
            format: 'umd',
            globals: {
                '@canyuegongzi/web-core-plus': 'webCorePlus'
            }
        },
        { file: `${output}/index.cjs.js`, format: 'cjs' },
        { file: `${output}/index.esm.js`, format: 'es' }

    ],
    external: [/web-core-plus$/],
})

// 整合打;包
config.push({
    input: resolve(__dirname, "../src/packages/wu-tree/index.tsx"),
    plugins: [
        url({
            include: ['**/*.woff', '**/*.woff2', '**/*.ttf'],
            // setting infinite limit will ensure that the files
            // are always bundled with the code, not copied to /dist
            limit: Infinity,
        }),
        nodeResolve(),
        commonjs(),
        postcss({
            extensions: [ '.css', 'scss' ],
            name: 'index',
            to: `${output}/index.css`,
            plugins: [
                autoprefixer()
            ],
            extract: false
        }),
        typescript({
            tsconfig: getPath('../tsconfig.json'), // 导入本地ts配置
            tsconfigDefaults: defaults,
            tsconfigOverride: {
                compilerOptions: {
                    declaration: true
                }
            },
            extensions
        }),
        json(),
        replace({
            preventAssignment: true
        })
    ],
    output: [
        {
            name: 'webUIPlusTree',
            file: `${output}/web-plus-tree.umd.js`,
            format: 'umd',
            globals: {
                '@canyuegongzi/web-core-plus': 'webCorePlus'
            }
        },
        // { file: `${output}/web-plus.cjs.js`, format: 'cjs' },
        // { file: `${output}/web-plus.esm.js`, format: 'es' }

    ],
    external: [/web-core-plus$/],
})

// 整合打;包
config.push({
    input: resolve(__dirname, "../src/packages/wu-date-picker/index.tsx"),
    plugins: [
        url({
            include: ['**/*.woff', '**/*.woff2', '**/*.ttf'],
            // setting infinite limit will ensure that the files
            // are always bundled with the code, not copied to /dist
            limit: Infinity,
        }),
        nodeResolve(),
        commonjs(),
        postcss({
            extensions: [ '.css', 'scss' ],
            name: 'index',
            to: `${output}/index.css`,
            plugins: [
                autoprefixer()
            ],
            extract: false
        }),
        typescript({
            tsconfig: getPath('../tsconfig.json'), // 导入本地ts配置
            tsconfigDefaults: defaults,
            tsconfigOverride: {
                compilerOptions: {
                    declaration: true
                }
            },
            extensions
        }),
        json(),
        replace({
            preventAssignment: true
        })
    ],
    output: [
        {
            name: 'webUIPlusDatePicker',
            file: `${output}/web-plus-data-picker.umd.js`,
            format: 'umd',
            globals: {
                '@canyuegongzi/web-core-plus': 'webCorePlus'
            }
        },
        // { file: `${output}/web-plus.cjs.js`, format: 'cjs' },
        // { file: `${output}/web-plus.esm.js`, format: 'es' }

    ],
    external: [/web-core-plus$/],
})

// 整合打;包
config.push({
    input: resolve(__dirname, "../src/packages/wu-color-picker/index.tsx"),
    plugins: [
        url({
            include: ['**/*.woff', '**/*.woff2', '**/*.ttf'],
            // setting infinite limit will ensure that the files
            // are always bundled with the code, not copied to /dist
            limit: Infinity,
        }),
        nodeResolve(),
        commonjs(),
        postcss({
            extensions: [ '.css', 'scss' ],
            name: 'index',
            to: `${output}/index.css`,
            plugins: [
                autoprefixer()
            ],
            extract: false
        }),
        typescript({
            tsconfig: getPath('../tsconfig.json'), // 导入本地ts配置
            tsconfigDefaults: defaults,
            tsconfigOverride: {
                compilerOptions: {
                    declaration: true
                }
            },
            extensions
        }),
        json(),
        replace({
            preventAssignment: true
        })
    ],
    output: [
        {
            name: 'webUIPlusColorPicker',
            file: `${output}/web-plus-color-picker.umd.js`,
            format: 'umd',
            globals: {
                '@canyuegongzi/web-core-plus': 'webCorePlus'
            }
        },
        // { file: `${output}/web-plus.cjs.js`, format: 'cjs' },
        // { file: `${output}/web-plus.esm.js`, format: 'es' }

    ],
    external: [/web-core-plus$/],
})

plugins = [ nodeResolve({extensions}), svelte()]

sharedConfig = {
  external: ['react', 'react-dom', 'react/jsx-runtime', 'prop-types', 'react-transition-state'],
  plugins: [nodeResolve(), babel({ babelHelpers: 'bundled' })],
  treeshake: {
    moduleSideEffects: false,
    propertyReadSideEffects: false
  }
}

getPlugins = () => {
    return [
        vue(),
        AutoImport({
            resolvers: [ElementPlusResolver()]
        }),
        Components({
            resolvers: [ElementPlusResolver()]
        }),
        typescript({
            tsconfig: './tsconfig.json'
        }),
        nodeResolve({
            mainField: ['jsnext:main', 'browser', 'module', 'main'],
            browser: true
        }),
        commonjs(),
        json(),
        postcss({
            plugins: [require('autoprefixer'), require('tailwindcss')],
            // 把 css 插入到 style 中
            inject: true,
            // 把 css 放到和js同一目录
            // extract: true
            // Minimize CSS, boolean or options for cssnano.
            minimize: !isDev,
            // Enable sourceMap.
            sourceMap: isDev,
            // This plugin will process files ending with these extensions and the extensions supported by custom loaders.
            extensions: ['.sass', '.less', '.scss', '.css']
        }),
        babel({
            exclude: 'node_modules/**',
            babelHelpers: 'runtime',
            // babel 默认不支持 ts 需要手动添加
            extensions: [...DEFAULT_EXTENSIONS, '.ts', '.tsx', '.vue']
        }),
        // 如果不是开发环境，开启压缩
        !isDev && terser({ toplevel: true })
    ]
}

config.plugins.push(nodeResolve())

export default function buildFunctions({
  mode,
  watch,
  root,
  fnsInputPath,
  fnsOutputPath,
  fileName,
  options = {},
}) {
  return new Promise(async (resolve) => {
    let fnsPaths = []
    const returnPayload = {
      getPropsHandlerNames: () =>
        fnsPaths
          .filter((filepath) => filepath.includes('/props/'))
          .map((filepath) =>
            filepath.split('/props/')[1].replace(/\.[jt]sx?$/, '')
          ),
    }

    const pathsToResolve = [
      fnsInputPath + '/*',
      fnsInputPath + '/api/**/*',
      fnsInputPath + '/props/**/*',
    ]

    const generateVirtualEntryCode = async () => {
      fnsPaths = await resolveFunctionsFiles(pathsToResolve)

      const { staticRoutes, dynamicRoutes } = pathsToRoutes(fnsPaths, {
        fnsInputPath,
      })

      return (
        fnsPaths
          .map((route, index) => `import dep${index} from '${route}'`)
          .join('\n') +
        '\n' +
        `export default {
       staticMap: new Map([${staticRoutes
         .map((route) => `["${route}", dep${route.index}]`)
         .join(',\n')}]),
       dynamicMap: new Map([${dynamicRoutes
         .map((route) => {
           const { keys, pattern } = routeToRegexp(route)

           return `[${pattern}, { keys: [${keys
             .map((key) => `"${key}"`)
             .join(',')}], value: dep${route.index} }]`
         })
         .join(',\n')}])
     }`
      )
    }

    const virtualEntryName = 'virtual:vitedge-functions'
    const format = options.build?.rollupOptions?.output?.format || 'es'
    const outDir = options.build?.outDir || fnsOutputPath
    const mainFields = options.resolve?.mainFields || ['module', 'main']
    const extensions = options.resolve?.mainFields || [
      '.mjs',
      '.js',
      '.json',
      '.node',
      '.ts',
    ]

    const fnsResult = await build({
      ...options,
      root,
      configFile: false,
      envFile: false,
      publicDir: false,
      resolve: {
        ...options.resolve,
        mainFields,
        extensions,
      },
      plugins: [
        {
          name: virtualEntryName,
          resolveId: (id) =>
            // Vite 2.7 is prefixing the virtual entry name with the project path
            id.includes(virtualEntryName) ? virtualEntryName : undefined,
          load: (id) =>
            id === virtualEntryName ? generateVirtualEntryCode() : undefined,
          async config() {
            return {
              define: await defineEnvVariables({ mode }),
            }
          },
          buildStart() {
            if (watch) {
              // Add new files to the watcher
              fg.sync(pathsToResolve, { dot: true }).forEach((filename) => {
                this.addWatchFile(filename)
              })
            }
          },
          generateBundle(options, bundle) {
            // Vite lib-build adds the format to the extension.
            // This renames the output file.
            const [[key, value]] = Object.entries(bundle)
            delete bundle[key]
            value.fileName = fileName
            bundle[fileName] = value
            options.entryFileNames = fileName
          },
        },
        // This shouldn't be required but Vite
        // cannot import TS files with .js extension
        // without adding this extra plugin.
        nodeResolve({
          mainFields,
          extensions,
          dedupe: options.resolve?.dedupe || [],
          exportConditions: options.resolve?.conditions || [],
        }),
        ...(options.plugins || []),
      ],
      build: {
        outDir,
        minify: false,
        target: 'es2019',
        emptyOutDir: false,
        ...options.build,
        rollupOptions: {
          ...options.build?.rollupOptions,
          input: virtualEntryName,
        },
        lib: {
          entry: virtualEntryName,
          formats: [format],
          fileName,
        },
        watch: watch
          ? { include: pathsToResolve, exclude: 'node_modules/**' }
          : undefined,
      },
    })

    const isWatching = Object.prototype.hasOwnProperty.call(
      fnsResult,
      '_maxListeners'
    )

    if (isWatching) {
      fnsResult.on('event', async ({ result }) => {
        if (result) {
          result.close()
          resolve(returnPayload)
        }
      })
    } else {
      resolve(returnPayload)
    }
  })
}