在我的webpack npm主项目的子项目中使用config和node_modules - 腾讯云开发者社区

，以及在 .git/config 文件和 .git/modules 文件夹下也会多出相关内容。...2.3.2 子项目本地修改并提交新版本本地子项目有版本更新，此时在主项目中使用 git status 查看仓库状态时，会显示子项目有新的提交，可以在主项目中使用 git add/commit 命令提交修改...2.3.3 子项目远程更新，主项目已更新 commit id 此时在主项目中执行 git pull 后会自动同步主项目中的子项目 commit id 依赖，由于主项目已知子项目更新，只需要执行 submodule...$ git submodule update 2.3.4 子项目远程更新，主项目未更新 commit id 在多人协作开发时，主项目与子项目的开发往往是异步进行的，子项目升级后子项目远程仓库更新并告知主项目可以更新对子项目的版本依赖... 然后，在主项目下删除对应的子模块工程目录，接着删除 .gitmodules 和 .git/config 配置文件下的相关条目，再删除 .git/module/ 下的子模块目录

5.7K18 0

现代前端工程化-基于 Monorepo 的 lerna 模块(从原理到实战)

翻译：Lerna是一个用来优化托管在 git\npm 上的多 package 代码库的工作流的一个管理工具,可以让你在主项目下管理多个子项目，从而解决了多个包互相依赖，且发布时需要手动维护多个包的问题。...image.png lerna 软链实现(如何动态创建软链) 未使用 lerna 之前，想要调试一个本地的 npm 模块包，需要使用 npm link 来进行调试，但是在 lerna 中可以直接进行模块的引入和调试...和 webpack.config.js 文件： { "compilerOptions": { "target": "es5", "module": "commonjs",...= config; 创建完两个项目后， ui-web 和 example-web 中同时出现 node_modules,二者会有很多重复部分，并且会占用大量的硬盘空间 lerna bootstrap...lerna 提供了可以将子项目的依赖包提升到最顶层的方式，我们可以执行 lerna clean先删除每个子项目的 node_modules , 然后执行命令 lerna bootstrop --hoist

4K5 0

您找到你想要的搜索结果了吗？

是的

没有找到

每日优鲜供应链前端团队微前端改造

，只需处理一个主项目，十几个子项目不再需要处理；子项目原本需要加载的公共部分（如vue、vuex、vue-router、ivew/element、私有npm包等），全部由主项目调度，配合webpack...：电源(加载器)→电源适配器(包装器)→️电器底座(主项目)→️电器(子项目)️ 主项目和子项目都需要用包装器包装，只不过主项目的配置写法有不同加载器和包装器需要根据自己的需求做一些二次开发总的来说是这样一个流程...apps.config.js的生成如图3的绿色部分所示: 在资源服务器上起一个监听服务(我使用的是nodejs脚本+pm2守护)，原有子项目的部署方式完全不变(前后端完全分离，资源带hash)，当监听服务检测到文件改动时...// 每个子项目的webpack.config.js output: { path: xxx, publicPath: xxx, filename: '[name]....经过一番调研，同样利用systemjs解决了这个问题 // 每个子项目自己的webpack.config.js，根据使用情况设置externals externals: { 'axios'

1.3K2 0

作为面试官，为什么我推荐微前端作为前端面试的亮点？

在使用 qiankun 时，你如何处理多个子项目的调试问题？在使用qiankun处理多个子项目的调试问题时，通常的方式是将每个子项目作为一个独立的应用进行开发和调试。...在项目间共享组件时，可以考虑以下几种方式：父子项目间的组件共享：主项目加载时，将组件挂载到全局对象（如window）上，在子项目中直接注册使用该组件。...子项目间的组件共享（弱依赖）：通过主项目提供的全局变量，子项目挂载到全局对象上。子项目中的共享组件可以使用异步组件来实现，在加载组件前先检查全局对象中是否存在，存在则复用，否则加载组件。...在使用webpack构建的子项目中，要实现复用公共依赖，需要配置webpack的externals，将公共依赖指定为外部依赖，不打包进子项目的代码中。...方案二是通过主项目将依赖通过props传递给子项目，子项目在独立运行时使用传递过来的依赖，避免与主项目的全局变量冲突。

1.1K1 0

记一次webpack构建提速

怀着内心的崇敬，以及小心谨慎的态度，我决定对它优化一波。解决思路一方面，H项目的webpack配置是一个典型的多入口类型，每次打包出来的代码包含了十几个子项目模块。...但是一般的开发需求往往集中在一个子项目中去开发，所以只需要打包某个具体的子项目就满足了。...那我们改进的思路是把项目的多个打包入口搞成动态的即可，动态打包的最终理想效果是，npm start + 项目名，webpack知道打包某个项目或所有项目。...已经可以动态获取想要打包的项目名称了，然后通过entry.config.js动态导出打包入口配置，修改webpack配置便达到了目的。...除此之外，还可以使用cache-loader，这也是我在项目中采用的方案。

8241 0

每日优鲜供应链前端团队微前端改造

，只需处理一个主项目，十几个子项目不再需要处理；子项目原本需要加载的公共部分（如 vue、vuex、vue-router、ivew/element、私有 npm 包等），全部由主项目调度，配合 webpack...所以是这么个概念：电源(加载器)→ 电源适配器(包装器)→️ 电器底座(主项目)→️ 电器(子项目)️ 主项目和子项目都需要用包装器包装，只不过主项目的配置写法有不同加载器和包装器需要根据自己的需求做一些二次开发...apps.config.js 的生成如图 3 的绿色部分所示: 在资源服务器上起一个监听服务(我使用的是 nodejs 脚本+pm2 守护)，原有子项目的部署方式完全不变(前后端完全分离，资源带 hash...// 每个子项目的webpack.config.js output: { path: xxx, publicPath: xxx, filename: '[name]....经过一番调研，同样利用 systemjs 解决了这个问题 // 每个子项目自己的webpack.config.js，根据使用情况设置externals externals: { 'axios

1.6K2 0

使用mono-repo实现跨项目组件共享

本文会分享一个我在实际工作中遇到的案例，从最开始的需求分析到项目搭建，以及最后落地的架构的整个过程。最终实现的效果是使用mono-repo实现了跨项目的组件共享。...git submodule的基本使用方法网上有很多，我这里就不啰嗦了，主要说几个缺点，也是我们没采用他的原因：本质上submodule和主项目是两个不同的git repo，所以你需要为每个项目创建一套脚手架...submodule其实只是主项目保存了一个对子项目的依赖链接，说明了当前版本的主项目依赖哪个版本的子项目，你需要小心的使用git submodule update来管理这种依赖关系。...按照mono-repo的惯例，这几个子项目的名称最好命名为@主项目名称>/子项目名称>，这样当别人引用你的时候，你的这几个项目都可以在node_modules的同一个目录下面，目录名字就是@主项目名称...yarn run start或者npm run start，具体是yarn还是npm，取决于你在lerna.json里面的这个设置： "npmClient": "yarn" 如果我只想在其中一个子项目运行命令

3.1K4 1

金九银十，带你复盘大厂常问的项目难点

9143 0

webpack配置完全指南

动态打包某一子项目在构建多系统应用或组件库时，我们每次打包可能仅仅需要打包某一模块，此时，可以通过命令行的形式请求打印某一模块，例如： npm run build --project components...在我们使用 webpack 进行打包的时候，webpack 提供了 hash 的概念，所以我们可以使用 hash 来打包。...webpack4 最引人注目的主要是：减小编译时间打包时间减小了超过 60% 零配置我们可以在没有任何配置文件的情况下将 webpack 用于各种项目 webpack4 支持零配置使用，这里的零配置就是指...我们可以在项目的初期使用零配置，在后期业务复杂的时候再配置。 5....// 默认 1000ms 询问一次 poll: 1000 } } 2. externals 排除打包时的依赖项，不纳入打包范围内，例如你项目中使用了 jquery ，并且你在 html

3.1K2 0

monorepo--依赖

11月份，整个底层稳定性显著提高，宿主项目中调试等已不是主要问题；我们的新成员 fusion-utils 诞生，由于 fusion-charts 和 fusion-components 同时需要依赖 fusion-utils...文件，在宿主项目中使用 yarn install 统一安装即可。...通过将子模块提升到其父项目的node_modules：monorepo/node_modules来在子项目/程序包之间共享模块。...至此，可以从项目的根 node_modules 访问所有模块，但我们通常会在其本地项目中构建每个程序包，这些模块在其自己的 node_modules 下可能不可见。...项目副本 peerDependencies peerDependencies的目的是提示宿主环境去安装满足插件peerDependencies所指定依赖的包，然后在插件import或者require

2.7K3 1

webpack配置完全指南_2023-03-01

3.4K1 0

使用 TypeScript 改造构建工具及测试用例

第二个前后端的项目目前也在重构中，关于前端基于webpack的TypeScript套路之前也有提到过：TypeScript在react项目中的实践。...首先全部流程走完以后，我直接在命令行中输入TS_NODE_PROJECT=XXX.json NODE_ENV=dev webpack --config ....-，提示我说import语法不能被识别，这个很显然就是没有应用我们在ts_NODE_PROJECT中指定的config文件。刚开始并不知道问题出在哪，因为这个在命令行中直接执行并没有任何问题。...检查以后发现，果然是的，在命令行执行时使用的是全局的ts-node，但是在npm scripts中使用的是本地的ts-node。...在命令行环境执行时还以为是会自动寻找父文件夹node_modules下边的依赖，其实是使用的全局包。乖乖的在client-src文件夹下也安装了ts-node就解决了这个问题。全局依赖害人。。

1.5K4 0

浅析 Git 子模块

1.1 - 现状和问题以前端项目为例，通常我们用 npm dependencies 来集成第三方库，或者将自己维护的多个项目中通用的组件抽取出来。...如果是一个庞大的第三方库，即使你只想使用其中的一个小模块，也得把它整个的下载集成如果第三方库有了更新，需要更新其版本，并验证项目中对其的依赖配置如果想看看源码，需要手动去 node_modules...仓库作为另一个 Git 仓库的子目录；它能让你将另一个仓库克隆到自己的项目中，同时还保持提交的独立简单的说，子模块的解决方案更像是上面两种的融合，类似于一种特区模式：代码既存在于主项目的子文件夹中...，可以灵活的为我所用；在 Git 层面又是独立提交管理的，和主项目的 commit 时间线保持了完全的独立性。...submodule update 更简单一些的做法是在 clone 时加上参数： git clone --recursive MAIN_PROJECT_GIT 2.3 - 拉取上游变更在项目中使用子模块的最简单模式

1.4K1 0

从零开始学VUE之Webpack(参数配置化)

起步中的目录结构及其文件和内容,从新命名一个文件夹,并在其中新建webpack.config.js ?...应为index.html,main.js,test.js的内容一样的,我就不粘代码了 webpack.config.js // 需要从node依赖中引入需要添加依赖环境 const path = require...webpack.config.js的位置所以需要引入依赖包,但是这个项目暂时不是使用node管理的所以我们需要使用node初始化管理 npm init cd 到 simpleconfig的位置,然后开始初始化...运行结果和webpack起步一致在开发的时候我们一般期望不要运行过长的命令并且希望命令同一管理,这时我们可以在package.json的scripts对象中进行命令映射,然后我们就可以通过node的npm...可以看到,同样可以打包但是这样映射打包和直接执行webpack还是有一定区别的直接执行webpack会默认使用全局的webpack,而通过npm run bulid执行会默认先找据局部的webpack

5425 0

前端包管理工具 npm yarn cnpm npx

这样的包就适合全局安装 npm install webpack -g 如vue axios 这样项目中用的包就适合局部安装安装之后会在当前目录下生成一个node_modules文件夹...npm config set registry https://registry.npm.taobao.org 当我们想和原来的npm 区分开时，也不想修改原有npm源时，建议使用cnpm npm.../ 则安装成功 npx工具概述 npx是npm5.2之后自带的一个命令，一般用于它来调用项目中的某个模块问题产生我们以webpack为例: 全局安装的是webpack5 项目安装的是webpack3...如果我在终端执行 webpack --version使用的是哪一个命令呢?...原因非常简单，在当前目录下找不到webpack时，就会去全局找，并且执行命令; 那么我想使用局部的webpack版本，该怎么办呢解决方案方式一:在终端中使用如下命令(在项目根目录下) .

8832 0

Create React App 源码揭秘

创建scripts/build.js文件，主要负责两件事拷贝模板项目的public目录下的所有静态资源到build目录下配置为production环境，使用webpack(config).run()...后面将针对源码中使用到的一些较为巧妙的第三方库和webpack-plugin做讲解。...在文件中搜索plugins字段查看。此文先列举一些我觉得好用的plugins PnpWebpackPlugin。提供一种更加高效的模块查找机制，试图取代node_modules。...create-react-app myProject --use-pnp 在已有项目中开启可使用yarn提供的--pnp yarn --pnp yarn add uuid 与此同时会自动在package.json...{ "installConfig": { "pnp": true } } 由于在开启了 PnP 的项目中不再有 node_modules 目录，所有的依赖引用都必须由 .pnp.js 中的

3.7K2 0

package.json 配置完全解读

main 项目发布时，默认会包括 package.json，license，README 和main 字段里指定的文件，因为 main 字段里指定的是项目的入口文件，在 browser 和 Node 环境中都可以使用...结合上面入口文件配置的知识，再来看看下方 vite 官网推荐的第三方库入口文件的定义，就很容易理解了。 workspaces 项目的工作区配置，用于在本地的根目录下管理多个子项目。...可以自动地在 npm install 时将 workspaces 下面的包，软链到根目录的 node_modules 中，不用手动执行 npm link 操作。...比如设置 port 为 3001： "config": { "port": "3001" } 在执行脚本时，我们可以通过 npm_package_config_port 这个变量访问到 3001。...比如我们安装 A，A 的正常使用依赖 B@2.x 版本，那么 B@2.x 就应该被列在 A 的 peerDependencies 下，表示“如果你使用我，那么你也需要安装 B，并且至少是 2.x 版本”

2.6K2 2

Webpack搭建ES6开发环境（部分摘自网络）

安装node后集成了npm管理器设置默认npm使用淘宝镜像 npm config set registry https://registry.npm.taobao.org 安装cnpm包，安装成功后...-D PS：【依赖安装到开发环境与生产环境的区别】开发环境，即项目的编码阶段需要的依赖，上线后不需要引用，例如：webpack构建工具、babel加载器等，使用 --save-dev 或 -...] – package.json [ NPM包管理配置文件 ] – node_modules [ 项目中的依赖存放目录 ] 在public目录下，创建index.html，该文件为项目的默认首页...该文件为项目的入口文件，在此文件中可以编写ES6代码 [1,2,3,4,5].map(item=> console.log(item)) 在项目的根目录下创建webpack.config.js配置文件，...-D 在webpack.config.js文件中配置本地服务相关信息 module.exports = { // ...

2643 0

关于Webpack前端工程化构建，你必须要掌握这些核心知识点

在加载、分析和打包的三个过程中，可以针对性的做一些解决方案，达到按需加载的目的，比如拆分公共代码（code split）等。...在搭建一个前端项目之前，通常会在项目的根目录下生成一个名为package.json的文件作为NPM包的描述文件，使用该文件来定义项目信息、配置包依赖关系。...全局模式是指将下载的依赖和安装包保存到全局路径下的方式，在Node.js中使用require依赖时，会优先查找自己当前文件中的node_modules目录，如果没有，在循环遍历上层的node_modules..." } 配置好bin字段后，在项目根目录输入 npm link xxx 就可以执行testCmd命令了，使用 npm link 命令，将 npm 模块链接到对应的运行项目中去，方便地对模块进行调试和测试...作为一套React框架教程，对Webpack的使用有了解就可以了，由于Webpack主要是用于项目的构建和打包，甚至有的同学在工作中根本就接触不到Webpack，或者是项目中只配置一次Webpack，后面就不再用了

1.8K6 0

【第9期】webpack入门学习手记（三）

官网给出的示例都是在一个项目中的html页面、package.json和webpack.config.js中进行修改。我为了保留每一小节的代码，并没有按照官网给出的方案处理，而是重新新建的配置文件。...webpack有两大特色：动态打包。在webpack中，每个模块都会声明所引用的依赖，这样就避免了打包没有使用到的模块。另外通过配置，可以避免重复打包相同的引用，提高打包效率。强大的loader。...执行如下命令： npm install --save-dev style-loader css-loader 注意建议使用淘宝 NPM 镜像然后在webpack.config.js中添加使用loader...npm install --save-dev file-loader 在webpack.config.js中添加一段使用loader的配置。...说明webpack处理了添加的图片，并重新命名了。关于更多的图片压缩和优化，以后再继续整理。加载字体加载字体与加载图片和css没有什么区别。我找了一个ttf格式的字体来学习这个过程。

1K2 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

公共模块管理之 Git Submodule 使用总结

现代前端工程化-基于 Monorepo 的 lerna 模块(从原理到实战)

每日优鲜供应链前端团队微前端改造

作为面试官，为什么我推荐微前端作为前端面试的亮点？

记一次webpack构建提速

每日优鲜供应链前端团队微前端改造

使用mono-repo实现跨项目组件共享

金九银十，带你复盘大厂常问的项目难点

webpack配置完全指南

monorepo--依赖

webpack配置完全指南_2023-03-01

使用 TypeScript 改造构建工具及测试用例

浅析 Git 子模块

从零开始学VUE之Webpack(参数配置化)

前端包管理工具 npm yarn cnpm npx

Create React App 源码揭秘

package.json 配置完全解读

Webpack搭建ES6开发环境（部分摘自网络）

关于Webpack前端工程化构建，你必须要掌握这些核心知识点

【第9期】webpack入门学习手记（三）

扫码

相关资讯

热门标签

活动推荐

运营活动

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐