公众账号

二维码 微信扫描关注

当前位置:首页 > 技术文章 > 前端开发 >

如何搭建 Webpack + Babel+ D3 的开发环境

开始之前,请确保已经安装 node(node>6) 和 npm。后面所有的操作命令都是 Mac 系统的,根据你的系统使用对应命令。

本教程的 Git 仓库地址可以在这里找到。

有一天,我在构建一个 D3.js 项目时,遇到了一个经典的开发难题:如果我想构建一个不使用 CDN 的项目,我需要学习很多其他的辅助技术。我一直打算学习 Webpack,现在我很高兴找到了一个理由可以实践一下。我没有找到现成的结合这三个技术(Webpack、Babel、D3)的教程,所以我会和大家分享一下我是如何搭建我的项目的。

现在让我们开始。

第一步:创建 package.json 文件

  1. 创建项目目录,如 d3-webpack-babel-tutorial
  2. 打开终端,进入项目目录执行 npm init 命令;
  3. 根据屏幕提示操作,本教程中,直接使用默认的即可。操作完成后,package.json 文件内容如下:
    {
    "name": "d3-webpack-babel-tutorial", 
    "version": "1.0.0", 
    "description": "", 
    "main": "index.js", 
    "scripts": { 
     "test": "echo "Error: no test specified" && exit 1" 
    }, 
    "author": "", 
    "license": "ISC"
    }

你会发现,你的文件内容和我的很相似,但是有些你自己输入的信息,而不是和我的文件内容完全相同。

第二步: 安装 Webpack

  1. 在终端执行 npm install webpack webpack-dev-server ;
  2. 创建 Webpack 配置文件,命令行执行 touch webpack.config.js ;
  3. 复制以下代码到 webpack.config.js

全部评论 /

    关于 商务 项目 联系 友情链接网站地图 Copyright ©-2018 UiBQ版权所有(http://www.uibq.com)