前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Webpack入门

Webpack入门

作者头像
张子阳
发布2018-09-30 10:05:17
1.8K0
发布2018-09-30 10:05:17
举报
文章被收录于专栏:分布式系统和大数据处理

Webpack入门

2016-5-10 作者: 张子阳 分类: Web前端

简介

Webpack是一个前端构建工具,本文将简要介绍它最常用的功能,并创建一个基于webpack的前端开发环境。

范例项目

包含两个页面,列表页list.html和详情页detail.html,仅作为Webpack打包的演示,不实际开发功能。范例项目是一个多页面应用,而非SPA(单页应用)。我们将使用Webpack来进行前端资源的编译和打包。

技术选型

  1. 样式:采用SCSS,因此需要将SCSS转换为CSS。
  2. 脚本:采用ES6编写,因此需要使用Babel将ES6代码,转换为ES5(目前浏览器所支持的)。
  3. UI框架:React,因此需要将jsx转换为js代码。

基本使用方法

建立目录结构

在D盘建一个空文件夹,webpack-tutorial,作为示例项目的根目录。结构如下:

  • dist
    • js
    • css
  • src
    • jsx
    • js
    • css

dist目录存放由webpack打包后生成的代码,也是.html页面所引用的文件;src则是我们编写的源码,通常是无法直接在页面上引用的,因为当下的浏览器还无法完全支持很多新的技术,例如ES6。

安装Webpack

假设你已经安装了NodeJS和npm包管理工具,并且版本在3.8.0以上。

打开命令行工具,定位到D:\webpack-tutorial。首先运行npm init,生成package.json文件。

接着安装webpack,打开命令行工具,执行:

代码语言:txt
复制
npm install webpack --save-dev

如果是全局安装webpack,那么在本文后面安装完extract-text-webpack-plugin插件后,运行时会报错,所以建议本地安装。

运行webpack

现在就可以运行webpack了,只不过,现在的Webpack并没有任何的其他的能力,例如将scss转为css。

在src/js 文件夹下,建一个common.js,公共脚本将写在这个文件里,里面现在只写一行代码:

代码语言:txt
复制
alert("I'm common");

确认命令行的当前目录为:D:\webpack-tutorial,然后执行:

代码语言:txt
复制
webpack src/js/common.js dist/js/common.js

这样将会在 dist/js文件夹下生成一个common.js文件。接着在根目录下创建一个 list.html,然后通过script标签引用dist/js/common.js。用浏览器打开list.html可以看到页面弹出提示框。

打开 dist/js/common.js,可以看到它和 src/js/common.js是不同的,添加了webpack的模块机制,后面引入多个模块时,会看到更详细地看到它的作用:

代码语言:txt
复制
/******/ (function(modules) { // webpackBootstrap
/******/    // The module cache
/******/    var installedModules = {};

/******/    // The require function
/******/    function __webpack_require__(moduleId) {

/******/        // Check if module is in cache
/******/        if(installedModules[moduleId])
/******/            return installedModules[moduleId].exports;

/******/        // Create a new module (and put it into the cache)
/******/        var module = installedModules[moduleId] = {
/******/            exports: {},
/******/            id: moduleId,
/******/            loaded: false
/******/        };

/******/        // Execute the module function
/******/        modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);

/******/        // Flag the module as loaded
/******/        module.loaded = true;

/******/        // Return the exports of the module
/******/        return module.exports;
/******/    }


/******/    // expose the modules object (__webpack_modules__)
/******/    __webpack_require__.m = modules;

/******/    // expose the module cache
/******/    __webpack_require__.c = installedModules;

/******/    // __webpack_public_path__
/******/    __webpack_require__.p = "";

/******/    // Load entry module and return exports
/******/    return __webpack_require__(0);
/******/ })
/************************************************************************/
/******/ ([
/* 0 */
/***/ function(module, exports) {
    
    alert("I'm common");

/***/ }
/******/ ]);

可以看到以上代码是很不紧凑的,甚至还包含了很多注释。在生产环境下,我们希望代码更加紧凑一些,此时可以使用下面的命令:

代码语言:txt
复制
webpack src/js/common.js dist/js/common.min.js -p

这样会生成紧凑的js代码:

代码语言:txt
复制
!function(r){function o(e){if(t[e])return t[e].exports;var n=t[e]={exports:{},id:e,loaded:!1};return r[e].call(n.exports,n,n.exports,o),n.loaded=!0,n.exports}var t={};return o.m=r,o.c=t,o.p="",o(0)}([function(r,o){alert("I'm common")}]);

使用CommonJS构建模块

修改common.js:

代码语言:txt
复制
var text = "I'm common";
module.exports = text;

然后在src/js下添加另一个文件list.js:

代码语言:txt
复制
var text = require("./common");

alert(text);
alert("I'm list");

可以看到,list.js依赖于common.js,接着,再次运行webpack:

代码语言:txt
复制
webpack src/js/list.js dist/js/list.js

修改list.html,现在引用dist/js/list.js(之前是common.js)。打开list.html,会看到它依次弹出了两次文本框。现在打开list.js,会看到它包含了src/common.js和src/list.js中的代码。

添加多个模块

假设这个项目需要用到jQuery,打开命令行工具,安装它:

代码语言:txt
复制
npm install jquery -save

这会在webpack-tutorial目录下生成一个node_modules文件夹,通过npm安装的的模块都会在这个文件夹下。修改src/js/list.js,让它引用jquery:

代码语言:txt
复制
var $ = require("jquery");
// ... 中间无变化
$("body").css("background-color", "#aaaaaa");

使用code splitting

现在创建一个新的detail.html,并在src/js/下创建detail.js:

代码语言:txt
复制
var $ = require("jquery");
var text = require("./common");

alert(text);
alert("I'm detail");

$("body").css("background-color", "#aaaaff");

它和list几乎是一摸一样的,仅仅是为了示范多文件的情况。打开命令行,运行webpack:

代码语言:txt
复制
webpack src/js/detail.js dist/js/detail.js

打开dist/js文件夹,会发现detail.js和list.js文件体积是一样大的,这是因为它们都包含了common.js和jquery.js。

jquery.js的体积是比较大的,因此,很有必要将jquery.js打包成一个单独的文件,而list.js和detail.js分开打包。在webpack中,可以使用称作code splitting(代码分拆)的技术来实现。

这里jquery本来就是一个打包好的文件,不需要打包,只需要引用。但实际项目中,可能会有很多个第三方的类库或者框架,可以将它们打包到一起。

改写list.js:

代码语言:txt
复制
var text = require("./common");

alert(text);
alert("I'm list");

require.ensure([], function(){
    var $ = require("jquery");
    $("body").css("background-color", "#aaaaaa");   
}, "jquery");

执行:

代码语言:txt
复制
webpack src/js/list.js dist/js/list.js --display-modules  --display-chunks

注意到后面多了 --display-modules 和 --display-chunks选项,用以显示文件所包含的模块。

执行完成后,看到:

代码语言:txt
复制
Hash: 087ab301df8508cffa3e
Version: webpack 1.13.0
Time: 295ms
    Asset     Size  Chunks             Chunk Names
  list.js  3.95 kB       0  [emitted]  main
1.list.js   267 kB       1  [emitted]  jquery
chunk    {0} list.js (main) 308 bytes [rendered]
    [0] ./src/js/list.js 248 bytes {0} [built]
    [1] ./src/js/common.js 60 bytes {0} [built]
chunk    {1} 1.list.js (jquery) 259 kB {0} [rendered]
    [2] ./~/jquery/dist/jquery.js 259 kB {1} [built]

可以看到生成了两个文件:list.js和1.list.js。其中list.js中包含了 list.js 和 common.js两个文件,而1.list.js包含了jquery.js。

注意上面的一列:Chunk Names。1.list.js的chunk名称是jquery,这个是由上面require.ensure方法的第三个参数定义的。后面在使用配置文件时会用到这个名称。

接着使用浏览器打开list.html,用调试器查看页面元素,会发现为head部分新插入的script标签,引用了1.list.js。

使用Chrome查看页面

这里,我们发现了第一个问题:引用的路径不对

暂且先不管这个问题,来看一下code splitting的第二个作用:按需加载。修改一下list.js:

代码语言:txt
复制
var text = require("./common");

alert(text);
alert("I'm list");

if(document.getElementById("container")){
    require.ensure([], function(){
        var $ = require("jquery");
        $("body").css("background-color", "#aaaaaa");   
    }, "jquery");
}

只有当页面存在container元素的时候,才去加载jquery。因为list.html是一个空页面,不包含id为container的元素。因此,并不会加载jquery。再次执行webpack,打开list.html会发现页面没有再插入script标签。

从list.js中删除掉if判断语句,再按上面相同的方式改写一下detail.js,然后对detail.js执行webpack。那么很快就会发现第二个问题:1.detail.js中也包含了jquery。这样的话,多个文件的共同部分只是拆分,而没有合并。

当使用config配置文件时,则很好解决上面的问题。除此以外,使用配置文件也在运行webpack时也省去了很多的输入。

使用config配置文件

现在,在项目根目录下创建一个配置文件:webpack.config.js。

代码语言:txt
复制
var src = "./src/js/",
    dist = "./dist/js/";

module.exports = {
    entry: {
        list: src + "list",
        detail: src + "detail"
    },
    output:{
        filename:"[name].js",
        chunkFilename:"[name].chunk[id].js",
        path: dist,
        publicPath: dist
    }
};

这个配置文件是一个纯粹的js文件,所以你可以写一些应用逻辑进去。注意到这几个配置项:

  • entry:输入,当为对象时,key为chunk的名称,值为模块路径。
  • output.filename:输出的js文件名。
  • output.chunkFilename:输出的chunk文件名。
  • path:输出的文件路径。
  • publicPath:页面应用的路径(即上一小节报错的路径)。

配置完成后,执行一下命令行:

代码语言:txt
复制

D:\webpack-tutorial>webpack --display-modules --display-chunks
Hash: 2ba5904a636a8ac64101
Version: webpack 1.13.0
Time: 856ms
           Asset     Size  Chunks             Chunk Names
       detail.js  3.96 kB       0  [emitted]  detail
jquery.chunk1.js   267 kB       1  [emitted]  jquery
         list.js  4.01 kB       2  [emitted]  list
chunk    {0} detail.js (detail) 267 bytes [rendered]
    [0] ./src/js/detail.js 204 bytes {0} [built]
    [1] ./src/js/common.js 63 bytes {0} {2} [built]
chunk    {1} jquery.chunk1.js (jquery) 259 kB {0} {2} [rendered]
    [2] ./~/jquery/dist/jquery.js 259 kB {1} [built]
chunk    {2} list.js (list) 311 bytes [rendered]
    [0] ./src/js/list.js 248 bytes {2} [built]
    [1] ./src/js/common.js 63 bytes {0} {2} [built]

可以看到生成了三个文件:jquery.chunk1.js,包含了jquery.js(配置文件中的[name]即为require.ensure方法中的第三个参数);detail.js和list.js。下面再次打开list.html,发现上一节的两个问题都已经解决了。

使用CommonsChunkPlugin

在上面的例子中,我们使用Code Splitting将公共的jquery.js生成到了 jquery.chunk1.js 中,并可以进行按需加载(动态将script标签插入到页面head中)。

如果想将公共的js打包到同一个js文件中,然后手动添加到页面中,则可以使用CommonsChunkPlugin插件。

修改webpack.config.js配置文件:

代码语言:txt
复制
var webpack = require("webpack");

module.exports = {
    plugins:[
       new webpack.optimize.CommonsChunkPlugin({
            name:      'lib',
            minChunks: 2
        })
    ]
};

为了让文章紧凑一点,配置文件中相同的地方没有再列出来了,下同。

重新执行webpack:

代码语言:txt
复制
D:\webpack-tutorial>webpack --display-modules --display-chunks
Hash: 881d51e5a0d94bc015bc
Version: webpack 1.13.0
Time: 858ms
    Asset       Size  Chunks             Chunk Names
detail.js  265 bytes       0  [emitted]  detail
  list.js  262 bytes       1  [emitted]  list
   lib.js     271 kB       2  [emitted]  lib
chunk    {0} detail.js (detail) 155 bytes {2} [rendered]
    [0] ./src/js/detail.js 155 bytes {0} [built]
chunk    {1} list.js (list) 152 bytes {2} [rendered]
    [0] ./src/js/list.js 152 bytes {1} [built]
chunk    {2} lib.js (lib) 259 kB [rendered]
    [1] ./src/js/common.js 63 bytes {2} [built]
    [2] ./~/jquery/dist/jquery.js 259 kB {2} [built]

可以看到生成了三个文件 detail.js、list.js和 lib.js,其中lib.js包含了 common.js 和 jquery.js。

此时,要记得修改list.html和detail.html,将lib.js手动引入进来:

代码语言:txt
复制
<script src="dist/js/lib.js"></script>
<script src="dist/js/list.js"></script>

如果我们希望只将jquery和其他第三方库打包到lib中(不包含common.js),则可以这样配置webpack.config.js:

代码语言:txt
复制
var webpack = require("webpack");

module.exports = {
    entry: {
        lib: ["jquery"],        // 其他的库,可以包含多个
        list: src + "list",
        detail: src + "detail"
    },    
    plugins:[
       new webpack.optimize.CommonsChunkPlugin({
            name:      'lib',
            minChunks: Infinity
        })
    ]
};

运行结果如下:

代码语言:txt
复制
D:\webpack-tutorial>webpack --display-modules --display-chunks
Hash: c0a9b7c514a8a8ad5585
Version: webpack 1.13.0
Time: 839ms
    Asset       Size  Chunks             Chunk Names
detail.js  385 bytes       0  [emitted]  detail
   lib.js     271 kB       1  [emitted]  lib
  list.js  382 bytes       2  [emitted]  list
chunk    {0} detail.js (detail) 218 bytes {1} [rendered]
    [0] ./src/js/detail.js 155 bytes {0} [built]
    [1] ./src/js/common.js 63 bytes {0} {2} [built]
chunk    {1} lib.js (lib) 259 kB [rendered]
    [0] multi lib 28 bytes {1} [built]
    [2] ./~/jquery/dist/jquery.js 259 kB {1} [built]
chunk    {2} list.js (list) 215 bytes {1} [rendered]
    [0] ./src/js/list.js 152 bytes {2} [built]
    [1] ./src/js/common.js 63 bytes {0} {2} [built]

可以看到list.js和detail.js中都包含了common.js,而lib.js中包含了第三方的jquery.js。这样做的好处是:可以把第三方库整体打包做CDN,而不会受到可能频繁变动的common.js的影响。

使用 Webpack Loader处理多种资源

Webpack Loader有点类似于一个管道,用来增强Webpack的能力。如果我们需要解析scss代码,就需要scss-loader,经过这个管道以后scss就转换为了css;如果需要解析ES6代码,就需要babel-loader,经过这个管道以后ES6就转换为了ES5。等等,以此类推。

引入样式

我们先看第一个loader:css loader。它用来将样式表引入到当前文件中。

先进行一下准备工作:

  • 在src/css/文件夹下创建一个list.css文件,里面就一行代码:body{background: #aaa;}
  • 因为现在已经不再演示处理多文件了,所以在webpack.config.js中删去detail: src + "detail" 这行。
  • 删掉src/js/list.js中的所有代码

安装css-loader:

代码语言:txt
复制
npm install css-loader --save-dev

修改list.js

代码语言:txt
复制
require("css!../css/list.css");

运行一遍webpack,可以看到dist/js/list.js将list.css包含了进去:

代码语言:txt
复制
D:\webpack-tutorial>webpack --display-modules --display-chunks
Hash: a669b2f88986bbfd0da0
Version: webpack 1.13.0
Time: 585ms
  Asset     Size  Chunks             Chunk Names
list.js  3.29 kB       0  [emitted]  list
chunk    {0} list.js (list) 1.73 kB [rendered]
    [0] ./src/js/list.js 35 bytes {0} [built]
    [1] ./~/css-loader!./src/css/list.css 186 bytes {0} [built]
    [2] ./~/css-loader/lib/css-base.js 1.51 kB {0} [built]

这时候,如果打开list.html,会发现什么变化都没有,这是因为css-loader的作用仅仅是将css文件链入到脚本中,却不对它做任何处理。

此时,如果希望将样式的内容渲染到页面上,则需要安装另一个loader:style-loader。

显然,设计原则是:一个loader只干一件事。

代码语言:txt
复制
npm install style-loader --save-dev

接着修改list.js

代码语言:txt
复制
require("style!css!../css/list.css");

这是一个链式语法,意思是:先用css-loader加载list.css文件,然后再用style-loader渲染它。

再次运行webpack,然后打开list.html,发现页面已经加载了list.css样式,页面背景变成了灰色(#aaa)。

用Chrome浏览器查看页面源码,会发现样式是嵌入到list.js中去的,而不是通过link标签引入到页面中。这样就会带来一个问题:页面闪烁。当你频繁刷新页面时,会发现在脚本加载完成前,页面是默认的白色,等到脚本加载完成后才变成灰色。

对一个Web组件而言,它应当包含HTML结构,CSS样式表,JS脚本控制行为,还可能包含字体和图片。这些统称为资源assets,它们统统可以通过Webpack打包成一个js文件。如果是开发一个Web组件,这么做通常没有太大问题,因为Web组件只是页面的一小块区域。但如果是全局的样式,资源加载前带来的闪烁问题则会影响用户体验。 将图片和HTML打包到js中,也需要相应的loader,这里就不在演示了。

如此一来,我们希望将css文件生成到dist/css文件夹中,再通过传统的方式用link标签进行引用,而不是生成到list.js脚本中。现在,重新编辑一下webpack.config.js:

代码语言:txt
复制
var src = "./src/js/",
    dist = "./dist/js/";

module.exports = {
    entry: {
        list: src + "list"
    },
    output:{
        filename:"[name].js",
        chunkFilename:"[name].chunk[id].js",
        path: dist,
        publicPath: dist
    },
    module:{
        loaders:[
           { 
               test: /\.css$/,
               loaders:["style", "css"] 
           }
        ]
    }
};

这里添加了loaders的配置。然后修改list.js:

代码语言:txt
复制
require("../css/list.css");

然后运行一遍webpack,会发现没有任何改变,list.css依然是打包进了list.js中。上面修改配置,不过是将loader的使用规则放到了配置中,并没有其他变化。

为了将css打包到dist/css文件夹,需要另一个webpack插件:extract-text-webpack-plugin。打开命令行,进行安装:

代码语言:txt
复制
npm install extract-text-webpack-plugin --save-dev

然后修改webpack.config.js配置文件:

代码语言:txt
复制
var src = "./src/js/",
    dist = "./dist/js/";
    
var ExtractTextPlugin = require("extract-text-webpack-plugin");

module.exports = {
    entry: {
        list: src + "list"
    },
    output:{
        filename:"[name].js",
        chunkFilename:"[name].chunk[id].js",
        path: dist,
        publicPath: dist
    },
    module:{
        loaders:[
           { 
               test: /\.css$/,
               loader:ExtractTextPlugin.extract("style", "css")
           }
        ]
    },
    plugins:[
       new ExtractTextPlugin("../css/[name].css", {
           allChunks:true
       })
    ]
};

再次运行webpack,可以看到在dist文件夹下生成了list.css文件。注意plugins中new ExtractTextPlugin的参数,第一个参数指定了生成的css文件的位置,这个位置是相对于配置中的output.path(./dist/js/),而不是相当于项目的根目录(D:\webpack-tutorial)。

修改list.html,在head中引用刚才生成的css文件,可以看到一切正常:

代码语言:txt
复制
<link href="dist/css/list.css" rel="stylesheet" />

上面做了这么多的工作,相当于将list.css从src/css文件夹拷贝一份到dist/css文件夹,好像并没有太大意义。正常情况下,是在src/css下编写scss文件,然后生成到dist/css中。可能你已经猜到了,我们又需要安装一个loader了:sass-loader。

代码语言:txt
复制
npm install sass-loader node-sass --save-dev

接着再次修改配置文件:

代码语言:txt
复制
    module:{
        loaders:[
           { 
               test: /\.css$/,
               loader:ExtractTextPlugin.extract("style", "css")
           },
           { 
               test: /\.scss$/,
               loader:ExtractTextPlugin.extract("style", "css!sass")
           }
        ]
    }

在上面多加了一个sass-loader用于处理.scss文件。接着删除src/css/list.css,然后创建list.scss文件:

代码语言:txt
复制
$bg-main:#aaa;

body{ background:$bg-main; }

修改list.js require("../css/list.scss");。然后再次运行webpack,成功后可以看到dist/css下生成的css。如此一来,就可以在项目中编写scss文件了。

使用Babel处理ES6

2015年推出了ES6(ES2015),可惜现在浏览器的支持很有限。但好在有Babel这样的神器,可以将ES6转为现在浏览器所支持的ES5。有了上面的经验,后面就容易很多了,因为都是大同小异的。

先安装babel-loader和babel-preset-2015:

代码语言:txt
复制
npm install babel-loader babel-core babel-preset-es2015 --save-dev

可能很多人会问:babel-preset-es2015是做什么的?简单说一下,就是babel本身也是啥都做不了,要借助preset来完成,目的同样是为了架构更简洁吧。

修改webpack.config.js,加入babel-loader:

代码语言:txt
复制
    module:{
        loaders:[
           {
               test: /\.jsx?$/,
               exclude: /node_modules/,
               loader: 'babel',
               query: {
                    presets: ['es2015']
               }
            }
        ]
    }

现在,修改list.js,编写一段ES6代码:

代码语言:txt
复制
var arr = [1,2,3].map(x=> x+1 );
alert(arr);

运行webpack,然后打开dist/js/list.js,会看到lambda表达式 x=>x+1 已经转为了匿名函数:

代码语言:txt
复制
function(module, exports) {
    "use strict";

    var arr = [1, 2, 3].map(function (x) {
      return x + 1;
    });
    alert(arr);
}

引入React

因为我们选用React作为前端UI框架,那么就需要让Webapck支持它。不同的是:React是Babel的一个预设,而非Webpack的一个Loader。现在先安装它:

代码语言:txt
复制
npm install react react-dom babel-preset-react --save-dev

这里react和react-dom是React的核心模块;babel-preset-react则是用于babel的preset。

接着修改webpack.config.js:

代码语言:txt
复制
{
    test: /\.jsx?$/,
    loader: 'babel-loader',
    exclude:/node_modules/,
    query:{
            presets: ['es2015', "react"]
    }
}

在src/jsx文件夹下创建一个hello.jsx,用于测试React:

代码语言:txt
复制
var React = require("react");
var ReactDOM = require("react-dom");

var HelloMessage = React.createClass({
  render: function() {
    return <div>Hello {this.props.name}</div>;
  }
});

ReactDOM.render(<HelloMessage name="张子阳" />, document.getElementById("container"));

修改src/js/list.js:

代码语言:txt
复制
import Hello from "../jsx/hello.jsx";

这里不可以require,只能import。

修改list.html,在body中加入一行代码:<div id="container"></div>。打开list.html,会看到 “Hello 张子阳”的字样。

生成的dist/js/list.js会变得非常庞大,因为包含了很多react的代码,可以使用前面提到的功能生成多个文件,这里就不再演示了。

总结

这篇文章中只能算作流程攻略,而非详情解说。先掌握最常用的功能,高级功能需要的时候再研究就好了。现在简短地回顾一下:我们先配置了webpack的环境,通过使用命令行来运行webpack,然后学习了代码分拆(Code splitting)、使用配置文件和提取公共代码。最后,通过安装和配置loader完成了对sass、ES6以及React的支持。下面就开始欢快地编码吧!

感谢阅读,希望这篇文章能给你带来帮助!

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2016-5-10,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • Webpack入门
    • 简介
      • 范例项目
        • 技术选型
          • 基本使用方法
            • 建立目录结构
            • 安装Webpack
            • 运行webpack
            • 使用CommonJS构建模块
            • 添加多个模块
            • 使用code splitting
            • 使用config配置文件
            • 使用CommonsChunkPlugin
          • 使用 Webpack Loader处理多种资源
            • 引入样式
            • 使用Babel处理ES6
            • 引入React
          • 总结
          相关产品与服务
          命令行工具
          腾讯云命令行工具 TCCLI 是管理腾讯云资源的统一工具。使用腾讯云命令行工具,您可以快速调用腾讯云 API 来管理您的腾讯云资源。此外,您还可以基于腾讯云的命令行工具来做自动化和脚本处理,以更多样的方式进行组合和重用。
          领券
          问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档