php网站开发技术代码,call_user_func_array() wordpress,工信部 网站备案规定,网站推广优化招聘在实际开发中#xff0c;直接使用TypeScript 编译器的情况不多。 在项目中#xff0c;需要使用构建工具对代码进行打包#xff0c;不可能脱离项目使用TypeScript 编译器单独打包TypeScript 。
那如何将 webpack 和 TypeScript 进行集成#xff1f; 参考文档#xff1a; w…在实际开发中直接使用TypeScript 编译器的情况不多。 在项目中需要使用构建工具对代码进行打包不可能脱离项目使用TypeScript 编译器单独打包TypeScript 。
那如何将 webpack 和 TypeScript 进行集成 参考文档 webpack中文文档 Webpack TypeScript 在根目录下创建package.json文件
npm init -y安装核心依赖
首先确保已经安装了 Node.js 和 npm或 yarn。在项目目录中安装 Webpack 和相关的加载器及插件 webpackWebpack 的核心包。负责实际的模块打包和资源处理工作。webpack-cli是 Webpack 的命令行工具提供命令好界面。ts-loader用于在 Webpack 中处理 TypeScript 文件。typescriptTypeScript 编译器。
使用 npm 安装这些包的命令如下
npm install -D webpack webpack-cli typescript ts-loader配置 Webpack
在项目根目录下创建一个webpack.config.js文件用于配置 Webpack。
基本配置示例
// 引入 Node.js 的内置模块 path
const path require(path);// module.exports用于导出 Webpack 的配置对象。
// webpack中的所有配置信息都写在 module.exports 里。
// 这个配置对象包含了诸如入口文件、输出设置、加载器规则、插件等信息用于告诉 Webpack 如何构建项目。
module.exports {// 指定入口文件entry: ./src/index.ts,// 指定打包文件所在目录output: {// 指定打包文件的目录path: path.resolve(__dirname, dist),// 打包后的文件filename: bundle.js},// 指定 webpack 打包时要使用的模块module: {// 指定要加载的规则rules: [{// 指定规则生效的文件test: /\.ts$/, // 表示匹配所有的后缀名为ts的文件// 要使用的loaderuse: ts-loader,// 要排除的文件夹(只要路径里有node_modules,就不编译)exclude: /node_modules/,}]},resolve: {extensions: [.tsx, .ts, .js],},
}在这个配置中
const path require(path);用于引入 Node.js 的内置模块 path。module.exports用于导出 Webpack 的配置对象。这个配置对象包含了诸如入口文件、输出设置、加载器规则、插件等信息用于告诉 Webpack 如何构建项目。 entry指定了项目的入口文件。output定义了输出的文件名和目录。module.rules配置了对 .ts 文件的处理规则使用 ts-loader进行编译并排除了 node_modules目录下的文件。resolve.extensions使得在导入模块时可以省略文件扩展名。
配置 TypeScript
在项目根目录下创建一个tsconfig.json文件这是 TypeScript 的配置文件。 可以直接创建文件使用命令行工具自动生成
tsc --init配置示例
{compilerOptions: {module: ES2015,target: ES2015,strict: true}
}编写 TypeScript 代码
在项目的src目录下创建 TypeScript 文件例如index.ts并编写你的 TypeScript 代码。
运行 Webpack 构建
直接使用npx执行命令
npx webpack在package.json文件配置一个执行命令后通过npm执行
在package.json文件增加一个配置
scripts: {build: webpack
},配置后就可以运行以下命令来启动 Webpack 构建
npm run build执行命令后生成dist文件夹打包成功。
webpack集成typescript后如何在html中运行
当使用 Webpack 集成 TypeScript 后可以通过以下步骤在 HTML 中运行打包后的代码
安装必要的插件
html-webpack-plugin这是一个非常常用的 Webpack 插件用于自动生成 HTML 文件并将打包后的 JavaScript 文件注入到其中。 使用 npm 安装这个插件
npm install html-webpack-plugin --save-dev配置 Webpack
在webpack.config.js文件中引入并配置html-webpack-plugin
// 引入 Node.js 的内置模块 path
const path require(path);
// 引入html插件
const HtmlWebpackPlugin require(html-webpack-plugin);module.exports {// 配置webpack插件plugins: [new HtmlWebpackPlugin({template: ./src/index.html, // 指定模板 HTML 文件的路径}),],
};在这个配置中创建一个HtmlWebpackPlugin的实例并指定了一个模板 HTML 文件的路径。这个插件会根据模板文件生成一个新的 HTML 文件并将打包后的 JavaScript 文件自动注入到其中。
创建 HTML 模板文件
在项目的src目录下创建一个index.html文件作为模板文件。这个文件包含基本的 HTML 结构。
!DOCTYPE html
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title网页模板/title
/head
body/body
/html打包后的 JavaScript 文件会自动注入到script标签中。
运行 Webpack 构建
运行以下命令来启动 Webpack 构建
npm run buildWebpack 会根据配置进行构建并在dist目录下生成一个新的 HTML 文件其中包含了打包后的 JavaScript 文件的引用。
在浏览器中运行
打开生成的 HTML 文件位于dist目录下浏览器就会加载并执行打包后的 TypeScript 代码。
如何实现项目有变更时自动重新构建项目并自动刷新浏览器
安装必要的插件
webpack-dev-server用于启动一个开发服务器支持热模块替换HMR等功能。 使用 npm 安装这个插件
npm install webpack-dev-server --save-dev相当于在项目里安装了一个内置的Webpack 开发服务器可以让项目直接在服务器中运行。这个服务器是与Webapck关联的当项目有变更时可以自动构建并更新浏览器页面。
配置 Webpack
运行 Webpack
运行以下命令来启动开发服务器
npx webpack serve配置后使用package.json 配置 npm run serve 执行命令就报错了emmm这一步就等我研究研究再来补上吧- 哪位大佬走过路过不要错过求指点啊啊啊啊啊
