Webpack：使用凉亭

时间：2017-05-04 12:11:03

标签： webpack gulp babeljs webpack-2

主要问题：如何使用babel预设es2015，babel-polyfill和babelify将我当前的情况转换为webpack.config.json？
我使用过Bower，我的bower.json文件是这样的：

"dependencies": {
    "adminlte": "almasaeed2010/AdminLTE#2.4.0-alpha",
    "jquery": "^3.2.1",
    "font-awesome": "^4.7.0",
    "Ionicons": "ionicons#^2.0.1",
    "lobibox": "^1.2.4",
    "moment-timezone": "^0.5.12",
    "eonasdan-bootstrap-datetimepicker": "https://github.com/Eonasdan/bootstrap-datetimepicker.git#^4.17.47",
    "bootstrap-table": "^1.11.1",
    "parsleyjs": "^2.7.0",
    "bootstrap-daterangepicker": "https://github.com/dangrossman/bootstrap-daterangepicker.git#2.1.25",
    "socket.io-client": "^1.7.2",
    "jquery-confirm2": "^3.2.0",
    "push.js": "^0.0.13",
    "lodash": "^4.17.4",
    "tableExport.jquery.plugin": "^1.8.2"
  }

我加载的js文件如下：

<!-- jQuery 3.X -->
<script src="/bower_components/jquery/dist/jquery.min.js"></script>
<!-- Bootstrap 3.3.6 -->
<script src="/bower_components/adminlte/bootstrap/js/bootstrap.min.js"></script>
<!-- FastClick -->
<script src="/bower_components/adminlte/plugins/fastclick/fastclick.js"></script>
<!-- Lobibox Notifications -->
<script src="/bower_components/lobibox/dist/js/notifications.min.js"></script>
<!-- AdminLTE App -->
<script src="/bower_components/adminlte/dist/js/app.min.js"></script>
<!-- Moment.js -->
<script src="/bower_components/moment/moment.js"></script>
<!-- Moment.js Local => FR -->
<script src="/bower_components/moment/locale/fr.js"></script>
<!-- Moment.js Timezone -->
<script src="/bower_components/moment-timezone/builds/moment-timezone-with-data.min.js"></script>
<!-- DatePicker -->
<script src="/bower_components/eonasdan-bootstrap-datetimepicker/build/js/bootstrap-datetimepicker.min.js"></script>
<!-- Date Range Picker -->
<script src="/bower_components/bootstrap-daterangepicker/daterangepicker.js"></script>
<!-- Select2 -->
<script src="/bower_components/adminlte/plugins/select2/select2.full.min.js"></script>
<!-- Parsley Validation -->
<script src="/bower_components/parsleyjs/dist/parsley.min.js"></script>
<!-- Parsley Validation language -->
<script src="/bower_components/parsleyjs/dist/i18n/fr.js"></script>
<!-- Bootstrap Table -->
<script  src="/bower_components/bootstrap-table/dist/bootstrap-table.min.js"></script>
<!-- Bootstrap Table Local language-->
<script  src="/bower_components/bootstrap-table/dist/locale/bootstrap-table-fr-BE.min.js"></script>
<!-- Bootstrap Table : Export -->
<script  src="/bower_components/bootstrap-table/dist/extensions/export/bootstrap-table-export.min.js"></script>
<script  src="/bower_components/tableExport.jquery.plugin/tableExport.min.js"></script>
<!-- jquery-confirm -->
<script src="/bower_components/jquery-confirm2/dist/jquery-confirm.min.js"></script>
<!-- Socket.io Client -->
<script src="/bower_components/socket.io-client/dist/socket.io.js"></script>
<!-- Lodash -->
<script src="/bower_components/lodash/dist/lodash.min.js"></script>
<!-- Push Js -->
<script src="/bower_components/push.js/push.min.js"></script>
<!-- Google Chart -->
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

<!-- All my JS to enable interaction -->
<script src="/dist/js/unitedJs.js"></script>

警告：unitedJs.js是所有自定义Js合并在一起的。我可以轻松地将它们与webpack 2兼容（For＆＃34; entry＆＃34;，我有一个main.js）。

我的gruntfile（用于创建这个unitedJs.js）：

const gulp = require('gulp');
const babel = require('gulp-babel');
const concat = require('gulp-concat');
const sourcemaps = require('gulp-sourcemaps');
const Path = require("path");
// default babel-polyfill require : .../lib/index.js
// Goal : ../dist/polyfill.min.js
// If you really want to know WHY I must do this : check https://github.com/babel/gulp-babel/issues/27
let polyfillPath = Path.relative(__dirname, Path.join(require.resolve("babel-polyfill"), "../..", "dist/polyfill.min.js"));

gulp.task('js', function () {

    return gulp.src(['public/js/*.js', polyfillPath])
        .pipe(sourcemaps.init())
        .pipe(babel({
            presets: ['es2015']
        }))
        .pipe(concat('unitedJs.js'))
        .pipe(sourcemaps.write('.'))
        .pipe(gulp.dest('public/dist/js'));
});


// Watch Files For Changes
// Thanks https://travismaynard.com/writing/getting-started-with-gulp

gulp.task('watch', function () {
    gulp.watch('public/js/*.js', ['js']);
});

gulp.task('default', ['js', 'watch']);
PS：我已经在这里看了一些帖子，但我没有找到答案：
Managing jQuery plugin dependency in webpack
https://webpack.github.io/docs/usage-with-bower.html（我知道它是webpack 1 doc但我在V2 doc中找不到它）
Webpack with bower support

1 个答案:

答案 0 :(得分：1)

我想首先说这只是为了让你开始，让你为生产做好准备我建议你真正阅读webpack和{{3}的核心概念}}。此外，以下所有内容都假定您使用的是Mac。

  1. 安装babel，在终端中复制并粘贴以下内容：

    2. /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

    1. 安装节点：brew安装节点

    2. 安装nvm：brew install nvm

    3. 制作新的目录（开始你的新项目并且不会损害你当前的工作）cd进入它：

      按顺序将以下内容粘贴到终端。

      • npm init -y
      • npm install -D webpack webpack-dev-server
      • npm install -D babel-cli babel-preset-env babel-core babel-loader babel-polyfill babel-preset-es2015

    4. 在项目的根目录中创建webpack.config.js。（请参阅下面的简单webpack配置示例）

    5. 制作index.html文件
    6. 您需要通过首选方法在app.js文件中要求所有依赖项。

    7. 在package.json中设置以下命令的启动命令：

      ＆＃34; start＆＃34;：＆＃34; webpack-dev-server --env = dev --progress --watch --content-base src / app＆＃34;，

      8. 要逐步阅读的资料来源：

      如果它不是你的味道，请忽略它们。    brew＆amp;    treehouse

      简单的webpack配置：

      var webpack = require('webpack');
module.exports = {
  context: __dirname + '/app',
  entry: {
    app: './app.js',
    // add all of you bower dependecies here, you must **npm install --save** each package
    vendor: ['angular']
  },
  output: {
    path: __dirname + '/js',
    filename: 'app.bundle.js'
  },
  module: {
    rules: [{
      test: /\.js$/,
      use: 'babel-loader',
      exclude: /node_modules/
    }]
  },
  plugins: []
};


// make a .babelrc file in root dir and include the following. optionally you can look at babel docs to use these options in the webpack config file.

{
  "sourceMaps": true,
  "env": {
    "testing": {
      "presets": [
        "es2015"
      ]
    }
  },
  "presets": [
    ["es2015"]
  ]
}

      编辑：综合配置 

      const webpack = require('webpack');
const path = require('path');
// you'll need to npm install the following: [raw-loader, html-minifier-loader, json-loader, css-loader,style-loader, url-loader, file-loader ]
// in your index.html you should have two script tags, one for app.js(or bundle.js) and vendor.js
// no need for babelify with webpack. just, npm install --save-dev babel-cli babel-preset-es2016
// in .babelrc file change the preset of 2015 to ["es2016"]
module.exports = {
  entry: {
    app: './app.js',
    // if any on these are just for css remove them from here and require(with absolute path) them from app.js
    vendor: [
      'babel-polyfill',
      'adminlte',
      'jquery',
      'font-awesome',
      'Ionicons',
      'lobibox',
      'moment-timezone',
      'eonasdan-bootstrap-datetimepicker',
      'bootstrap-table',
      'parsleyjs',
      'bootstrap-daterangepicker',
      'socket.io-client',
      'jquery-confirm2',
      'push.js',
      'lodash',
      'tableExport.jquery.plugin'
    ]
  },
  devtool: 'eval',
  output: {
    filename: '[name].js',
    path: path.resolve(__dirname, 'dist'),
    pathinfo: true
  },
  module: {
    rules: [{
      test: /\.js$/,
      use: 'babel-loader',
      exclude: /node_modules/
    }, {
      test: /\.html$/,
      use: ['raw-loader', 'html-minifier-loader'],
      exclude: /node_modules/
    }, {
      test: /\.json$/,
      use: 'json-loader',
      exclude: /node_modules/
    }, {
      test: /\.css$/,
      use: 'css-loader',
      exclude: /node_modules/
    }, {
      test: /\.(jpg|png|gif)$/,
      use: 'file-loader',
      exclude: /node_modules/
    }, {
      test: /\.(woff|woff2|eot|ttf|svg)$/,
      use: {
        loader: 'url-loader',
        options: {
          limit: 100000
        }
      },
      exclude: /node_modules/
    }],
  },
  plugins: [],
};
相关问题
最新问题