react-webpack-babel, 简单的web service web service初学者工具包

分享于 

4分钟阅读

GitHub

  繁體 雙語
Simple React Webpack Babel Starter Kit
  • 源代码名称:react-webpack-babel
  • 源代码网址:http://www.github.com/ReactJSResources/react-webpack-babel
  • react-webpack-babel源代码文档
  • react-webpack-babel源代码下载
  • Git URL:
    git://www.github.com/ReactJSResources/react-webpack-babel.git
    Git Clone代码到本地:
    git clone http://www.github.com/ReactJSResources/react-webpack-babel
    Subversion代码到本地:
    $ svn co --depth empty http://www.github.com/ReactJSResources/react-webpack-babel
    Checked out revision 1.
    $ cd repo
    $ svn up trunk
    

    简单的web service web service初学者工具包

    CircleCI

    Dependency Status

    厌倦了具有 200MB 个依赖项的复杂起始项,这些依赖项很难理解和修改? 这是给你的 !

    什么是

    • React 16
    • web pack 3
    • 响应路由器 4
    • SASS
    • Babel Cli
    • 热 MODULE 重新加载
    • Jest 21
    • 用于测试的酶 3

    特性

    • 简单的src/索引。jsx和 src/索引。css ( 本地 MODULE css )。
    • 开发( 热重新加载) 和生产( 缩小)的web pack配置。
    • CSS MODULE 加载,因此你可以通过 import styles from './path/to.css';
    • 开发期间 js(x) 和css都已经加载。
    • web service仪表板插件插件在dev服务器上。

    运行

    • 你需要在系统中安装 gitnode。
    • fork 并克隆项目:
    
    git clone https://github.com/ReactJSResources/react-webpack-babel.git
    
    
    
    
    • 然后安装依赖项:
     
    npm install
    
    
    
     
    • 运行开发服务器:
     
    npm start
    
    
    
     
     
    npm run dev
    
    
    
     

    打开浏览器到 http://localhost:8888/

    测试

    要运行单元测试:

     
    npm test
    
    
    
     

    测试捆绑在一起:

    • Jest
    • 响应测试工具
    • 响应测试渲染器

    构建生产软件包

     
    npm run build
    
    
    
     

    正在本地运行生成

    
    npm run serve:build
    
    
    
    

    Nginx 配置

    下面是一个 Nginx 配置示例:

    
    server {
    
    
     #.. . root and other options
    
    
    
     gzip on;
    
    
     gzip_http_version 1.1;
    
    
     gzip_types text/plain text/css text/xml application/javascript image/svg+xml;
    
    
    
     location/{
    
    
     try_files $uri $uri//index.html;
    
    
     }
    
    
    
     location ~. html?$ {
    
    
     expires 1d;
    
    
     }
    
    
    
     location ~. (svg|ttf|js|css|svgz|eot|otf|woff|jpg|jpeg|gif|png|ico)$ {
    
    
     access_log off;
    
    
     log_not_found off;
    
    
     expires max;
    
    
     }
    
    
    }
    
    
    
    

    Eslint

    有一个 .eslint.yaml 配置的eslint就绪插件插件。

    若要运行 linting,请运行:

     
    npm run lint
    
    
    
     

    导入css样式的注释

    • 在绝对路径中具有/src/的样式,被认为是应用程序的一部分,并作为本地css模块导出。
    • 其他样式认为组件使用的全局样式,并直接包含在css包中。

    如果你知道如何使它的更好,请对该项目作出贡献,包括本自述文件:)


    WEB  STA  react  WEBP  Webpack  Babel  
    相关文章