Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

@tarojs/webpack5-runner 提供获取 webpack 静态配置文件入口 #12527

Closed
yoyo837 opened this issue Sep 20, 2022 · 16 comments · Fixed by #15144
Closed

@tarojs/webpack5-runner 提供获取 webpack 静态配置文件入口 #12527

yoyo837 opened this issue Sep 20, 2022 · 16 comments · Fixed by #15144
Labels
enhancement New feature or request

Comments

@yoyo837
Copy link
Contributor

yoyo837 commented Sep 20, 2022

这个特性解决了什么问题?

@tarojs/webpack-runner@tarojs/webpack-runner/dist/config/prod.conf.js 文件, @tarojs/webpack5-runner 没有类似的文件只有一个build (appPath: string, rawConfig: BuildConfig)方法, 其中BuildConfig很难模拟, 可以用在任何需要统一webpack配置的地方, 如 eslint-import-resolver-webpack + eslint-plugin-module-resolver的配置

这个 API 长什么样?

@tarojs/webpack5-runner/dist/config/prod.conf.js

@taro-bot2 taro-bot2 bot added the enhancement New feature or request label Sep 20, 2022
@yoyo837 yoyo837 changed the title @tarojs/webpack5-runner 提供获取webpack静态配置文件入口 @tarojs/webpack5-runner 提供获取 webpack 静态配置文件入口 Sep 20, 2022
@Chen-jj
Copy link
Contributor

Chen-jj commented Sep 21, 2022

没太理解,要获取最终的 webpack 配置还是要干嘛?

@yoyo837
Copy link
Contributor Author

yoyo837 commented Sep 21, 2022

没太理解,要获取最终的 webpack 配置还是要干嘛?

是的, 获取最终的配置

@Chen-jj
Copy link
Contributor

Chen-jj commented Sep 21, 2022

应该使用 WebpackChain 的 chain.toConfig 就可以

@yoyo837
Copy link
Contributor Author

yoyo837 commented Sep 21, 2022

应该使用 WebpackChain 的 chain.toConfig 就可以

请教一下, 一个普通的外部node.js文件, chain如何获得以调用toConfig呢?

@AdvancedCat
Copy link
Member

config/index.js 文件中的 mini.webpackChain 可以拿到 chain 对象. @yoyo837

@yoyo837
Copy link
Contributor Author

yoyo837 commented Sep 26, 2022

不是的, 我需要一个外部node.js文件获得, 不是Taro的配置文件内的回调获得.

说直白一点,就是自己的空白node.js文件, 需要获得.

@yoyo837
Copy link
Contributor Author

yoyo837 commented Sep 26, 2022

image

用在这里

@AdvancedCat
Copy link
Member

AdvancedCat commented Sep 26, 2022

你的意思是外部插件通过 require('...') 形式获取?prod.config.js抛出的是函数,如果外部插件支持 async 的话,可以在这个config上配置 async 函数,函数内部去await mini.webpackChain 呢?
奇技淫巧,仅供参考

@yoyo837
Copy link
Contributor Author

yoyo837 commented Sep 26, 2022

你这个方案得把taro dev给run起来吧?

@AdvancedCat
Copy link
Member

你这个方案得把taro dev给run起来吧?

懂你意思了,你要在「非编译时」获取config参数。这样嘞?

const { MiniBaseConfig } = require('@tarojs/webpack5-runner/dist/webpack/MiniBaseConfig.js')
const chain = new MiniBaseConfig(...).chain

@yoyo837
Copy link
Contributor Author

yoyo837 commented Sep 26, 2022

new MiniBaseConfig 参数特别是第二个config, 去哪里搞呢

@AdvancedCat
Copy link
Member

AdvancedCat commented Sep 26, 2022

new MiniBaseConfig 参数特别是第二个config, 去哪里搞呢

第二个 config 应该就是 config/index.js mini 的内容

@yoyo837
Copy link
Contributor Author

yoyo837 commented Sep 26, 2022

那我就试试自己require 配置文件的index.js , 取到mini配置传进去看看.

@yoyo837
Copy link
Contributor Author

yoyo837 commented Sep 26, 2022

调试了一下, 运行时的时候, new对象传进来的配置比较齐全, 和项目里/config/indes.js的可见配置还是有一定差异, 无法完全对等, 比如内部有处理一些默认值等等.

{
  entry: {
    app: [
      '/Users/tanghui/git/ydmap/web/ydmap-frontend-portal/src/app.config'
    ]
  },
  alias: {},
  copy: { patterns: [], options: {} },
  sourceRoot: 'src',
  outputRoot: 'dist/h5',
  platform: 'h5',
  framework: 'vue3',
  compiler: {
    type: 'webpack5',
    prebundle: { include: [Array], esbuild: [Object] }
  },
  cache: { enable: true },
  logger: undefined,
  baseLevel: undefined,
  csso: undefined,
  sass: { data: '@import "/src/assets/themes/variables.scss";' },
  uglify: undefined,
  plugins: [
    '@tarojs/plugin-html',
    '@dcasia/mini-program-tailwind-webpack-plugin/dist/taro'
  ],
  projectName: 'Portal跨端',
  env: {
    NODE_ENV: '"development"',
    TARO_ENV: '"h5"',
    FRAMEWORK: '"vue3"',
    TARO_VERSION: '"3.5.6"'
  },
  defineConstants: {},
  designWidth: 375,
  deviceRatio: { '375': 2, '640': 1.17, '750': 1, '828': 0.905 },
  projectConfigName: undefined,
  jsMinimizer: undefined,
  cssMinimizer: undefined,
  terser: undefined,
  esbuild: undefined,
  router: { mode: 'browser' },
  publicPath: '/',
  staticDirectory: 'static',
  esnextModules: [ 'nutui-taro' ],
  postcss: {
    autoprefixer: { enable: true, config: {} },
    cssModules: { enable: true, config: [Object] }
  },
  webpackChain: [Function: webpackChain],
  htmlPluginOption: {
    templateParameters: {
      isProd: false,
      taroEnv: 'h5',
      timestamp: 1664195993823,
      UA_PARSER_JS_VERSION: '1.0.2'
    }
  },
  devServer: {
    client: { overlay: [Object] },
    port: 9087,
    allowedHosts: 'all',
    proxy: { '/srv*/api/**': [Object] }
  },
  frameworkExts: [ '.vue' ],
  isWatch: true,
  mode: 'development',
  blended: false,
  isBuildNativeComp: false,
  modifyWebpackChain: [Function: modifyWebpackChain],
  modifyBuildAssets: [Function: modifyBuildAssets],
  modifyMiniConfigs: [Function: modifyMiniConfigs],
  modifyComponentConfig: [Function: modifyComponentConfig],
  onCompilerMake: [Function: onCompilerMake],
  onParseCreateElement: [Function: onParseCreateElement],
  onBuildFinish: [Function: onBuildFinish],
  entryFileName: 'app',
  sassLoaderOption: { additionalData: '@import "/src/assets/themes/variables.scss";' }
}

@ZakaryCode
Copy link
Contributor

ZakaryCode commented Jan 22, 2024

懂你意思了,你要在「非编译时」获取config参数。

或许 #15144 可以满足这一需求,创建端平台插件实例并 start 方法或者直接调用 runner 传入指定参数,通过 withoutBuild: true 跳过编译,同时可以使用 modifyWebpackChain 获取最终配置。这应该在各端都可以通用

@yoyo837
Copy link
Contributor Author

yoyo837 commented Jan 22, 2024

懂你意思了,你要在「非编译时」获取config参数。

或许 #15144 可以满足这一需求,创建端平台插件实例并 start 方法或者直接调用 runner 传入指定参数,通过 withoutBuild: true 跳过编译,同时可以使用 modifyWebpackChain 获取最终配置。这应该在各端都可以通用

谢谢,确实是这个意思,我表述得不太好。我找时间看看上述。

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request
Projects
None yet
Development

Successfully merging a pull request may close this issue.

4 participants