webpack 中加入es6的模块_webpack es6 转es5模块化开发(上) - CSDN
精华内容
参与话题
  • 浏览器目前对于es6的支持有限。我们通常会使用babel转码器经es6转为es5实现浏览器的支持。但是babel默认只转换新的JavaScript句法(syntax),而不转换新的API,比如Iterator、Generator、Set、Maps、Proxy、Reflect...

    浏览器目前对于es6的支持有限。我们通常会使用babel转码器经es6转为es5实现浏览器的支持。但是babel默认只转换新的JavaScript句法(syntax),而不转换新的API,比如Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise等全局对象,以及一些定义在全局对象上的方法(比如Object.assign)都不会转码。而且像import和export这两个命令现在在任何浏览器中都是不支持的, 同时babel也无法将其转换为浏览器支持的ES5, 原因在于:babel只是个翻译,假设a.js 里 import 了 b.js, 对a.js进行转码,只是翻译了a.js,并不会把b.js的内容给读取合并进来, 如果想在最终的某一个js里,包含 a.js,b.js 的代码,那就需要用到打包工具

    一、 node.js的安装,请参考点击打开链接。记住一定要配置环境变量。否则后面会引起很多问题。

    二、下列的安装教程基于node 的4.4.1版本。因为node的不同版本会有差异。(之前按照网上的教程安装和使用webpack,总是在命令行出现webpack不是可执行的程序,搞了两天,才发现,原来时node的版本问题。   1.

     1。全局安装webpack 。命令行输入npm install webpack -g

     2.全局安装webpack。     命令行输入npm install webpack-cli -g

           ps:全局安装是为了在命令行中直接使用webpack。

     3.新建项目文件夹test。

    4.命令行定位到项目文件夹,命令行输入npm init。初始化npm包,生成package.json

    5.本地安装webpack。命令行输入npm install webpack -D

       PS:-D是  --sav-dev的简写

      --save:将保存配置信息至package.json(package.json是nodejs项目配置文件);

      -dev:保存至package.json的devDependencies节点,不指定-dev将保存至dependencies节点;

           一般保存在dependencies的像这些express/ejs/body-parser等等。

    6.本地安装webpack-cli。命令行输入npm install webpack -D

        ps:本地安装后可以直接在本地使用webpack。只是需要输入项目下的node_module/.bin/webpack.

    7.事实上webpack4.x'./src/index.js'作为入口,因此我们需要创建src文件件,以及index.js的文件,以及其他的      js文件。

    8.webpack4.x的打包已经不能用webpack 文件a 文件b的方式,而是直接运行webpack --mode development或者webpack --mode production,这样便会默认进行打包,入口文件是'./src/index.js',输出路径是'./dist/main.js',其中src目录即index.js文件需要手动创建,而dist目录及main.js会自动生成。

    9.简化输入:我们在package.jsonscripts中加入两个成员:

    "dev":"webpack --mode development",
    "build":"webpack --mode production"
    以后我们只需要在命令行执行npm run dev便相当于执行webpack --mode development,执行npm run build便相当于执行webpack --mode production 
    可以看到根目录下生成了dist目录,并且dist目录下生成了main.js文件,main.js文件已经打包了src目录下index.js文件的代码。


    展开全文
  • es6转化为es5

    千次阅读 2017-04-24 16:35:55
    直接了当,上干货。先看一下目录结构 在这里需要的环境就是node,可以去查一下安装教程,这里就不赘述了。当然需要我们的主角--webpack,很强大的...然后安装webpack到你的项目(要切盘到你的目录下) npm install w

    直接了当,上干货。先看一下目录结构

    在这里需要的环境就是node,可以去查一下安装教程,这里就不赘述了。当然需要我们的主角--webpack,很强大的一个工具。

    安装webpack:(cmd命令窗口,也可以用git)

    a.安装webpack到全局 npm install webpack -g  

    b.然后安装webpack到你的项目中(要切盘到你的目录下)  npm install webpack --save-dev

    c.webpack中常用命令webpack --watch 只要改变了jsx内容,直接将改变的内容重新编译打包,运行久了以后会自动终止

    安装完成后需要下面的插件(切盘到你的项目下):

    1.npm install babel-core --save-dev

    2.npm install babel-loader  --save-dev 下载加载器

    3.npm install babel-preset-es2015 --save-dev

    逐步下载上述插件,完成之后创建一个webpack.config.js文件放在你的项目目录下,在里面写配置文件,代码如下:

    module.exports={
      //文件入口
      entry: {
      main: './es6/main.js',
      common: './es6/common.js'
    },
    //文件出口
    output:{
      path:'./js',
      filename:'[name].bundle.js'
    },
    //引入模块。babel-loader转换
    module:{
      loaders:[
      { 
         test: /\.js$/, 
         exclude: /node_modules/, 
         loader: "babel-loader", 
         query:
           {
             presets: ['es2015'], //并不明白,这么写就对了,如果用react,就在这里写上['react']
             //npm install babel-plugin-transform-runtime   然后引入  解决es6生成器函数带来的问题
             //(还可以 npm install --save-dev babel-polyfill 
             //最上面写上var babelpolyfill = require("babel-polyfill");
             //import "babel-polyfill";写在js里面
             //推荐使用transform-runtime,只能加载需要的插件,babelpolyfill是整个的完全加入,太大)
             plugins: ['transform-runtime']
           }
      }
      ]
     } 
    }

    ok,完成。现在你只需要cmd进入到你的项目下,然后在上图所说的位置写入对应的代码,然后  webpack  -w(webpack --watch简写)命令运行,写的es6代码就编译成了

    es5代码,然后在页面上script标签引入编译后的js文件就可以了。

    对于es6还在一只学习,可惜进步不大,给大家推荐一个地址http://es6.ruanyifeng.com/,作者是很牛的大神。这里面开篇就提到关于怎么es6编译es5,可惜太高深没有看太明白,只好自己再研究研究,希望对大家有帮助。

    展开全文
  • webpack简单配置es6的运行环境

    千次阅读 2020-05-09 18:15:20
    前言:本博客介绍的仅供学习es6语法使用的(为了能让浏览器识别es6语法),并不适用于实战项目。 一、创建的目录结构 根目录为:ES6_TEST 目录树如下图: 二、需要配置的文件以及配置内容 1、...

    前言:本博客介绍的仅供学习es6语法使用的(为了能让浏览器识别es6语法),并不适用于实战项目。

    tips:现在将谷歌浏览器更新至最新版后大多es6语法都能正确运行了。所以可以先直接写ES6代码进行测试了。如果有ES6语法报错的情况下再进行下面配置,这样更能省时省力学习!

    一、创建的目录结构

    根目录为:ES6_TEST
    目录树如下图:

    这里写图片描述

    二、需要配置的文件以及配置内容

    1、app.js文件是自己练习es6语法js文件
    2、index.html文件里面只需写上基本的html结构即可
    3、package.json文件就是管理npm安装的插件的版本信息。
    内容为:(注意插件后面的版本号)

    {
        "name": "ecmascript6-_test",
        "version": "1.0.0",
        "description": "es6 test",
        "main": "index.js",
        "scripts": {
            "test": "echo \"Error: no test specified\" && exit 1",
            "webpack": "webpack --config webpack.config.js --colors  --display-reasons --watch"
        },
        "author": "winne",
        "license": "ISC",
        "devDependencies": {
            "babel-core": "^6.26.0",
            "babel-loader": "^7.1.2",
            "babel-preset-env": "^1.7.0",
            "clean-webpack-plugin": "^0.1.19",
            "html-webpack-plugin": "^3.2.0",
            "webpack": "^3.10.0"
        }
    }
    

    4、webpack.config.js 为webpack配置文件,配置es6语法转化为es5语法
    内容为:(注意配置文件名和目录结构有关系的)

    var path = require('path');
    var htmlWebpackPlugin = require('html-webpack-plugin');
    var cleanWebpackPlugin = require('clean-webpack-plugin');
    
    module.exports = {
        //入口文件
        entry: {
            main: "./src/js/app.js"
        },
        //出口文件
        output: {
            path: path.resolve(__dirname, 'dist'),
            filename: 'js/[name].js'
        },
        //插件依赖
        plugins: [
            new htmlWebpackPlugin({
                filename: 'index.html',
                template: 'src/index.html',
                inject: 'body'
            }),
            //清除前一次打包指定的文件夹
            new cleanWebpackPlugin(['dist'])
        ],
        //处理模块资源
        module: {
            rules: [{ //处理js文件
                    test: /\.js$/,
                    use: [{
                        loader: "babel-loader",
                        options: {
                            //使用env预设来处理es6语法的js文件
                            presets: ['env']
                        }
                    }],
                    exclude: [
                        path.resolve(__dirname, './node_modules')
                    ]
                },
    
            ]
        }
    }
    
    

    5、安装es6编译补丁
    如果在编译 Generator 函数的时候,如果控制台报regeneratorRuntime is not defined错误,那么就是babel 并不是完全支持编译es6。
    那么就需要babel的拓展包(Polyfill)。
    这是一个补完babel支持es6的拓展包,配置步骤为3个:
    1.打开命令行键入 npm install --save-dev babel-polyfill 安装polyfill
    2.在webpack.config.js中最上面写上var babelpolyfill = require("babel-polyfill");
    3.在自己的项目app.js文件中最开头写上import "babel-polyfill";

    6、安装编译 ES7 的 async/await插件
    使用 ES7 的 async/await 时报错现象:
    原因:这个regeneratorRuntime在浏览器上是不认识的,通过百度需要安装一个babel-plugin-transform-runtime插件。
    1、使用npm安装
    npm i --save-dev babel-plugin-transform-runtime
    2、然后再项目根目录下新建 .babelrc 文件中添加:

    {
    "plugins": [
    	[
    	    "transform-runtime",
    	    {
    	      "helpers": false,
    	      "polyfill": false,
    	      "regenerator": true,
    	      "moduleName": "babel-runtime"
    	    }
        ]
      ]
    }
    

    三、安装项目依赖和运行项目

    1、安装项目依赖
    就是安装package.json里面的插件包,在根目录下运行命令窗口,使用 npm install 命令安装。安装完成之后我们就会发现根目录下多了一个 node_modules文件夹,就是一些依赖插件包。
    2、运行项目
    根目录下运行命令窗口,使用 npm run webpack 命令运行项目。因为我们之前在package.json文件里面的script对象中加入了"webpack": “webpack --config webpack.config.js --colors --display-reasons --watch” 这条命令,就是执行webpack这个指令后就会去根据webpack.config.js配置文件来编译打包整个项目。
    *在script对象中写入的命令都必须使用 *npm run * * *** 来运行。
    运行成功之后在根目录下就会生成dist文件夹。

    最终目录树如下:
    这里写图片描述

    四、练习es6语法、浏览器预览

    1、在app.js文件中写入es6语法知识,如下:

    let a = 20;
    const b = 20;
    console.log(a, b)
    

    2、保存app.js文件之后,命令行会监听变化自动打包项目,这时只需在dist目录下打开index.html文件在浏览器预览,即可在控制台看到打印输出效果了。(此时es6会被编译为es5语法了,可以在dist目录下的main.js滑到最下面查看编译后的es5语法。)

    展开全文
  • 想构建一个前端自动化环境,来处理image,css,js(es6,jsx)的处理和保存刷新,让jser专注写代码我当初选择gulp,但是接触到了es6和react后又在gulp加入了gulp-babel, babel-preset-es2015和gulp-react。...

    想构建一个前端自动化环境,来处理image,css,js(es6,jsx)的处理和保存刷新,让jser专注写代码

    我当初选择gulp,但是接触到了es6和react后又在gulp加入了gulp-babel, babel-preset-es2015和gulp-react。一路很多坑,这里总结一下。

    A):首先是gulp来处理es6
    先装nodejs,之后通过npm装gulp, gulp-babel, babel-preset-es2015, gulp-webpack(ADM模块调用时会用到)

    npm install -g gulp
    npm init
    npm install --save-dev gulp gulp-babel babel-preset-es2015 gulp-webpack
    

    B):然后写gulpfile.js
    var gulp=require(“gulp”),
    babel = require(“gulp-babel”),
    es2015 = require(“babel-preset-es2015”),
    webpack = require(“gulp-webpack”);

    gulp.task("default",function(){
      gulp.src("./js/es6/*.es6")
        .pipe(babel({presets:[es2015]}))
        .pipe(gulp.dest("./js"))//es6转js必须在webpack之前,否则webpack找不到要包装的js会报错
        .pipe(webpack({//babel编译import会转成require,webpack再包装以下代码让代码里支持require
          output:{
            filename:"all.js",
          },
          stats:{
            colors:true
          }
        }))
        .pipe(gulp.dest("./js"));//包装好的js目录
    

    });

    到这里构建工具就完成了待下面的es6编写完成执行gulp即可。

    C):写es6喽
    animal.es6

    class Animal{
        constructor(){
            console.log("==constructor animal==");
        }
        sayHello(){
            console.log("==sayHello animal==");
        }
    }
    
    export default Animal;//这个必须,否则require到的模块将会是空Object,webpack里导出模块其实是(module.exports = Animal)
    

    dog.es6

    import Animal from "./animal"//导入模块,其实是var Animal = require("./animal");与export想对应出现
    class Dog extends Animal{
      constructor(){
        super();//执行一次父类的构造,否则会报错
        console.log("==constructor dog==");
      }
    }
    
    var dog = new Dog();
    dog.sayHello();
    

    index.html

    <script src="all.js"></script>

    在chrome的console下会看到输出结果

    总结:gulp+webpack+es6,这里我们只用到了webpack的AMD的一个功能,gulp和webpack都有压缩合并的功能,有兴趣的看下面的网站进一步学习:
    gulp学习:http://www.gulpjs.com.cn/docs/getting-started/
    webpack学习:http://webpack.github.io/docs/
    webpack配置:http://www.tuicool.com/articles/uQfmqie
    babel学习:http://babeljs.io/docs/setup/

    之后会在此基础上介绍让React的jsx用上es6。。。。。尽请期待。。。。。

    展开全文
  • 当React遇到了es6,让gulp来搭桥

    千次阅读 2016-04-14 23:56:28
    前面介绍了如何搭建es6环境来开发,本章将一下React如何用es6来编写代码。 根据前面的基础我们加入react的jsx解析,首先回顾一下前面...通过webpack的module.exports和require来导出和导入模块es6是import和expor
  • webpacak将ES6转ES5

    千次阅读 2017-09-23 15:44:43
    webpack 是支持es6模块的写法的,但是当前的浏览器不支持,所以想要将用es6方式写的模块代码在浏览器运行起来,要先使用webpack进行打包 babeles6的一个编译器,这个东西有自己的独立的运行功能 可以下载 babel-...
  • 关于什么是webpack,一般的教程里面都会提到webpack是一个模块化打包工作,但是很多初学者没有模块化这个概念,所以往往在第一步就被拦住了。所以在讲什么是webpack之前,我想先讲一下和模块化相关的概念。 ...
  • 使用webpack+npm多元化命令

    千次阅读 2016-08-31 22:35:16
    最近一段时间在使用es6+vue+webpack进行开发,之所以选择es6,是因为其本身就包含了模块管理的机制,利用import关键字,基本上就无须再使用requirejs或seajs了。另外es6在es5的基础上,又增加了许多优秀的特性,例如...
  • 使用webpackES6代码转化为ES5代码,包含import和export的模块化功能
  • 1、安装webpack和loader 为什么要安装webpack? 因为我们要用到webpack的 expose-loader。当然,webpack的打包功能我们也要用到。 mkdir demo-webpack &amp;&amp; cd demo-webpack npm init cnpm install ...
  • webpack原理

    千次阅读 2017-11-06 10:31:09
    webpack核心概念 entry 一个可执行模块或库的入口文件。chunk 多个文件组成的一个代码块,例如把一个可执行模块和...plugin 插件,用于扩展webpack的功能,在webpack构建生命周期的节点上加入扩展hook为webpack
  • 翻译了webpack官方英文文档,整合互联网上对webpack介绍的教程,完整全面的认识使用webpack
  • webpack4升级指南以及从webpack3.x迁移

    万次阅读 2018-03-06 15:07:08
    由此而来的还有之前webpack3.x的项目如何迁移到新的webpack版本,本文就一个新的vue-cli创建的基于webpack的项目进行迁移。 题外话:不要看0配置是很有噱头,基本是不能满足大部分用户啊的需求,不过加...
  • 由于新版本的ECMASscript的强大特性,使我们写js代码更加得心应手,例如:calss,let,for…of,promise等等,但可惜的是这些js新特新只被最新版本的浏览器支持,那么指定范围的低版本的浏览器的支持就需要一个专门...
  • webpack-js篇

    千次阅读 2020-01-30 12:25:37
    webpack 自动化构建工具 Javascript打包
  • 因为最近在工作尝试了 webpack、react、redux、es6 技术栈,所以总结出了一套 boilerplate,以便下次做项目时可以快速开始,并进行持续优化。对应的项目地址:webpack-react-redux-es6-boilerplate 该项目...
  • 安装style- loader css-loader新建css文件夹,新建common.css文件webpack把任何资源都视为模块,在入口文件app.js引入需要的模块(可以require方式引用,此处我们统一用es6的import方式引用)在webpack.config.js...
  • webpack的面试题总结

    千次阅读 2019-07-25 20:53:51
    随着现代前端开发的复杂度和规模越来越庞大,已经不能抛开工程化来独立开发了,如react的jsx代码必须编译后才能在浏览器使用;又如sass和less的代码...在众多前端工程化工具webpack脱颖而出成为了当今最...
  • 前端工程化-webpack原理

    万次阅读 2020-10-11 11:17:56
    1、plugin通过钩子机制实现 2、往钩子上挂载任务,一般是通过一个函数或者是一个包含apply方法的对象 3、brower sync自动编译自动刷新
  • webpack快速学习2

    千次阅读 2016-11-19 11:39:45
    webpack结合bable的使用 bable主要是用来处理ES2015也就是ES6的,由于ES6的一些代码有的浏览器是不能直接解析的,所以就必须用bable将其转换为浏览可以解析的代码。这就是bable。 1.安装 这里面分别安装了babel...
1 2 3 4 5 ... 20
收藏数 5,165
精华内容 2,066
关键字:

webpack 中加入es6的模块