zoukankan      html  css  js  c++  java
  • 在浏览器端用es6,babel+browserify打包

    写得最清楚的是这个系列:

    一个普通的写网页的人如何过渡到ES6 (一)

    感觉比babel官网写得还清楚点。

    看完这个才有点理解node原来不只是用来起express后端web server,更主要用途是作为开发时,用npm作为js语言的包管理器,然后打包,管理浏览器端<script>字段的js。有了npm+打包工具:写程序时

    按包、模块,文件夹,单元测试这样写,然后打包成1个文件,供浏览器下载运行。

    而不是在html手写一堆<script></script>,还要考虑先后顺序。一点点点击测试。

    加上使用了es6,js也终于越来越工程化了,规避了以前大量的毒瘤和糟粕,提升了效率和正确性。

    具体过程:

    安装babelify browserify

    npm i babelify browserify@10 -g

    其他babel安装项一律--save-dev

    只打包1个js脚本

    就是直接包含

    window.onload = function() {
    }

    的那个,只不过,现在可以在这个里面import了(es6)

    打包到bundle.js

    这样html里的script里

    <script type="text/javascript" src="/static/bundle.js"></script>

    就可以了。

    打包方式:

    方法1

    在package.json的script里加一个命令:

    "build_browser_dev": "browserify ./src/page.js -o ./static/bundle.js -t [ babelify --presets[env]]"

    方法2

     把打包过程写成脚本。./src/do_bundle.js
     
    const fs = require("fs");
    const browserify = require('browserify');
    
    //--------读yaml配置文件------------
    const yaml = require('js-yaml');
    const argv = require('yargs').argv;
    console.log('argv', argv);
    const config = yaml.safeLoad(fs.readFileSync(argv.config, { encoding: 'utf8', flag: "r" }));
    console.log('yaml config', config);
    
    //"browserify ./src/client.js -o ./static/bundle.js -t [ babelify --presets[env]]"
    browserify('./src/client.js')
      .transform('babelify',{presets: ["@babel/preset-env"]})
      .bundle()
      .pipe(fs.createWriteStream(`${config['PATH_OUTPUT']}/bundle.js`));

    这样,可以接受配置文件,然后在package.json里,简短多了:

      "scripts": {
        "build_browser": "node ./src/do_bundle.js --config=./cfg.yml",
        "test": "echo "Error: no test specified" && exit 1"
      },
     
     
     
     
     
  • 相关阅读:
    python学习之路---day16--面向对象
    python-day15---面向对象
    python---day14( 内置函数二)
    day13--------python 内置函数(一)
    python学习之路---day12
    python学习之路---day09
    python学习之路---day07
    【转帖】嵌入式4412开发板QT5.7编译安装到arm
    【转载】4412开发板嵌入式QtE应用开发环境搭建
    S5P4418开发板介绍
  • 原文地址:https://www.cnblogs.com/xuanmanstein/p/9941974.html
Copyright © 2011-2022 走看看