nocode compiler webpack plugin for Vue and React projects
这是一个用于处理代码转换的 webpack loader,支持处理 Vue、JSX、TSX 等文件类型。
``bash`
npm install @meituan-nocode/webpack-plugin-nocode-compiler --save-dev
使用辅助函数可以自动将 loader 添加到 webpack 配置中,无需手动配置 loader 规则。
`js
// webpack.config.js
const { componentCompiler } = require('@meituan-nocode/webpack-plugin-nocode-compiler');
// 获取 webpack 配置
const webpackConfig = {
// ... 你的 webpack 配置
};
// 添加 Nocode Compiler Loader
module.exports = componentCompiler(webpackConfig, {
enableLogging: true, // 可选,是否启用日志
});
`
在 Vue CLI 项目的 vue.config.js 文件中使用时,有三种配置方式,现在都可以使用统一的 componentCompiler 函数:
#### 2.1 函数形式的 configureWebpack
`js
// vue.config.js
const { componentCompiler } = require('@meituan-nocode/webpack-plugin-nocode-compiler');
module.exports = {
configureWebpack: config => {
// 直接修改 config 对象,不要返回修改后的配置
componentCompiler(config, {
enableLogging: true,
});
},
};
`
#### 2.2 对象形式的 configureWebpack
如果你的 configureWebpack 是一个对象而不是函数,可以这样使用:
`js
// vue.config.js
const { componentCompiler } = require('@meituan-nocode/webpack-plugin-nocode-compiler');
const path = require('path');
// 创建一个基础配置
const baseConfig = {
// ... 你的配置
};
// 应用 componentCompiler
const configWithLoader = componentCompiler(baseConfig, {
enableLogging: true,
});
module.exports = {
// 将处理后的配置作为 configureWebpack 的值
configureWebpack: configWithLoader,
};
`
#### 2.3 使用 chainWebpack(推荐)
现在你可以在 chainWebpack 中使用相同的 componentCompiler 函数:
`js
// vue.config.js
const { componentCompiler } = require('@meituan-nocode/webpack-plugin-nocode-compiler');
module.exports = {
configureWebpack: {
resolve: {
fallback: {
querystring: require.resolve('querystring-es3'),
},
},
},
chainWebpack: config => {
// 使用相同的 componentCompiler 函数
componentCompiler(config, { enableLogging: true });
// 你可以继续添加其他链式配置...
},
};
`
> 注意:在 Vue CLI 项目中,使用 configureWebpack 时,如果返回了修改后的配置对象,可能会导致 entry 重复的问题。正确的做法是直接修改传入的 config 对象,而不返回它。
如果您不想使用辅助函数,也可以直接在 webpack 配置中添加 loader:
`js
// webpack.config.js
const path = require('path');
module.exports = {
// ...其他配置
module: {
rules: [
{
test: /\.(vue|jsx?|tsx?|m[jt]s)$/,
include: [path.resolve(process.cwd(), 'src')],
exclude: /node_modules/,
use: '@meituan-nocode/webpack-plugin-nocode-compiler',
},
],
},
};
`
`js
// webpack.config.js
const path = require('path');
module.exports = {
// ...其他配置
module: {
rules: [
{
test: /\.(vue|jsx?|tsx?|m[jt]s)$/,
include: [path.resolve(process.cwd(), 'src')],
exclude: /node_modules/,
use: {
loader: '@meituan-nocode/webpack-plugin-nocode-compiler',
options: {
enableLogging: true, // 可选,是否启用日志
},
},
},
],
},
};
`
如果在 Vue CLI 项目中使用 configureWebpack 并返回配置对象,可能会遇到以下错误:
``
Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
- configuration.entry['app'] should not contain the item './src/main.js' twice
这是因为 Vue CLI 会将返回的配置与内部配置合并,导致 entry 路径被重复添加。解决方法是直接修改传入的 config 对象,而不返回它:
`js
// 错误写法
configureWebpack: config => {
const configAfter = componentCompiler(config, { enableLogging: true });
return configAfter; // 这会导致 entry 重复
};
// 正确写法
configureWebpack: config => {
componentCompiler(config, { enableLogging: true });
// 不返回 config
};
``
| 选项 | 类型 | 默认值 | 描述 |
| ------------- | ------- | ------ | ------------------------------------------------------ |
| enableLogging | boolean | false | 是否启用日志输出,开启后会输出详细的处理过程和调试信息 |
- Vue 单文件组件 (.vue)
- JavaScript (.js, .mjs)
- TypeScript (.ts, .mts)
- JSX (.jsx)
- TSX (.tsx)
- HTML 模板 (带有 vue 查询参数的 .html)