-p react server_code-push-server react-native - CSDN
精华内容
参与话题
  •  一般我们开始创建react web应用程序的时候,要自己通过 npm 或者 yarn 安装项目的全部依赖,再写webpack.config.js,一系列复杂的配置,搭建好开发环境后写src源代码。 现在 如果你正在搭建react运行环境,使用 ...

    前言:

    create-react-app 是一个全局的命令行工具用来创建一个新的项目

    react-scripts 是一个生成的项目所需要的开发依赖
      
          一般我们开始创建react web应用程序的时候,要自己通过 npm 或者 yarn 安装项目的全部依赖,再写webpack.config.js,一系列复杂的配置,搭建好开发环境后写src源代码。
    现在 如果你正在搭建react运行环境,使用 create-react-app 去自动构建你的app程序。你的项目所在的文件夹下是没有配置文件。react-scripts 是唯一的 额外的 构建依赖在你的package.json中,你的运行环境将有每一个你需要用来构建一个现代React app应用程序。你需要的依赖,和在配置文件中编写的配置代码,react-scripts 都帮你写了,比如:react-scripts帮你自动下载需要的 webpack-dev-server 依赖,然后react-scripts自己写了一个nodejs服务端的脚本代码 start.js来 实例化 WebpackDevServer ,并且运行启动了一个使用 express 的Http服务器,现在你只需要专心写src源代码就可以了。省去了很多精力,最适合快速上手一个demo了。

    react-scripts有以下支持,都帮你配置好了:
    React, JSX, ES6, and Flow syntax support.
    Language extras beyond ES6 like the object spread operator.
    Import CSS and image files directly from JavaScript.
    Autoprefixed CSS, so you don’t need -webkit or other prefixes.
    A build script to bundle JS, CSS, and images for production, with sourcemaps.
    A dev server that lints for common errors.

    Getting Started

    安装

    npm install -g create-react-app

    创建一个应用程序 
    create-react-app my-app
    cd my-app
    

    生成的目录结构
    my-app/
      README.md
      node_modules/
      package.json
      .gitignore
      public/
        favicon.ico
        index.html
      src/
        App.css
        App.js
        App.test.js
        index.css
        index.js
        logo.svg
    没有配置文件(webpack.config.js)


    运行应用程序

    npm run start 
    or 
    yarn start
    在浏览器中打开
    http://localhost:3000 
    现在我们看 my-app文件夹下的public/index.html 和src/index.js的源码,我们可以在这里编写项目代码,但是注意 public/index.html 是启动http服务器的首页,src/index.js是编译的入口文件,只能叫index这个名字,改别的名字不行。

    打开 http://localhost:3000/index.html 首页,f12查看 网页源码,你会看到 

    <script type="text/javascript" src="/static/js/bundle.js"></script>
    
    /static/js/bundle.js
    在你的项目my-app你是看不到这个文件路径的,你也没有写配置文件webpack.config.js,
    http服务器配置,自动代开浏览器窗口,react,es6语法编译,babel-core,webpack,等等这些 你都没下载,配置。
    这些活,react-scripts 都帮你做了。



    刚才的过程分析

    回顾 
    npm run start
    我们 一开始这么启动服务 运行项目
    打开你的my-app\package.json

    "scripts": {
        "start": "react-scripts start",
          ...
      }
    所以执行的是 react-scripts start 
    打开你的my-app\node_modules\react-scripts这个文件夹下的bin文件夹下的react-scripts.js文件
    #!/usr/bin/env node
    var spawn = require('cross-spawn');
    var script = process.argv[2];
    var args = process.argv.slice(3);
    
    switch (script) {
    case 'build':
    case 'eject':
    case 'start':
    case 'test':
      var result = spawn.sync(
        'node',
        [require.resolve('../scripts/' + script)].concat(args),
      .......
    上面代码中  script 的变量值是 start
    所以执行 my-app\node_modules\react-scripts\scripts 文件夹下的  start.js 文件代码节选重点如下
    var webpack = require('webpack');
    var WebpackDevServer = require('webpack-dev-server');  // 启动http服务器
    var paths = require('../config/paths');  //要编译的文件路径与生成路径等
    var config = require('../config/webpack.config.dev');
    var DEFAULT_PORT = parseInt(process.env.PORT, 10) || 3000; //这就是为什么 端口号 不是8080 而是 3000 的原因,在这里可以改成8080,重新npm run start 生效 
    detect(DEFAULT_PORT).then(port => {
      if (port === DEFAULT_PORT) {
        run(port); //这里开始运行
        return;
      }
    ......
    
    function run(port) { 
    // 这里可以设置 http协议, 或者可以在 npm run start 之前 cmd命令窗口中执行 set HTTPS=true&&npm start 改成https 安全协议
      var protocol = process.env.HTTPS === 'true' ? "https" : "http"; 
      var host = process.env.HOST || 'localhost';   
      setupCompiler(host, port, protocol);  // 编译源码 ,生成路径
      runDevServer(host, port, protocol);  //启动 http服务器
    }
    
    
    //配置http服务器
    function runDevServer(host, port, protocol) {
      var devServer = new WebpackDevServer(compiler, {
       compress: true,   
        clientLogLevel: 'none',
        contentBase: paths.appPublic,   //根据导入的paths 指定应用根目录(即index.html所在目录)
        hot: true,
    
        publicPath: config.output.publicPath, //根据导入的 config 变量,指定 虚拟目录,自动指向path编译目录(/assets/ => /build/js/)。html中引用js文件时,
                                                 //必须引用此虚拟路径(但实际上引用的是内存中的文件,既不是/build/js/也不是/assets/)。
     
        quiet: true,
    
    
        watchOptions: {
          ignored: /node_modules/
        },
        // Enable HTTPS if the HTTPS environment variable is set to 'true'
        https: protocol === "https",
        host: host
      });
      /**
       * 省略其他代码
       */
        openBrowser(protocol + '://' + host + ':' + port + '/');    // 打开浏览器 向服务器发送请求
      });
    }
    
    
    function setupCompiler(host, port, protocol) {
    
      compiler = webpack(config, handleCompile);  //  根据导入的 config 变量  指向的 webpack.config.dev 配置文件  运行
         /**
       * 省略其他代码
       */
    }
     start.js 文件代码 中 导入了  my-app\node_modules\react-scripts\config文件夹下的  webpack.config.dev.js 与 paths.js
    paths.js  代码节选如下:
    var appDirectory = fs.realpathSync(process.cwd());   // 获取npm run start 运行所在的路径
    function resolveApp(relativePath) {
      return path.resolve(appDirectory, relativePath);
    }
    
    module.exports = {
      appPath: resolveApp('.'),
      ownPath: resolveApp('node_modules/react-scripts'),
      appBuild: resolveApp('build'),
      appPublic: resolveApp('public'),
      appHtml: resolveApp('public/index.html'),   //  这就是  一开始  我们的项目 要使用public/index.html作为 默认首页 
                    //  这里写什么文件名,项目中就要使用什么文件名  包括 也要有public文件夹
      appIndexJs: resolveApp('src/index.js'),   //编译的入口文件的文件名  项目中要包括src文件夹
      appPackageJson: resolveApp('package.json'),
      appSrc: resolveApp('src'),
      yarnLockFile: resolveApp('yarn.lock'),
      testsSetup: resolveApp('src/setupTests.js'),
      appNodeModules: resolveApp('node_modules'),
      // this is empty with npm3 but node resolution searches higher anyway:
      ownNodeModules: resolveOwn('node_modules'),
      nodePaths: nodePaths,
      publicUrl: getPublicUrl(resolveApp('package.json')),
      servedPath: getServedPath(resolveApp('package.json'))
    };
     /**
       * 省略其他代码
       */
    webpack.config.dev.js  代码节选如下:
    var paths = require('./paths');  //也导入了 同文件夹下的 paths.js
    module.exports = {  entry: [    require.resolve('react-dev-utils/webpackHotDevClient'),    require.resolve('./polyfills'),    paths.appIndexJs     // 编译的入口文件  ],  output: {    path: paths.appBuild,    pathinfo: true,       filename: 'static/js/bundle.js', // 只是编译后生成的目标文件 ,这就是一开始我们 打开浏览器按f12看到的index.html导入的           //  <script type="text/javascript" src="/static/js/bundle.js"></script>    publicPath: publicPath  },
     /**
       * 省略其他代码
       */
    
    }


    已经搭建好运行环境了,接下来 如何开发app

    导入组件

    由于babel依赖,这个项目支持es6模块
    当你仍然使用require() and module.exports ,我们鼓励你去使用import and export 替代.

    例如: 
    Button.js

    import React, { Component } from 'react';
    
    class Button extends Component {
      render() {
        // ...
      }
    }
    export default Button; // 不要忘记去使用 export default!
    

    DangerButton.js
    import React, { Component } from 'react';
    import Button from './Button'; //从另一个文件导入一个组件
    
    
    class DangerButton extends Component {
      render() {
        return <Button color="red" />;
      }
    }
    export default DangerButton;

    增加样式
    Button.css
    .Button {
      padding: 20px;
    }
    Button.js
    import React, { Component } from 'react';
    import './Button.css'; // 告诉webpack Button.js 使用这些样式
    
    
    class Button extends Component {
      render() {
        // You can use them as regular CSS styles
        return <div className="Button" />;
      }
    }

    Autoprefixer

    react-scripts 通过Autoprefixer 帮你的css文件自动添加浏览器兼容前缀
    例如:

    .App {
      display: flex;
      flex-direction: row;
      align-items: center;
    }
    变成
    .App {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: horizontal;
      -webkit-box-direction: normal;
          -ms-flex-direction: row;
              flex-direction: row;
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
    }


    增加CSS预处理器

    首先在 my-app/  目录下  安装node-sass用来将scss编译成css

    npm install node-sass --save-dev
    打开my-app/package.json,增加以下代码到scripts中
       "scripts": {
    +    "build-css": "node-sass src/ -o src/",
    +    "watch-css": "npm run build-css && node-sass src/ -o src/ --watch",
         "start": "react-scripts start",
         "build": "react-scripts build",
         ......
        }
    

    现在你可以重新命名my-app/src/App.css to my-app/src/App.scss and 运行   npm run watch-css
    或者你可以改成
    "scripts": {
        "build-css": "node-sass src/ -o src/",
        "start": "npm run build-css && react-scripts start",  //先执行 build-css 再执行 react-scripts start
        "build": "react-scripts build",
        "test": "react-scripts test --env=jsdom",
        "eject": "react-scripts eject"
      }
    直接 npm run start


    增加图片
    import React from 'react';
    import logo from './logo.png'; // 告诉webpack 这个js文件使用这张图片
    
    console.log(logo); // /logo.84287d09.png  会改变图片的名字
    
    function Header() {
      //导入结果是这个图片的url地址
      return <img src={logo} alt="Logo" />;
    }
    
    export default Header;
    当项目构建的时候,Webpack将正确的移动图片到构建的文件夹下,提供我们正确的路径

    在css工作中的方式也一样

    .Logo {
      background-image: url(./logo.png);
    }
    webpack发现所有的相对模块, 以 ./  开始

    增加 bootstrap
    在react+es6 moudle+bootstrap
    你不是一定要React BootstrapReact 一起使用,但是他是流行的库去整合 bootstrap 和react应用程序,如果你需要他,你可以通过Create React App整合他,通过以下几个步骤

    首先安装React Bootstrap and Bootstrap从npm,React Bootstrap 不包括Bootstrap CSS ,所以你需要去安装
    在 my-app/  目录下  安装

    npm install react-bootstrap --save
    npm install bootstrap@3 --save


    修改 my-app/src/index.js
    在你的src/index.js 文件内容的顶部,导入 Bootstrap CSS 和可选的 Bootstrap theme CSS
    import React from 'react';
    import ReactDOM from 'react-dom';
    import 'bootstrap/dist/css/bootstrap.css';  // 必须的
    import 'bootstrap/dist/css/bootstrap-theme.css';  //  可选的
    import App from './App';
    import './index.css';
    
    ReactDOM.render(
      <App />,
      document.getElementById('root')
    );
    

    修改 my-app/src/App.js
    import React, { Component } from 'react';
    import { Grid, Navbar, Jumbotron, Button } from 'react-bootstrap';
    
    class App extends Component {
      render() {
        return (
          <div>
            <Navbar inverse fixedTop>
              <Grid>
                <Navbar.Header>
                  <Navbar.Brand>
                    <a href="/">React App</a>
                  </Navbar.Brand>
                  <Navbar.Toggle />
                </Navbar.Header>
              </Grid>
            </Navbar>
            <Jumbotron>
              <Grid>
                <h1>Welcome to React</h1>
                <p>
                  <Button
                    bsStyle="success"
                    bsSize="large"
                    href="http://react-bootstrap.github.io/components.html"
                    target="_blank">
                    View React Bootstrap Docs
                  </Button>
                </p>
              </Grid>
            </Jumbotron>
          </div>
        );
      }
    }
    
    export default App;
    


    最后 运行
    npm run start


    参考链接 https://github.com/facebookincubator/create-react-app




    展开全文
  • 利用VSCode搭建react的脚手架运行环境的时候。create-react-app之后npm start出现如下图的问题: There might be a problem with the project dependency tree. It is likely not a bug in Create React App, ...

    利用VSCode搭建react的脚手架运行环境的时候。create-react-app之后npm start出现如下图的问题:

    There might be a problem with the project dependency tree.
    It is likely not a bug in Create React App, but something you need to fix locally.
    
    The react-scripts package provided by Create React App requires a dependency:
    
      "webpack": "4.19.1"
    
    Don't try to install it manually: your package manager does it automatically.
    However, a different version of webpack was detected higher up in the tree:
    
      C:\Users\17720\node_modules\webpack (version: 4.25.1)
    (version: 2.9.1) Manually installing incompatible versions is known to cause hard-to-debug issues.

    在参考 https://blog.csdn.net/muzi190/article/details/84108714 之后,又出现如下的问题。。。:

    PS C:\Users\17720\Desktop\Study\React\hello> npm start
    
    > hello@0.1.0 start C:\Users\17720\Desktop\Study\React\hello
    > react-scripts start
    
    
    There might be a problem with the project dependency tree.
    It is likely not a bug in Create React App, but something you need to fix locally.
    
    The react-scripts package provided by Create React App requires a dependency:
    
      "webpack-dev-server": "3.1.14"
    
    Don't try to install it manually: your package manager does it automatically.
    However, a different version of webpack-dev-server was detected higher up in the tree:
    
      C:\Users\17720\node_modules\webpack-dev-server (version: 2.9.1)
    
    Manually installing incompatible versions is known to cause hard-to-debug issues.

    解决办法:找到版本出问题的目录:如我的是

    C:\Users\17720\node_modules\

    然后在该路径(这是全局路径)下卸载不符合版本的webpack 与 webpack-dev-server

    注意卸载webpack时还需要卸载webpack-cli ,4.0版本后的webpack都带有webpack-cli:

    npm un webpack
    npm un webpack-cli
    npm un webpack-dev-server

    然后再把提示报错的版本安装上,如:

    npm i webpack@4.19.1
    npm i webpack-cli
    npm i webpack-dev-server@3.1.14

    这时候再次npm start 就没出现问题啦

    转载于:https://www.cnblogs.com/donghezi/p/10234721.html

    展开全文
  • What’s React-Router React Router 是一个基于 React 之上的强大路由库,它可以让你向应用中快速地添加视图和数据流,同时保持页面与 URL 间的同步。 前言 继续上一篇文章的延续<<React教程之create-react-...

    What’s React-Router

    React Router 是一个基于 React 之上的强大路由库,它可以让你向应用中快速地添加视图和数据流,同时保持页面与 URL 间的同步。

    前言

    继续上一篇文章的延续<<React教程之create-react-app+webpack打包运行项目(react-webpack-starter)>>
    https://blog.csdn.net/moshowgame/article/details/91984076

    官方文档
    https://react-guide.github.io/react-router-cn/docs/Introduction.html

    开源项目
    https://github.com/moshowgame/react-study

    npm install

    执行以下安装命令

    npm install --save react-route react-router-dom

    确认package.json里面有以下依赖,且大版本号基本一致(版本相差过大)

      "dependencies": {
        "react": "^16.8.6",
        "react-dom": "^16.8.6",
        "react-route": "^1.0.3",
        "react-router-dom": "^5.0.1",
        "react-scripts": "3.0.1"
      },
    

    目录结构

    基本核心代码都放在src下的components目录,首页index.html无需改变,保证有个rootdiv即可,再index.js中通过ReactDOM.render(<App />, document.getElementById('root'));来进行渲染

    在这里插入图片描述
    index.js

    import React from 'react';
    import ReactDOM from 'react-dom';
    import App from './components/App';
    
    ReactDOM.render(<App />, document.getElementById('root'));
    

    App.js

    这里引发了一个HashRouter vs BrowserRouter 的问题,请见文分解

    import React from 'react';
    //HashRouter,支持#识别,http://localhost:8080/#/Page3/
    import { HashRouter as Router,Route} from 'react-router-dom';
    //单页BrowserRouter
    //import { BrowserRouter as Router,Route} from 'react-router-dom';
    import Home from './home';
    import Page1 from './page1';
    import Page2 from './page2';
    import Page3 from './page3';
     
    class App extends React.Component {
    	render(){
    		return(
    		<Router >
    		 <div>
    		    <Route exact path="/" component={Home} />
    			<Route path="/Page1/:name" component={Page1} />                                                                                                                                                                                                                                                                                   
    			<Route path="/Page2" component={Page2} />  
    			<Route path="/Page3" component={Page3} />                                                                                                                                                                                                                                                                                                                                                                                                                                          
    		</div>
    
    		</Router>
    		)
     
    		}
    	}
    export default App;
    

    Home.js

    import React from 'react';
    import { Link } from 'react-router-dom';
    import { Router, Route, Switch } from "react-router";
    
    class Home extends React.Component{
     
    	render(){
    		return(
    			<div>
    				<p>This is Home!</p>
    				<Link to="/Page1/Moshow" style={{color:'black'}}>
    				<div>点击跳转到Page1</div>
    				</Link>
    				<Link to="/Page2/" style={{color:'black'}}>
    				<div>点击跳转到Page2</div>
    				</Link>
    				<Link to="/Page3/" style={{color:'black'}}>
    				<div>点击跳转到Page3</div>
    				</Link>
    			</div>
    		);
    	}
    }
     
    export default Home;
    

    Page1.js

    import React from 'react';
    import App from './App';
    
    class Page1 extends React.Component {
    
        render() {
            let mystyle = {
                width: '100%',
                height: '80px',
                backgroundColor: 'pink',
                fontSize: '24px',
                textAlign: 'center',//垂直居中
                lineHeight: '80px'//水平居中
            };
            console.log(this, this.props);
            return (
        	<div>
    			<h1 style={mystyle}>This is Page 111111! your staff-id :{this.props.match.params.name}</h1>
             </div>
    		); 
    	}
    }
     
    export default Page1;
    

    Page2.js

    import React from 'react';
     
    class Page2 extends React.Component{
    	render(){
            let mystyle={
                width: '100%',
                height:'80px',
                backgroundColor:'greenyellow',
                fontSize:'24px',
                textAlign: 'center',//垂直居中
                lineHeight: '80px'//水平居中
            };
    		return(
    			<div>
    			<h1 style={mystyle}>This is Page 222222!</h1>
    			</div>
    		);
    	}
    }
     
    export default Page2;
    

    Page3.js

    import React from 'react';
     
    const Page3 = ({match}) => {
    	let mystyle={
    		width: '100%',
    		height:'80px',
    		backgroundColor:'burlywood',
    		fontSize:'34px',
    		textAlign: 'center',//垂直居中
    		lineHeight: '80px'//水平居中
    	};
    
    	return(
    		<div>
    		<h1 style={mystyle}>hello {match.params.id} This is Page 333333!</h1>
    		
    		</div>
    	);
    }
     
    export default Page3;
    

    npm start

    现在让我们开始运行项目把.输入

    npm start

    运行效果如下

    http://localhost:8080/#
    在这里插入图片描述
    http://localhost:8080/#/Page1/:yourname
    在这里插入图片描述
    http://localhost:8080/#/Page2/在这里插入图片描述
    http://localhost:8080/#/Page3/在这里插入图片描述

    以下内容为补充部分 : BrowserRouter vs HashRouter

    BrowserRouter

    It uses history API, i.e. it’s unavailable for legacy browsers (IE 9 and lower and contemporaries). Client-side React application is able to maintain clean routes like example.com/react/route but needs to be backed by web server. Usually this means that web server should be configured for single-page application, i.e. same index.html is served for /react/route path or any other route on server side. On client side, window.location.pathname is parsed by React router. React router renders a component that it was configured to render for /react/route.

    它使用浏览历史history API,所以他不适用于传统浏览器(IE 9及更低版本)。 客户端的React应用程序应该能够维护像example.com/react/route这样的干净路由,但需要由Web服务器支持。 通常这意味着Web服务器应该配置为单页面应用程序,即为/ react / route路径或服务器端的任何其他路由提供相同的index.html。 在客户端,window.location.pathname由React路由器解析。 React路由器呈现一个组件,它被配置为为/ react / route呈现。

    HashRouter

    It uses URL hash, it puts no limitations on supported browsers or web server. Server-side routing is independent from client-side routing.

    Backward-compatible single-page application can use it as example.com/#/react/route. The setup cannot be backed up by server-side rendering because it’s / path that is served on server side, #/react/route URL hash cannot be read from server side. On client side, window.location.hash is parsed by React router. React router renders a component that it was configured to render for /react/route, similarly to BrowserRouter.

    Most importantly, HashRouter use cases aren’t limited to SPA. A website may have legacy or search engine-friendly server-side routing, while React application may be a widget that maintains its state in URL like example.com/server/side/route#/react/route. Some page that contains React application is served on server side for /server/side/route, then on client side React router renders a component that it was configured to render for /react/route, similarly to previous scenario.

    它使用URL Hash哈希,它对受支持的浏览器或Web服务器没有限制。服务器端路由独立于客户端路由。

    向后兼容的单页面应用程序可以将其用作example.com/#/react/route。服务器端渲染无法备份设置,因为它是服务器端提供的/path,#/react /route URL hash无法从服务器端读取。在客户端,window.location.hash由React路由器解析。 React路由器呈现一个组件,它被配置为为/ react / route呈现,类似于BrowserRouter。

    最重要的是,HashRouter用例不仅限于SPA。一个网站可能具有遗留或搜索引擎友好的服务器端路由,而React应用程序可能是一个小部件,它在URL中保持其状态,如example.com/server/side/route#/react/route。一些包含React应用程序的页面在服务器端为/ server / side / route提供,然后在客户端React路由器呈现一个组件,它被配置为为/ react / route呈现,与之前的方案类似。(简单的讲,就是可以使用http://localhost:8080/#/Page1/Moshow这种方式来访问URL,无刷新页面,切换视图,用hash 实现路由切换,本身附带history记录,简单舒服。)

    展开全文
  • 参考自: ...创建项目 首先为项目创建一个目录: CommandLine 代码: mkdir webpack-react-tutorial && cd webpack-react-tutorial 创建一个用于保存代码的最小目录结构...mkdir -p src 通过运行来启用项目: ...

    参考自:
    https://www.html.cn/archives/9427

    创建项目

    第一步:安装,如果安装失败或者报警,可以尝试更换npm registry的地址,比如设置为淘宝源或者你所在公司可以翻墙的源。npm config set registry="https://"

    npm i -g create-react-app 
    

    第二步:创建项目,并进入

    create-react-app my-app
    cd my-app
    //推荐下面每个都试着运行下
    yarn start
    yarn build
    yarn eject
    

    其中最后的yarn eject会使得隐藏的webpack.config.js文件出现在文件夹config里面。

    设置Babel

    react components(组件) 大多是用 JavaScript ES6 编写的。

    由于浏览器无法理解 React 组件,因此需要进行某种转换。

    Webpack 不知道如何进行转换,但它具有 loaders(加载器) 的概念:将它们视为转换器。

    Webpack loaders(加载器) 将某些内容作为输入并生成其他内容作为输出。

    babel-loader 是 Webpack 加载器负责接收 ES6 代码并使其可以让所选择的浏览器理解。

    很明显 babel-loader 使用 Babel。 并且 Babel 必须配置为使用一组预设:
    babel-preset-env 用于将 JavaScript ES6 代码编译为 ES5(请注意,babel-preset-es2015现已弃用)
    babel-preset-react 用于将 JSX 和其他东西编译到 JavaScript

    要开始使用 loader ,我们需要安装一堆依赖项。 尤其是:

    • babel-core
    • babel-loader

    babel-preset-env 用于将 Javascript ES6 代码编译为 ES5
    我们开始动手吧:

    CommandLine 代码:

    npm i babel-core babel-loader babel-preset-env --save-dev
    

    接下来,通过在项目文件夹中创建名为 .babelrc 的新文件来配置 Babel :

    .babelrc 代码:

    {
        "presets": [
            "env"
        ]
    }
    

    此时我们有2个配置 babel-loader 的选项:

    使用 webpack 的配置文件
    在你的 npm scripts 中使用 --module-bind

    给 webpack 添加一个配置文件,以最经典的方式使用 babel-loader。

    创建一个名为 webpack.config.js 的新文件并配置 loader(加载器) :

    webpack.config.js 代码:

    module.exports = {
      module: {
        rules: [
          {
            test: /\.js$/,
            exclude: /node_modules/,
            use: {
              loader: "babel-loader"
            }
          }
        ]
      }
    };
    

    除非您要自定义 entry point(入口点) ,否则无需指定它。

    接下来打开 ./src/index.js 并编写一些 ES6 代码:

    index.js 代码:

    const arr = [1, 2, 3];
    const iAmJavascriptES6 = () => console.log(...arr);
    window.iAmJavascriptES6 = iAmJavascriptES6;
    

    最后,创建 bundle(包):

    CommandLine 代码:

    npm run build
    

    现在看一下 ./dist/main.js 来查看转换后的代码。
    此时我们已准备好定义最小的webpack配置。

    创建一个名为 webpack.config.js 的文件,写入以下内容:

    webpack.config.js 代码:
    module.exports = {
      module: {
        rules: [
          {
            test: /\.js$/,
            exclude: /node_modules/,
            use: {
              loader: "babel-loader"
            }
          }
        ]
      }
    };
    

    配置非常简单。

    对于每个扩展名为 .js 的文件,Webpack 都会通过 babel-loader 来管理代码,将 ES6 转换为 ES5 。

    有了这个,我们就可以编写我们的 React 组件了。

    编写react

    一旦你安装并配置了 babel ,这里就很容易了。

    安装 React :

    CommandLine 代码:

    npm i react react-dom --save-dev
    

    接下来添加 babel-preset-react :

    CommandLine 代码:

    npm i @babel/preset-react --save-dev
    

    在 .babelrc 中配置预设:

    .babelrc 代码:

    {
      "presets": ["@babel/preset-env", "@babel/preset-react"]
    }
    

    很快就完成了!

    根据 Conner Aiken 的建议,您可以配置 babel-loader 来读取 .jsx 文件。 如果你的 React 组件 正在使用 jsx 扩展,这将非常有用。

    打开 webpack.config.js 并像这样配置 loader(加载器) :

    webpack.config.js 代码:

    module.exports = {
      module: {
        rules: [
          {
            test: /\.(js|jsx)$/,
            exclude: /node_modules/,
            use: {
              loader: "babel-loader"
            }
          }
        ]
      }
    };
    

    要测试一下你可以在 ./src/App.js 中创建一个测试的 React 组件:

    App.js 代码:

    import React from "react";
    import ReactDOM from "react-dom";
    const App = () => {
      return (
        <div>
          <p>React here!</p>
        </div>
      );
    };
    export default App;
    ReactDOM.render(<App />, document.getElementById("app"));
    

    接下来在 ./src/index.js 中 import(导入) 组件:

    index.js 代码:

    import App from "./App";
    

    然后再次运行构建 npm run build

    HTML webpack 插件

    webpack 需要两个额外的组件来处理HTML:html-webpack-plugin 和 html-loader。

    添加依赖项:

    CommandLine 代码:

    npm i html-webpack-plugin html-loader --save-dev
    

    然后更新 webpack 配置:

    webpack.config.js 代码:

    const HtmlWebPackPlugin = require("html-webpack-plugin");
    module.exports = {
      module: {
        rules: [
          {
            test: /\.js$/,
            exclude: /node_modules/,
            use: {
              loader: "babel-loader"
            }
          },
          {
            test: /\.html$/,
            use: [
              {
                loader: "html-loader",
                options: { minimize: true }
              }
            ]
          }
        ]
      },
      plugins: [
        new HtmlWebPackPlugin({
          template: "./src/index.html",
          filename: "./index.html"
        })
      ]
    };
    

    接下来在 ./src/index.html 中创建一个 HTML 文件:

    index.html 代码:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="utf-8">
        <title>webpack 4 quickstart</title>
    </head>
    <body>
        <div id="app">
        </div>
    </body>
    </html>
    

    然后再次运行构建:

    CommandLine 代码:

    npm run build
    

    并查看 ./dist 文件夹。 您应该看到生成的 HTML 。

    没有必要在 HTML 文件中引入您的 Javascript :bundle(包) 会自动注入。

    在浏览器中打开 ./dist/index.html :您应该看到 React 组件正常工作!

    正如您所看到的,在处理 HTML 方面没有任何改变。

    webpack 4 仍然是一个针对 Javascript 的模块打包器。

    但是有计划将 HTML 添加为模块(HTML作为 entry point(入口点))。

    webpack 4:将 CSS 提取到一个文件中

    webpack 不知道如何将 CSS 提取到一个文件中。

    在过去,这是 extract-text-webpack-plugin 的工作。不幸的是,这个插件与 webpack 4 不太兼容。根据 Michael Ciniawsky 的说法:extract-text-webpack-plugin 的维护已经成为了一个很大的负担,这已经不是第一次因为它的问题,而使升级 webpack 主版本变的而复杂和繁琐

    mini-css-extract-plugin 可以解决这些问题。

    注意:确保将 webpack 更新到 4.2.0 版。 否则 mini-css-extract-plugin 将无效!
    使用以下命令安装该插件和 css-loader :
    CommandLine 代码:

    npm i mini-css-extract-plugin css-loader --save-dev
    

    接下来创建一个用于测试的 CSS 文件:

    css 代码:

    /* */
    /* CREATE THIS FILE IN ./src/main.css */
    /* */
    body {
        line-height: 2;
    }
    

    配置插件和 loader(加载器):

    webpack.config.js 代码:

    const HtmlWebPackPlugin = require("html-webpack-plugin");
    const MiniCssExtractPlugin = require("mini-css-extract-plugin");
    module.exports = {
      module: {
        rules: [
          {
            test: /\.js$/,
            exclude: /node_modules/,
            use: {
              loader: "babel-loader"
            }
          },
          {
            test: /\.html$/,
            use: [
              {
                loader: "html-loader",
                options: { minimize: true }
              }
            ]
          },
          {
            test: /\.css$/,
            use: [MiniCssExtractPlugin.loader, "css-loader"]
          }
        ]
      },
      plugins: [
        new HtmlWebPackPlugin({
          template: "./src/index.html",
          filename: "./index.html"
        }),
        new MiniCssExtractPlugin({
          filename: "[name].css",
          chunkFilename: "[id].css"
        })
      ]
    };
    

    最后在 entry point(入口点) import(导入) CSS:

    index.js 代码:

    //
    // PATH OF THIS FILE: ./src/index.js
    //
    import style from "./main.css";
    

    然后再次运行构建:

    CommandLine 代码:

    npm run build
    

    并查看 ./dist 文件夹。你应该看到生成的CSS!

    回顾一下:extract-text-webpack-plugin 不适用于webpack 4 。请改用 mini-css-extract-plugin 代替。

    webpack 4:webpack dev server

    使用 webpack 配置开发服务器只需一分钟。

    配置好的 webpack dev server 将在浏览器中启动您的应用程序。

    每次更改文件时,它都会自动刷新浏览器的窗口。

    要设置 webpack dev server,请安装包:

    CommandLine 代码:

    npm i webpack-dev-server --save-dev
    

    接下来打开 package.json 并调整 scripts ,如下所示:

    package.json 代码:

    "scripts": {
      "start": "webpack-dev-server --mode development --open",
      "build": "webpack --mode production"
    }
    

    保存并关闭文件。

    现在,通过运行以下命令:

    CommandLine 代码:

    npm run start
    

    你会看到 webpack dev server 在浏览器中启动你的应用程序。

    webpack dev server 非常适合开发。 (它也可以使 React Dev Tools 在您的浏览器中正常工作)。

    展开全文
  • 一、安装 npm install -g create-react-app 二、创建react应用 create-react-app是全局命令来创建react项目 ...Creating a new React app in G:\GitHub\React-demo\react-cli-demo. Installing pac...
  • 第一部分:环境准备 环境:centerOS(7.7)、docker、git、nodejs(10+)、mysql(5.7)、yarn 说明:括号内为本次搭建使用的版本 一、安装docker 1.安装命令 ...2.启动docker sudo systemctl restart docker ...
  • What’s ReactReact 是 facebook 開發的一個 JS 函式庫,負責產生與管理前端的 UI 。它並不算框架。 Why React? 用純 JS 在前端產生 HTML (一般來說是在後端產生 HTML 送到前端) 使用 Virtual DOM,重繪時...
  • 使用过create-react-app(以下简称cra)的朋友都知道,这是react官方的一款脚手架工具,内部集成了babel,webpack,webpack-dev-server等等。 以前我们要在cra中做webpack的配置,有三种方式: 1、运行npm run ...
  • 在学习react的时候,经常用create-react-app来创建web应用,然而写到后面总有连自己服务器和数据库的需求,create-react-app创建的是一个webpack-dev-server,主要用来进行webpack的编译和热加载(HMR),所以想要把...
  • React Server Side Rendering

    2019-07-16 23:47:27
    Next.js — React Server Side Rendering ...https://medium.com/@wesharehoodies/next-js-react-server-side-rendering-done-right-f9700078a3b6 https://github.com/reactjs/redux/blob/master/docs/reci...
  • 1、首先基于npm在全局安装create-react-app $ npm install -g create-react-app 2、在指定目录中创建一个react项目工程 $ create-react-app my-app my-app是自己设置的项目名称(遵循npm模块发布时的要求,...
  • Why Webpack? 兼容 CommonJS & AMD & ES6 模組規範 Bundle 效率高 JS 擴充語法的編譯自動化 (JSX, Coffee Script, TypeScript…) 編譯 sass, less 將資源 (css, img, font…) 包入 JS 內 ...
  • 思索良久,决定还是记录下心得体会:一个基于create-react-app官方脚手架,搭建起来的dva开发模式的react项目。 当然现今的前端市场如此强大,你可以在网络上找到你想要的任何脚手架,并且很多可以开箱即用,不可...
  • 标题react新安装–fastclick、react-fastclick、react-hot-loader、react-redux、prop-types React -fastclick与fastclick的使用 目的:为解决移动端 click事件的 300ms 延时 npm install react-fastclick --save ...
  • 1.cd到你的项目要存放的位置,然后执行以下命令全局安装create-react-app脚手架 npm install -g create-react-app 执行成功结果显示 C:\Users\Saiang&gt;d: D:\&gt;cd projects D:\projects&gt;...
  • 通过前面 script 的方式虽然也能完成 React.js 的开发(上一篇的文章中的方式) 但是,却存在这很大的问题,模块化怎么实现 create-react-app Create React App 基于 Node.js 编写的命令行工具,通过它可以快速生成 ...
  • React-Apollo-Prisma-Graphql

    2019-06-27 05:28:06
    create-react-app: https://facebook.github.io/create-react-app/docs/getting-started    Apollo:https://www.graphql.college/building-a-github-client-with-react-apollo/  Prisma:...
  • 1. npm install create-react-app -g 2. create-react-app myReact 有人可能会碰到‘create-react-app’ 不是内部或外部命令… 此时用 npx create-react-app myReact 来替代第二步 第三步,进入myReact目录运行...
1 2 3 4 5 ... 20
收藏数 11,154
精华内容 4,461
关键字:

-p react server