QuikieApps

反应 Webpack入门:这里定义的一切!

反应 Webpack入门的介绍: 

反应 JS是用于创建用户界面的说明性UI库。它是一个开放源代码的javascript库,用于为Web应用程序和本机应用程序构建高端响应UI,可以使用设备中存在的Web浏览器应用程序进行访问。 反应 JS允许构建处理其自身位置的汇总组件。它提供了更简单的编程模型和出色的性能。 反应 JS用于在React Native Extension的帮助下创建Web应用程序甚至移动应用程序。全部由Facebook管理。从创建组件到导入和导出,所有这些共同使之有效。 反应 JS以其性能而闻名,借助虚拟DOM概念,组件的渲染变得更快。现在,由于底层的XML或HTML语法,ES6的强大功能和虚拟DOM技术使React成为目前最好的前端库之一。

 

什么是Webpack?

简单来说, 网络包 是一个静态模块捆绑器。这只是意味着,当您基于任何具有webpack支持的框架或库来构建或处理应用程序时, 网络包 显示它的魔力和 在内部构建一个依赖图,该图映射项目需要的每个模块并生成一个或多个捆绑. 如果在任何时候一个文件依赖另一个文件,Webpack会将任何文件视为依赖文件。  这使webpack可以获取非代码资产,例如Web字体或图像,并提供它们作为应用程序的依赖项。 

当webpack开始捆绑您的应用程序时,它是从命令行或其配置文件中定义的模块列表开始的。从这些入口点,webpack递归地构建一个依赖关系图,其中包括应用程序需要的所有模块。依存关系图准备好后,Webpack会撒上魔力,并将所有这些模块捆绑成许多较小的捆绑包 通常,只有一个-由浏览器加载。

网络包 中的条目是模块,通过这些指向其他模块 进口。 在评估完每个模块之后,webpack会写 输出 其中包括一个引导脚本。该脚本是一个小的运行时,可在浏览器中执行结果。

入口点指示webpack应该使用哪个模块开始构建其内部 依赖图。以下是一个webpack配置文件的示例。

网络包 .config.js

module.exports = {

  条目:“ ./ path / to / my / entry / file.js”

};

 

深入研究React Webpack入门

有几种方法可以开始处理您的第一个React应用程序。一种方法是编写代码,以在React应用程序上显式添加捆绑程序和编译器支持。另一种方法是简单地在CLI(命令行界面)上运行单行命令,这将自动为您完成所有操作,为您的应用程序构建样板。 

请注意,假设您已经拥有 节点( 节点 JS)和 npm (节点程序包管理器)安装在您的系统上 像素 (打包运行器工具),这是创建基于React的应用程序所必需的。 

反应 Webpack允许添加HMR(热模块替换),从而缩短了开发过程中的反馈循环。每当您在应用程序的源代码中进行更改时,所做的更改将应用​​于在浏览器中运行的应用程序中 无需重新加载整个页面. 它允许应用程序保持其状态而无需强制刷新。

 

创建支持Webpack的React Starter捆绑包或套件的几种方法是:

 

创建反应应用

这是一个工具链,用于 创建一个新的 单页 应用程序使用 创建反应应用 命令。它创建了一个学习反应的环境,并且不需要显式添加 捆扎机 喜欢 网络包 ,编译器 喜欢 巴别塔 包装经理 喜欢 npm 。

它设置了您的开发环境,以便您可以使用最新的JavaScript功能。这样可以为开发人员提供良好的体验,并优化您的应用程序以进行生产。 

节点>= 8.10 和 npm >= 5.6在系统中是必需的。

要创建项目,请运行:

像素 创建反应应用 我的应用

cd 我的应用

npm 开始

 

反应 JS工具链通常包括:

设置React Webpack入门的步骤: 

巴别核心 是在代码中进行任何转换所需的主要babel软件包。

在项目的根目录或根目录中,创建一个名为 .babelrc, 这是一个babel配置文件,并将这些行添加到文件中,并告诉我们要使用 环保 (将ES6 +代码转换为传统JS) 反应 (将JSX代码转换为传统JS) 预设。

{

  “预设”:[“ @ 巴别塔 / 环保 ”,“ @ 巴别塔 / preset-react”]

}

npm 安装 -保存 -dev 网络包 @4.19.1 网络包 [email protected] 网络包 [email protected] [email protected] [email protected] 巴别塔@8.0.2

Webpack使用加载程序来处理用于构建捆绑包的不同类型的文件。 

要利用这些加载程序,我们需要配置webpack并准备开发服务器。 创造 网络包 .config.js 文件放在项目根目录并添加这些行。

var path = require('path');

const 网络包 = require(“ 网络包 ”);

module.exports = {

  条目:“ ./ src / 指数 .js ”,

  output: {

    路径:path.resolve(__ dirname,'dist'),

    文件名:“ bundle.js”

  },

  module: {

    rules: [

      {

        test: /\.(js|jsx)$/,

        排除:/ node_modules /,

        use: {

          装载机:“ 巴别塔”

        }

      } 

    ]

  }

};

上面的代码在webpack中设置了规则,适用于 .js 要么 .js x 文件。

  1. 从“反应”导入React;
  2. 从“ 反应 -dom”导入ReactDOM;
  3. 从“ ./App.js”导入应用;
  4. 反应 DOM.render(<App />,document.getElementById(“ 根 ”));

现在,创建另一个名为 App.js src 文件夹并将这些行添加到文件中。 

  1. 从“反应”导入React;
  2. 函数App(){
  3.     return <h1>Hello 反应 ,Webpack & 巴别塔 !</h1>
  4. }
  5. 导出默认应用程序;

添加行: 从“ 反应热加载器”导入{hot};

更新行: 导出默认的hot(module)(App);

许多工程师和开发人员致力于使React的应用程序更易于安装,配置和编辑。这些是入门工具包,带有样板(可以在新的上下文或应用程序中重用而无需对原始文本进行重大更改的任何书面文本)。

这些入门工具包很少是:

 

该网址包含以下内容的列表: 反应webpack启动器 套件,并且可以根据自己的喜好进行选择。 

//webpack.js.org/starter-kits/

 

            

 

 

 

Exit mobile version