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

10年服务1亿前端开发工程师

开始之前,请确保已经安装?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
    const path = require('path'); 
    module.exports = { 
     entry: './src/index.js', 
     output: {
         path: path.resolve('dist'), 
         filename: 'index_bundle.js' 
     }, 
     module: {
         loaders: [
             { test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/ }
         ]
     }  
    }
    

上面的配置文件中指定了?entry?和?output

  • entry?参数指定输入文件,这里是?src?下?index.js?文件;
  • output?参数指定生成的 JavaScript 代码保存地方;
  • loaders?参数允许我们引入其他的编译工具,比如我们引入了Babel;

第三步 安装 Babel

  1. 在终端中执行?npm install --save-dev babel-cli
  2. 上述命令执行成功后,package.json 内容如下:
    {
    "name": "my-project", 
    "version": "1.0.0", 
    ...
    "devDependencies": { 
     "babel-cli": "^6.0.0"
    }
    ...
    }
    
  3. 添加npm scripts,在?package.json?的?scripts?中添加如下代码:"build": "babel src -d lib"
    ...
    "scripts": { 
    "build": "babel src -d lib" 
    }
    ...
    
  4. 执行?npm build,注意:这里会报错,因为?src?目录不存在;
  5. 执行命令?npm install babel-loader babel-core babel-preset-es2015,这个命令安装了所有我们需要的依赖;
  6. 在终端执行命令?touch .babelrc,创建?.babelrc?文件;
  7. 在终端执行?npm install babel-preset-env --save-dev,并在?.babelrc?文件中添加以下代码。
    { 
    "presets":["env"] 
    }
    

第四步:构建应用结构

  1. 在终端执行mkdir src,创建?src?目录;
  2. 在?src?目录创建一个新文件。如果你使用的是MAC系统,可以直接使用?cd?命令进入?src目录, 使用?touch index.js index.html?创建?index.js?和?index.html?文件;
  3. 在?index.js?文件添加?console.log?来测试,是否正常工作;
    console.log("working");
    
  4. 添加?!DOCTYPE?到?index.html?文件,我同时添加了一个包含内容 “Hi” 的 h1 标签。我的?index.html?文件内容如下:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>D3 Webpack Babel</title>
    </head>
    <body>
    <h1>Hi</h1>
    </body>
    </html>
    

第五步: 使用 HTML Webpack 插件

  1. 使用命令?npm install html-webpack-plugin?安装 HTML Webpack 插件;
  2. 配置 HTML Webpack 插件,把下面的代码粘贴到?webpack.config.js
    const path = require('path');
    
    const HtmlWebpackPlugin = require('html-webpack-plugin');
    const HtmlWebpackPluginConfig = new HtmlWebpackPlugin({
    template: './src/index.html',
    filename: 'index.html',
    inject: 'body'
    })
    
    module.exports = { 
    entry: './src/index.js', 
    output: { 
     path: path.resolve('dist'), 
     filename: 'index_bundle.js'
    }, 
    module: { 
     loaders: [ 
       { test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/ }
     ]
    }, 
    plugins: [HtmlWebpackPluginConfig]
    }
    

第六步: 运行程序

  1. 进入?package.json?文件的头部,在?npm scripts?中添加启动脚本。替换?scripts?中的?"test"?为?"start": "webpack-dev-server",代码如下:
    {
    "name": "d3-webpack-babel",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
     "build": "babel src -d lib", 
     "start": "webpack-dev-server"
    },
    "author": "",
    "license": "ISC",
    "devDependencies": {
     "babel-cli": "^6.23.0",
     "babel-preset-env": "^1.1.8"
    }
    }
    
  2. 进入终端,执行?npm start。你的应用程序开始运行。检查浏览器,确认一起都正常工作。

第七步 安装 D3

  1. 在终端执行?npm install d3
  2. 在?index.html?中添加?svg?标签,如:
    <svg width="300px" height="150px">
    <rect x="20" y="20" width="20px" height="20" rx="5" ry="5" />
    <rect x="60" y="20" width="20px" height="20" rx="5" ry="5" />
    <rect x="100" y="20" width="20px" height="20" rx="5" ry="5"/>
    </svg>
    

    在浏览器中看到效果如下:

  3. 在?index.js?中添加如下代码?import * as d3 from 'd3';,引入?D3
  4. 为了测试 D3 正确加载,我们可以使用它来修改3个矩形的颜色,复制下面的代码到?index.js
    import * as d3 from 'd3';
    
    const square = d3.selectAll("rect");
    square.style("fill", "orange");
    

    如果正确执行上面的操作,你会看到3个正方形变成橘色!

如果你依照所有步骤执行,你的 Webpack,Babel,D3 的已经正确安装,并能正常工作。如果你有什么问题或者遇到什么问题,可以在下面评论。

来源: 如何搭建 Webpack + Babel+ D3 的开发环境? – 众成翻译

赞(0)
未经允许不得转载:前端精选 » 如何搭建 Webpack + Babel+ D3 的开发环境?

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们