• React-PlayMusic-Demo(1)——用npm和webpack搭建环境(初学者入门)


    项目简介: 

      该项目主要是对npm指令和webpack的简单入门,以及对react的基本知识点的灵活运用。接下来将先普及知识点,然后从实验入手,详细记录该项目的操作流程。

    本节实验主要是手动打包,熟悉webpack这个流程。

    相关知识简介: 

    1.webpack

      webpack是一个前端资源加载、打包工具,前端常用资源都可以作为一个模块导出,我们在代码中直接引用即可,最后按照我们的配置把代码打包整合起来。

      webpack的配置信息(最简单的例子): 

    Module.exports = {

                                  entry: ‘./entry.js’,                入口文件(作用是:将入口文件告诉webpack后,webpack从入口文件入手,分析所有的require依赖,把所有的资源整合回来,打成一个包)

                                  output:{                              输出(作用:告诉webpack最后生成的包文件所放的位置,定义path文件夹,定义filename文件名)                               

                                            path:’./dist’,

                                            filename:’bundle.js’

                                  },

                                  module:{

                                            loaders:[

                                            {

                                                      test:/.js[x]?.$/,      正则匹配文件名js或者jsx结尾的

                                                      loader:[‘babel’]         前端js或者jsx资源

                                            },

                                            {

                                                      test:/.css$/,        正则匹配所有以css结尾的

                                                      loaders:”style!css”   前端css资源

                                            }

                                            ]

                                  }

                        }

     2.package.json文件

      代码分析都需要从package.json入手。package.json里面有如下的配置信息:

    • name: 系统的名称
    • version:系统的版本
    • description:系统的说明
    • scripts:代表怎么去运行这个系统 
    • dependencies:系统开发中所需要的代码级别依赖
    • devDependencies:系统运行的时候所需要的依赖

     此外需要注意的是:

        webpack.json.js 里面存放的是一些配置说明

        app文件夹下放主要代码

        dist文件夹是最后产出的文件,其中存放的就是html+css加上静态资源

    具体环境的搭建步骤如下:

      1.创建一个空文件夹名为react-music-player

      2.创建并配置package.json

        2.1创建package.json

          通过在命令行输入 npm-init指令

        2.2基本信息的配置

        • 设置name(项目名称) ,version(默认版本号),description(项目描述)的具体内容
        • 设置entry point(入口文件)为app/index.js
        • 由于不需要添加测试案例,所以直接跳过test command
        • git repository:如果项目在git上,直接输入git的地址,否则跳过 
        • 设置keywords(项目关键词)
        • 设置author:自己的名字
        • 设置license

        2.3 dependencies的安装  

          dependencies的安装,我们通过npm工具,无需手动敲。需要注意的是:

        • npm install react --save,表示安装以后依赖自动写入dependencies中
        • 依赖信息:“react:’”^15.6.1””, 其中^15.6.1表示的是版本信息
        • npm install语句做了哪些事情? npm 此时会去找到 package.json中的所有依赖,然后一一安装到node_modules下面。例如:从git中下载的项目是没有node_modules这个文件夹的,需要我们通过npm install指令去自动生成这个文件夹, 然后将依赖放到这个文件夹下面          

      3.配置webpack

        3.1新建一个名为webpack.config.js的文件(这是webpack中默认的配置文件名)

        3.2配置entry 和output

        3.3新建dist, app文件夹,以及index.js入口文件

        3.4index.js文件内容的填充

          webpack帮我们进行资源的导入,包括用npm安装的一些依赖模块。假设我们需要导入react, var React=Require('react')

    用es6语法进行导入: import React from 'react'.注意,使用npm安装的依赖项不需要写相对路径,直接写名字即可

          我们这边用如下的代码先测试一下:

    import React from 'react'
    
    console.log(React.version)

        3.5执行webpack进行打包

          在进行webpack打包的时候你可能会遇到问题:‘./dist’ is not  an absolute path?

          解决方案如下:

          • 引入NodeJS中的path
    var path = require('path')
          • 使用path.join方法或者path.resolve方法来创建一个绝对路径 webpack.config.js文件
    var path =  require('path');
    
    module.exports={
        entry:path.join(__dirname,'app','index.js'),
        output:{
            path: path.join(__dirname,'/dist'),
            filename: 'bundle.js'
        }
    } 

        3.6新建一个html文件,将刚刚打包的文件进入进来

    <!DOCTYPE html>
        <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>My First React Project</title>
    </head>
    <body>
        <script type="text/javascript" src='../dist/bundle.js'></script>
        <div>
            Hello
        </div>
    </body>
    </html> 

        3.7配置loader(webpack.config.js文件)——需要注意的是这些都需要通过npm 去安装

        常用的loader有以下三个:

        Babel-loader(将ES6语法转为ES5)

         css-loader

         less-loader

       具体可以参阅:http://webpack.github.io/docs/using-loaders.html

    module:{
          loaders:[
            {
              test:/.js$/,    //test表示匹配的文件,正则表达式式的意思就是匹配所有以.js结尾的文件,也就是所有的js文件,webpack都会用babel去处理
              exclude:/node_modules/,  //exclude表示哪些文件不需要处理,例如npm里面安装的node_modules依赖库
              loader:"babel-loader",   //loader的内容是"babel-loader"
              query:{
                presets:['react','es2015']
              }
            },
            {                   //告诉webpack如何处理css文件
              test:/.css$/,
              loader:"style!css"
            },
            {                  //告诉webpack如何处理less文件
              test:/.less$/,
              loader:"style-loader!css-loader!less-loader"
            }
          ]
      
        },
    

      

     

     

  • 相关阅读:
    bjdctf_2020_router
    Windows下Apache配置https
    Linux定时备份数据库并删除N天以前的数据
    MySQL出现Waiting for table metadata lock的原因以及解决方法
    MySQL操作(五)查询实例
    Windows常用命令
    PHPSTORM常用快捷键
    MySQL操作(四)索引及优化
    MySQL操作(三)数据表
    MySQL操作(二)数据库
  • 原文地址:https://www.cnblogs.com/niyingying/p/7521729.html
Copyright © 2020-2023  润新知