如何搭建 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
    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 的开发环境? – 众成翻译

未经允许不得转载:前端头条 » 如何搭建 Webpack + Babel+ D3 的开发环境?
分享到: 更多 (0)

评论 抢沙发

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

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

联系我们