首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

我们是否可以重用一个环境构建文件到另一个构建中,而无需在angular中执行npm run build

是的,可以重用一个环境构建文件到另一个构建中,而无需在Angular中执行npm run build。这可以通过Angular CLI的配置文件angular.json来实现。

在angular.json文件中,可以定义多个项目,并为每个项目指定其自己的配置。在每个项目的配置中,可以指定构建时需要使用的构建选项和环境。通过将共享的环境构建文件配置为一个单独的项目,其他项目可以通过引用该项目来重用环境构建文件。

具体步骤如下:

  1. 在angular.json文件中,创建一个新的项目配置,用于存储环境构建文件。
代码语言:txt
复制
{
  ...
  "projects": {
    "shared-environment": {
      "root": "",
      "sourceRoot": "",
      "projectType": "application",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "tsConfig": "",
            "progress": true,
            "main": "",
            "polyfills": "",
            "assets": [],
            "styles": [],
            "scripts": [],
            "es5BrowserSupport": true
          },
          "configurations": {
            "production": {
              "fileReplacements": [
                {
                  "replace": "",
                  "with": ""
                }
              ],
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "namedChunks": false,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true,
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "",
                  "maximumError": ""
                }
              ]
            }
          }
        },
        "serve": {
          ...
        }
      }
    },
    ...
  },
  ...
}

在上述示例中,"shared-environment"是一个新的项目配置,用于存储环境构建文件的相关配置信息。

  1. 在需要重用环境构建文件的项目配置中,通过"fileReplacements"字段指定要替换的文件。
代码语言:txt
复制
{
  ...
  "projects": {
    "my-project": {
      "root": "",
      "sourceRoot": "",
      "projectType": "application",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            ...
          },
          "configurations": {
            "production": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "projects/shared-environment/src/environments/environment.prod.ts"
                }
              ],
              ...
            }
          }
        },
        "serve": {
          ...
        }
      }
    },
    ...
  },
  ...
}

在上述示例中,"my-project"是需要重用环境构建文件的项目配置。通过"fileReplacements"字段,将"src/environments/environment.ts"文件替换为"projects/shared-environment/src/environments/environment.prod.ts"文件。

通过以上配置,"my-project"项目在构建时将使用"shared-environment"项目中定义的环境构建文件,无需执行npm run build。

这种方式可以有效地实现环境构建文件的重用,提高开发效率,并确保不同项目间的环境配置一致。

如果您使用腾讯云进行云计算,推荐使用腾讯云的Serverless Framework进行项目构建和部署。Serverless Framework提供了简单易用的工具和平台,可帮助您快速构建、部署和扩展基于云计算的应用程序。您可以访问以下链接了解更多腾讯云Serverless Framework的信息:

腾讯云Serverless Framework官网:https://cloud.tencent.com/product/scf

腾讯云云函数 SCF 产品介绍:https://cloud.tencent.com/product/scf

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

  • 使用 Docker Multi-stage 高效构建镜像

    可以使用一个脚本文件 dockerbuild.sh,先构建开发阶段的版本,然后拷贝出必要的层/文件,再构建出产品版本的镜像。 那么我们就需要3个文件了。.../WebApp/ RUN cd WebApp && npm install @angular/cli && npm install && npm run build FROM node:10 AS server-build...Multi-stage 优势 builder pattern 我们需要维护 2 个Dockerfile 文件一个 shell 脚本文件 multi-stage 一个 Dockerfile...builder pattern 我们需要自己把必须的文件捣腾本地文件夹, multi-stage 可以使用 --from 把文件一个阶段复制另一个阶段。...builder pattern ,必须创建一个中间镜像,结果就是构建出2个image, multi-stage 不需要。

    1.6K10

    使用 Github Actions 自动部署 Angular 应用到 Github Pages

    因为每次执行 ng deploy 命令时都需要在命令添加 base-href 参数,所以这里我们可以 package.json 文件添加一个 script,这样当后面我们需要发布时,直接执行自定义的...环境我们可以使用 github 官方的 action 来简化我们的脚本,因为我们每次构建时都需要执行 npm install 命令来还原项目所需的各种依赖,因此这里执行 install 命令之前...,我们可以通过官方的 actions/cache@v2 来缓存项目依赖,以加快构建的过程 这里还原依赖时,使用到了 npm ci 不是 npm install,从命令的名称就可以看出,ci 主要是各种自动化环境构建时使用...文件的 deploy 命令了,这里需要注意,因为 action 执行的命令更多的都是只读权限,所以为了能够有足够的权限执行发布操作,我们需要在执行环境变量附加上 GITHUB_TOKEN 变量...当我们添加了环境变量之后,还需要对我们的实际执行npm 命令脚本进行一个调整 本地执行发布命令时,本地的 git 配置已经包含了相关的账户信息,当在 workflow 执行时因为处于一个匿名的状态

    1.4K10

    Jenkins 结合 Angular 展示构建版本

    Angular 结合 Git Commit 版本处理 文末我们留下了疑问️ 下面将问题具体化 结合 jenkins 构建我们能够获取到构建的信息,比如构建号,回填到页面否?...具体的实现思路如下: 构建的过程执行 Jenkinsfile 生成 build_info.json 文件 在对项目打包的时候,针对不同的环境考虑是否获取 build_info.json 文件的内容...steps {                sh 'npm run clean'                sh 'npm run build'           }      ...}   } } 我们添加过一个 stage 来完成我们build_info.json 文件的写入。...= buildInfo.build_number || config.version } 完成上面的文件之后,你就可以发布相关的环境,顺利的话,页面上你可以看到相关的版本号了。

    43330

    Angular 工具篇之Storybook

    Storybook 是一个 UI 组件的开发环境。它允许你能够浏览一个组件库,查看每个组件的不同状态,以及支持交互式的方式开发和测试组件。 Storybook 在你的应用程序之外运行。...这允许你能够独立的开发 UI 组件,你可以提高组件的可重用性、可测试性和开发速度。你可以快速构建,而无需担心应用程序特定的依赖项。...然后该目录下分别创建两个文件:config.js 和 addons.js 文件。...好的,这时一切看起来很顺利,但当我们运行 npm run storybook 命令时,控制台会抛出异常信息。...core@7.0.0 --save-dev 成功安装完以上依赖后,我们再次运行 npm run storybook 命令,这时打开 http://localhost:6006/ 地址,你将会看到以下内容

    2K20

    8分钟为你详解React、Angular、Vue三大框架

    例如,Facebook有动态图表,可以渲染标签,Netflix和PayPal使用通用加载,服务器和客户端上渲染相同的HTML。...定制Hooks 构建自己的Hooks,也就是所谓的自定义Hooks,可以让你把组件逻辑提取到可重用的函数。自定义钩子是一个名称以 "use "开头的JavaScript函数,它可以调用其他的钩子。...常用命令 创建工程: npx create-react-app my-app 开发环境运行: npm start 生产环境打包: npm run build ?...9、常用命令 安装工具 npm install -g @vue/cli 创建工程: vue create my-project 开发环境运行: npm run serve 生产环境打包: npm run...build 【小结】 本文对于当前顶级的前端技术做了较为详尽的探索,前端技术一个大的方向是单页应用,我们选取针对本业务的前端技术时需要结合如下几个方面来考虑: 成员当前技能,这是一个很现实的问题,

    22.1K20

    Angular 工具篇之npx及angular-cli-ghpages

    今天本文的两个主角是 npx 及 angular-cli-ghpages,npx 是 npm 5.2 引入了的新的工具, 用于帮助我们执行 npm 二进制任务和加速我们的工作流。...一次性执行外部库 对于不经常使用的全局二进制文件,你可以不在本机上进行全局安装,而是需要时使用 npx 即时下载并执行二进制文件。...这是构建工具(如 Create React App 或 webpack CLI)所使用的方式。它确保你始终使用最新版本的生成器或构建工具,而无需每次使用它时进行升级。...另一个示例是在当前目录下启动一个 http-server 服务器: $ npx http-server 运行不同版本的包 假设我们需要使用最新版的 uglify-js: $ npx uglify-js...或者使用以下命令: $ ng build --prod --base-href "/REPOSITORY_NAME/" 项目构建完成后,就可以通过以下的命令自动地把本地项目发布 Github Pages

    1.9K20

    使用Angular CLI生成 Angular 5项目

    另一个选项是使用--dry-run参数: ng new my-app --dry-run 使用这个参数呢, 不会真的生成项目, 而是会打印出来如果创建该项目的话哪些文件将会生成. ?...不过以后还是需要手动执行npm install的. 使用--help参数可以查看帮助: ng new --help ? 下面我要生成一个项目, 先不执行npm install: ?...scripts下面是一些预定义的项目命令: start 是运行项目的意思, 执行npm start即可, 或者直接执行ng serve也可以. npm build / ng build执行构建......查看angular-cli.json, 可以文件的下方看到采用的是scss样式文件: ? 这样, 以后生成的component的默认样式文件就是scss了....首先通过--dry-run参数, 确保会生成哪些文件是否正确, 确认后把--dry-run参数去掉, 生成文件. 下面我生成一个项目, 并且执行npm install: ?

    1.9K30

    如何在 Windows 上安装 AngularAngular CLI、Node.js 和构建工具指南

    Angular CLI, Node.js, and Build Tools,作者为Ahmed Bouchefra 本教程我们将学习如何在 Windows 安装 Angular CLI 并使用它来创建...注意:您可以免费下载我们的《Angular 8 书:使用 Angular 8 构建您的第一个 Web 应用程序》。...build (b): 将 Angular 应用程序编译给定输出路径上名为 dist/ 的输出目录。必须从工作空间目录执行。 config: 检索或设置 Angular 配置值。...当然,您可以为您的项目选择任何有效的名称。由于我们将创建一个全栈应用程序,因此我使用 frontend 作为前端应用程序的名称。 如前所述,CLI 会询问您是否要添加 Angular 路由?...结论 本教程我们了解了如何在 Windows 计算机上安装 Angular CLI,并使用它从头开始初始化一个新的 Angular 项目。

    46000

    【Vue】Vue与ASP.NET Core WebAPI的集成

    2.集成的原理 2.1 启动前端 通过中间件调用node进程,执行如下命令: npm start -- --port {dynamic_port} dynamic_port是在运行过程随机一个端口。...-Build 我们调试之前,一定是构建项目,但是我们的项目现在是一个包含前端Vue和后端Webapi的前后端分离项目。...但是这里介绍一点新鲜的(至少对博主而言),前端Vue项目通过npm run build构建成一系列的静态文件。这些静态文件就是我们的SPA。说白了,就是一个静态网页。...最重要一步来了,发布时让构建好的静态文件随着WebAPI一起发布,不需要,单独执行npm run build然后手动拷贝,这里还是用到了MSbuild,所以同样需要修改csproj文件,增加publish...npm install还原(我注释了) 执行npm run build进行构建 拷贝构建好的dist文件夹内容发布文件 这时再通过Visual Studio后者命令发布时,就会同步构建前端项目,发布后端

    2.4K31

    Angular CLI 使用教程指南参考

    Angular CLI 使用教程指南参考 Angular CLI 现在虽然可以正常使用但仍然处于测试阶段. Angular CLI 依赖 Node 4 和 NPM 3 或更高版本....> [options] 创建一个新的 Angular 项目,默认在当前所在目录下 参数 描述 --dry-run -d 只输出要创建的文件执行的操作,实际上并没有创建项目 --verbose -v...init [options] 在当前所在目录下初始化一个新的 Angular 项目 参数 描述 --dry-run -d 只输出要创建的文件执行的操作,实际上并没有创建项目...参数 描述 --global 设置全局配置值,不是本地配置值。 这也使ng set可以项目之外工作。 ng build 构建工件将存储/dist目录。...ng build可以指定构建目标(--target = production或--target = development)和要与该构建一起使用的环境文件(--environment = dev或--environment

    3K50

    使用CircleCI2.0持续集成Angular项目

    对于Angular项目,之前处理一个ticket的流程我们的做法: 启动项目本地开发 npm start 开发完成,跑代码语法及规范检测 npm run lint 跑单元测试 npm run test...每月构建时长1000分钟以内免费 (基本够用) 提供的构建环境配置2核CPU / 4G内存,(算是很慷慨了) 据测试如果是1核1G的主机下执行npm run build很容易报内存不足 有专门的配置文件来定义...这个镜像包含了node10, Chrome(为了跑单元测试), Python2.7(为了安装AWS CLI), AWS CLI(为了上传打包后的静态资源) 大致流程就是开头说的,只不过为了统一环境我们的项目是...还有配置文件里限制了分支,只有往daily-build分支上合并代码才会触发CircleCI的构建。...其中npm run ci-test和npm run ci-build 需要在项目的package.json定义好,加入了一些参数,比如不输出过程,和加入环境参数配置 "start": "npm

    82940

    如何快速开发 CLI,Oclif 了解一下

    src 目录我们可以发现一个名为 commands 子目录,该目录包含所有与文件名相关的所有命令。...比如,我们一个名为 hello 的命令,那么 commands 目录中将会包含一个 hello.js 或 hello.ts 文件。这里我们无需进行任何设置,即可运行该命令。 $ ....: description 属性,用于描述命令的用途; flags 属性,用于描述传递给命令的标识; 一个 run 方法用于执行当前命令的主要功能; 创建完 add 命令后,我们可以命令行运行它:...3.8 构建与发布 发布 NPM 前,你需要确保拥有一个 NPM 账户,然后使用以下命令进行登录: $ npm login 接着项目的根目录运行以下 NPM 脚本: $ npm run prepack...项目构建成功后,就可以发布 NPM 了,具体操作如下: $ npm version (major|minor|patch) # bumps version, updates README, adds

    3.5K10

    【ASP.NET Core 基础知识】--前端开发--集成前端框架

    ng build --prod 将构建后的文件部署 ASP.NET Core 项目: 将 Angular 应用构建后生成的 dist 文件的内容复制 ASP.NET Core 项目的 wwwroot...npm run build构建后的文件部署 ASP.NET Core 项目: 将 React 应用构建后生成的 build 文件的内容复制 ASP.NET Core 项目的 wwwroot...npm run build构建后的文件部署 ASP.NET Core 项目: 将 Vue 应用构建后生成的 dist 文件的内容复制 ASP.NET Core 项目的 wwwroot 文件...通过配置自动化构建流程,可以每次代码提交或者定期执行构建任务来自动打包前端资源,并将它们部署生产环境。...一般情况下,命令可能类似于: npm run build 将静态资源部署服务器: 将生成的生产版本静态资源文件(通常位于项目的 build、dist 或 public 目录)上传到服务器上。

    17800

    基于BuildKit优化Dockerfile的构建

    Docker通过读取Dockerfile的指令自动构建镜像,Dockerfile是一个文本文件,其中依次包含构建给定镜像所需的所有命令。...相同的硬件上,构建花费的时间比以前少了约12秒。这意味着构建几乎无需费力即可节约10%左右的时间。 现在让我们看看是否可以采取一些额外的步骤来进一步改善。...在上面的例子我们指定alpine为默认的镜像,但我们可以docker build命令,通过–build-arg flavor=参数指定镜像。...通过多阶段构建我们可以让较小的依赖阶段准备就绪,以供主阶段使用它们。 BuildKit甚至带来了另一个性能上的好处。...~/.npm pip ~/.cache/pip Bash Copy 我们可以将此Dockerfile与上面介绍的一致的环境从源代码构建中介绍的Dockerfile进行比较。

    1.8K20
    领券