V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
houfeng
V2EX  ›  前端开发

使用 Dawn 构建 React 项目

  •  
  •   houfeng · 2017-09-28 19:26:25 +08:00 · 1934 次点击
    这是一个创建于 2617 天前的主题,其中的信息可能已经有所发展或是发生改变。

    开发一个 React 项目,通常避免不了要去配置 Webpackbabel 之类,以支持 commonjses 模块及各种 es 新语法,及及进行 jsx 语法的转义。当然也可以用 create-react-appp 脚手架快速创建一个 react 项目,但与此同时 create-react-app 常常又显的不太自由。

    在配置 webpack 时,看着上百行的 webpack.config.js 是不是很闹心?为了重用是不是在多个项目间各种 ctrl-c -> ctrl-v,整个配置起来还是稍显麻烦,对于新手用户常常更是一头雾水,事实上,最大化重用和简化构建配置也是 dawn 的目标之一。

    本文是一篇 Dawn 使用入门文章,介绍如何从「零」开始「手动配置」一个基于 dawnreact 工程。

    一、环境准备(可略过)

    # 1. 安装 NVM
    curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.2/install.sh | bash
    
    # 2. 安装 Node
    nvm install 8.6.0
    nvm alias default 8.6.0
    
    # 3. 安装 Dawn
    npm i dawn -g
    

    二、创建项目 & 编写代码

    创建一个普通的 Node 项目

    # 1. 创建项目目录
    mkdir react-demo
    cd react-demo
    
    # 2. 初始化 package
    npm init
    

    安装 react & react-dom

    npm i react react-dom --save-dev
    

    用你的编辑器,打开项目根目录,比如 vscode

    vscode .
    

    在项目根目录创建 src 目录,并在 src 目录中创建 index.js,并输入如下代码

    import React from 'react';
    import ReactDOM from 'react-dom';
    
    function App() {
      return <div>
        Hello Dawn!
      </div>;
    }
    
    ReactDOM.render(
      <App />, document.getElementById('root')
    );
    

    src/assets 目录,并在 src/assets 目录中创建 index.html,并输入如下代码

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>Hello Dawn!</title>
    </head>
    
    <body>
      <div id="root"></div>
    </body>
    
    </html>
    

    三、添加构建配置

    在项目根目录创建 .dawn 目录,并在 .dawn 目录中输入如下配置

    build:
      - name: clean
      - name: webpack
    

    好了,现在构建一下我们的代码吧,执行如下命令

    dn build
    

    命令执行完毕,会看到项目根目录多了一个 build 这便是构建结果,简单到想哭吧。

    如上配置,在 buildpipeline 中添加了 cleanwebpack 两个中间件,在每次执行 dn build 时,pipeline 中的 clean 会清理 build 目录,然后 webpack 会接着进行构建,并把构构建结果放入 build 目录。

    等一下,想要监听文件的「实时构建」?想要一个用于开发的 「 Dev Server 」?想要浏览器「自动同步」?

    看下边,配置一下 devpipeline,在刚刚的 pipe.yml 中加入 dev 配置

    build:
      - name: clean
      - name: webpack
    
    dev:
      - name: clean
      - name: webpack
        watch: true
      - name: server
      - name: browser-sync
    

    现在我们执行一下如下命令

    dn  dev
    

    devpipeline 中,我们把 webpackwatch 选项打开了,打开后便能监听文件的变化并进行「实时构建」了,接下来的任务交给 server 中间件,它会在构建启动后启动一个静态的 Web Server,默认情况下会自动选择一个「可用端口」,不出意外「浏览器」已经「自动打开」了。

    image

    编辑一代码试试,browser-sync 中间件会通知浏览器实时自动刷新页面,在适配不同设备开发时 browser-sync 还会在多个的设备的浏览器中同步。

    好了,一个基本的基于 dawn 的 react 工程配置好了。文中提到的 webpackcleanserverbrowser-sync,可以关注一下相关文档。


    附上一些链接:

    (全文完)

    第 1 条附言  ·  2017-09-28 23:37:25 +08:00

    修正一句: 「在项目根目录创建 .dawn 目录,并在 .dawn 目录中输入如下配置」 应该为 「在项目根目录创建 .dawn 目录,并在 .dawn 目录中创建 pipe.yml,然后输入如下配置」

    目前尚无回复
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   3403 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 23ms · UTC 11:52 · PVG 19:52 · LAX 03:52 · JFK 06:52
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.