译-我是怎么在项目中使用ES6模块化的 - 推酷
译-我是怎么在项目中使用ES6模块化的
http://jsrocks.org/2015/05/how-i-m-using-es6-modules-in-production/ 原文链接
我使用ES6 modules工作已经有一段时间了，今天我就向大家分享下我是怎么使用ES6 moudule的。
首先，向大家介绍一下Babel ，
是用来JS转译的整合工具，它是一个非常活跃的项目，而且它几乎覆盖了所有现代JavaScript特征。（注：JS转译（Javascript Transpiler）请自行谷歌） Babel完美支持模块化，你可以自己决定你代码的风格，你可以使用AMD,Common,UMD这些规范，而且你甚至能自定义模块规范。
在我的公司里，我们开发了一个基于AMD modules规范的框架（当然尚未开源），用来构建我们的应用。 相信我：对于开发大型的应用，使用AMD规范仍然是一个很好很好的解决方案。我们不能再把所有js代码反正一个文件里，这样是不行的。 悲剧的是我们现在很多些应用的解决方案是类似于
,要想迁移到AMD modules可不是那么容易，而我们公司关于模块化的解决方案是很实用的（尚未开源）。
注：在本文中“解决方案”都是指JS模块化解决方案。 微模块策略 这个策略对我来说很有用。 正如我上文说的那样，我们最终产出模块必须要要是AMD module，但是当某一个AMD模块需要依赖其他模块时，我叫那个模块（AMD模块依赖的模块）叫做微模块。 微模块并不会被应用的每个模块都用到，但是利用它能帮助我们组织代码。 以下代码演示了我们怎么使用微模块：
微模块策略
这个策略对我来说很有用。 正如我上文说的那样，我们最终产出模块必须要要是AMD module，但是当某一个AMD模块需要依赖其他模块时，我叫那个模块（AMD模块依赖的模块）叫做微模块。 微模块并不会被应用的每个模块都用到，但是利用它能帮助我们组织代码。 以下代码演示了我们怎么使用微模块：
import config from './config';//导入ES6模块
import { globalpkg } from './config';//动态注入ES6模块参数
import factory from './factory';
zaz.use((pkg) =& {
&use strict&;
config.dynamic.globalpkg = pkg;
pkg.require(['modFactory'], (modFactory) =& {
modFactory.create(pkg.utils.deepMerge(config._static, factory));
我们在代码的顶部导入了一些模块，并且在我们的AMD模块里还使用了这些导入的模块。在其他的应用中并不会用到这些ES6模块，但是使用了这些微模块后，编译后产生的最终源码有更高的可读性。
这是config模块的代码：
const githubURL = &OUR GITHUB URL HERE&;
const staticServer = &&;
const testsPath = `zaz-${type}-${name}/tests/index.htm?zaz[env]=tests`;
const name = &stalker&;
const type = &mod&;
const version = &0.0.1&;
const state = &ok&;
const description = &JavaScript API to deal with user data&;
let globalpkg = null; // default export
const config = {
_static: {
description,
docs: `${githubURL}/pages/terra/zaz-${type}-${name}`,
source: `${githubURL}/Terra/zaz-${type}-${name}`,
tests: `${staticServer}/fe/${testsPath}`,
dependencies: ['mod.wilson']
export default config;
这是项目的源码结构：
└── src
├── _js
├── config.js
├── environment.js
├── helpers.js
├── factory.js
├── methods.js
└── mod-stalker.js
└── mod-stalker.js
我把一些AMD模块的逻辑放进了微小的ES6模块里。 这对于构建处理是很简单的：Babel转译ES6的Javascript代码为ES5的代码；使用导入CommonJS模块的方式来导入微模块。最后用
打包代码。 哈哈！最终生成的代码符合AMD模块规范了。
Sourcemaps比起Browserify来说，Sourcemaps不能很好的处理这个编译的流程。 也许这里能有更好的实现方式。 我们现在可以开始使用ES6新特征和模块化来重构我们的框架了。 你甚至可以自己实现模块加载规范给你的程序，但是我认为这可能不是一个好方法，有可能你会需要完全重写现有的模块加载系统。
现在模块规范已经完成了，而且是非常成熟和有效的。 然而，web浏览器至今没有提供js模块加载的原生API,所有像AMD或者CommonJS就显得格外重要了。 现在我们已经体会到ES6模块语法的好处了，可以让我们的代码拥有更高的可读性和简洁性。 现有的工具，比如Babel和Browserify能减少我们开发的痛苦，相信在不久的将来等ES6普及后，我们就能简化js开发流程，这样就能舍弃这些构建打包工具了。
已发表评论数()
请填写推刊名
描述不能大于100个字符!
权限设置： 公开
仅自己可见
正文不准确
标题不准确
排版有问题
主题不准确
没有分页内容
图片无法显示
视频无法显示
与原文不一致ES6新特性：使用export和import实现模块化
在ES6前， 前端就使用RequireJS或者seaJS实现模块化， requireJS是基于AMD规范的模块化库， &而像seaJS是基于CMD规范的模块化库， &两者都是为了为了推广前端模块化的工具， 更多有关AMD和CMD的区别， 后面参考给了几个链接；
现在ES6自带了模块化， 也是JS第一次支持module， 在很久以后 ，我们可以直接作用import和export在浏览器中导入和导出各个模块了， 一个js文件代表一个js模块；
现代浏览器对模块(module)支持程度不同， 目前都是使用babelJS， 或者Traceur把ES6代码转化为兼容ES5版本的js代码;
ES6的模块化的基本规则或特点：
ES6的模块化的基本规则或特点， 欢迎补充：
1：每一个模块只加载一次， 每一个JS只执行一次， 如果下次再去加载同目录下同文件，直接从内存中读取。 一个模块就是一个单例，或者说就是一个对象；
2：每一个模块内声明的变量都是局部变量， 不会污染全局作用域；
3：模块内部的变量或者函数可以通过export导出；
4：一个模块可以导入别的模块
console.log(diag(, ));
下面列出几种import和export的基本语法：
第一种导出的方式：
在lib.js文件中， 使用 export{接口} 导出接口， 大括号中的接口名字为上面定义的变量， import和export是对应的；
setCounter(
在main.js中， counter一直指向lib.js中的局部变量counter， 按照JS的尿性， 像数字或者字符串类型或者布尔值的原始值要被复制， 而不是赋址；
循环依赖的问题：
NodeJS的循环依赖是这么处理的：
循环依赖是JS模块化带来的问题，&在浏览器端， 使用RequireJS测试模块化，&比如有一个文件file0.js依赖于file1.js， 而file1.js又依赖于file0.js， 那么file0.js和file1.js到底谁先执行？
package com.fish.jdk15; import java.util.ArrayL import java.util.C /*
jdk1.5新特性之-------静态导入
静态导入的作用: 简化书写.
静态导入可以作用一个类的所有静态成员(静态方法和静态成员变量).
静态导入的格式:
2. V2 新特性 2.1. $req对象预定义参数的支持 2.2. 动态ioc
IocXq214 package com.attilax. import java.util.ArrayL import java.util.L import java.util.M importjavax.servlet.http.Http ...
&Oracle 12C 新特性&可插拔数据库&功能体验&简介:本文是好友~Oracle专家[高强]所著,此友拥有多年Oracle工作经验,从9i -& 12C都有所涉猎,功力深厚可想而知,对Oracle有着一种无以比拟的热爱,是一位技术大牛,下面转发一篇刚刚草拟的技术文章,附交流方式微博:高强_游手好弦邮箱: gaoqi ...
SQL Server 2012 新特性(一)管理新特性:AlwaysOn一.准备环境1.准备4台计算机 域控制器DC1,IP地址192.168.1.1 主节点SQL1:IP地址192.168.1.21 辅助节点SQL2:IP地址192.168.1.22 辅助节点SQL3:IP地址192.168.1.23 上述4台服务器的其它配置一致:子网掩码255.255. ...
作者:左转写在前面:这是一篇在Web3.0趋势下,与站长们探讨如何维护和升级网站的文章.主要谈到了目前国内外互联网非常流行的社会化网络趋势问题,希望能有一些普及意义.我们都知道Web2.0注重用户参与,但对于站长来说一直缺乏一种工具能将用户及内容进行整合.事实上网站和一体系的社会化解决方案构成了Web3.0的基础,这种趋势是不可忽视的.---站长们完善自己的 ...
微软Office 2016今日正式发布,用以替代多年前的Office 2013.新版的Office套装包含了不少新改进和特性,其中很多也是在Office 2016 Preview预览版计划开始之后,不少用户提出的.同时,Office 2016也面向所有Office 365订阅用户开放,新用户也可以购买最新的Office 2016.除了Windows版之外,微 ...
© CopyRight
Inc All Rights Reserved.
管理员邮箱: info @使用ES6语法写的react组件无法渲染？
&a href=&///?target=https%3A///wxungang/ES6_REACT_1104.git& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&GitHub - wxungang/ES6_REACT_1104&i class=&icon-external&&&/i&&/a&
（项目链接）&br&&br& app.jsx 文件&br&&div class=&highlight&&&pre&&code class=&language-js&&&span class=&cm&&/**&/span&
&span class=&cm&& * Created by xiaogang on .&/span&
&span class=&cm&& */&/span&
&span class=&s2&&&use strict&&/span&&span class=&p&&;&/span&
&span class=&kr&&import&/span& &span class=&nx&&ReactDOM&/span& &span class=&nx&&from&/span& &span class=&s1&&'react-dom'&/span&&span class=&p&&;&/span&
&span class=&kr&&import&/span& &span class=&nx&&test&/span& &span class=&nx&&from&/span& &span class=&s2&&&../components/test&&/span&&span class=&p&&;&/span&
&span class=&nx&&console&/span&&span class=&p&&.&/span&&span class=&nx&&log&/span&&span class=&p&&(&/span&&span class=&nx&&test&/span&&span class=&p&&);&/span&
&span class=&nx&&ReactDOM&/span&&span class=&p&&.&/span&&span class=&nx&&render&/span&&span class=&p&&(&/span&
&span class=&o&&&&/span&&span class=&nx&&div&/span&&span class=&o&&&&/span&
&span class=&o&&&&/span&&span class=&nx&&test&/span& &span class=&nx&&className&/span&&span class=&o&&=&/span&&span class=&s2&&&myLists&&/span& &span class=&nx&&title&/span&&span class=&o&&=&/span&&span class=&s2&&&header&&/span&&span class=&o&&&&/span&
&span class=&o&&&&/span&&span class=&err&&/test&&/span&
&span class=&o&&&&/span&&span class=&err&&/div&,&/span&
&span class=&nb&&document&/span&&span class=&p&&.&/span&&span class=&nx&&getElementById&/span&&span class=&p&&(&/span&&span class=&s1&&'body'&/span&&span class=&p&&)&/span&
&span class=&p&&);&/span&
&/code&&/pre&&/div&&br&test.js文件&br&&div class=&highlight&&&pre&&code class=&language-js&&&span class=&cm&&/**&/span&
&span class=&cm&& * Created by xiaogang on .&/span&
&span class=&cm&& */&/span&
&span class=&s2&&&use strict&&/span&&span class=&p&&;&/span&
&span class=&kr&&import&/span& &span class=&p&&{&/span&&span class=&nx&&Component&/span&&span class=&p&&,&/span& &span class=&nx&&PropTypes&/span&&span class=&p&&}&/span& &span class=&nx&&from&/span& &span class=&s1&&'react'&/span&&span class=&p&&;&/span&
&span class=&kr&&export&/span& &span class=&k&&default&/span& &span class=&kr&&class&/span& &span class=&nx&&Test&/span& &span class=&kr&&extends&/span& &span class=&nx&&Component&/span&&span class=&p&&{&/span&
&span class=&nx&&constructor&/span&&span class=&p&&(&/span&&span class=&nx&&props&/span&&span class=&p&&){&/span&
&span class=&kr&&super&/span&&span class=&p&&(&/span&&span class=&nx&&props&/span&&span class=&p&&);&/span&
&span class=&k&&this&/span&&span class=&p&&.&/span&&span class=&nx&&state&/span&&span class=&o&&=&/span&&span class=&p&&{};&/span&
&span class=&p&&}&/span&
&span class=&nx&&render&/span&&span class=&p&&(){&/span&
&span class=&k&&return&/span& &span class=&o&&&&/span&&span class=&nx&&div&/span&&span class=&o&&&&/span&&span class=&nx&&test&/span& &span class=&p&&{&/span&&span class=&k&&this&/span&&span class=&p&&.&/span&&span class=&nx&&props&/span&&span class=&p&&.&/span&&span class=&nx&&name&/span& &span class=&p&&}&/span&&span class=&o&&&&/span&&span class=&err&&/div&&/span&
&span class=&p&&}&/span&
&span class=&p&&}&/span&
&/code&&/pre&&/div&&br&搞定问题的大神：留言我微信或者支付宝（有红包哦 50+）
（项目链接） app.jsx 文件/**
* Created by xiaogang on .
"use strict";
import ReactDOM from 'react-dom';
import test from "../components/test";
console.log(test);
ReactDOM.render(
&test className="myLists" title="header"&
document.getElementById('body')
test.js文件/**
* Created by xiaogang on .
"use strict";
import {Component, PropTypes} from 'react';
export default class Test extends Component{
constructor(props){
super(props);
this.state={};
return &div&test {this.props.name }&/div&
1. React 组件用 PascalCase ，不要用小写。React's JSX uses the upper vs. lower case convention to distinguish between local component classes and HTML tags.2. jsx 编译出来的代码依赖 React , 所以你需要在 jsx 里 import React// &Test ...& 转换成
React.createElement("Test" ...)
红包？ 知乎怎么了
import {Component, PropTypes} from 'react';
import React,{Component, PropTypes} from 'react';
这样就行了
直接上红包了？简单粗暴啊......
已有帐号？
无法登录？
社交帐号登录让模块的正式定义成为原生语言的一部分，是ES6让人久等的特性之一。近年来，开发者为了完成代码组织管理，不得不在RequireJS、AMD和 CommonJS等权宜的模块规范里做出选择。如果以后模块定义可以正式成为语言的组成部分，开发者就会消除一大块心病。现阶段，关于模块如何加载，确实有很多让人困惑的地方。正如文中提到，造成困惑的一部分原因是没有可以原生加载ES6模块的引擎。同时，我希望可以通过这篇文章澄清一些困惑。
什么是模块？
在文章开头，有必要来具体说明一下编程的两种不同方式：一种是脚本（就是自发明以来我们一直使用的方式），另一种是模块化（ES6最新定义的写码方式）。跟大家过去的那种写码方式相比，模块化有一些不同，具体来说：
模块需要用严格模式，这别无选择；
模块有一个顶级作用域，但不是全局作用域；
可以通过import从其他模块引入绑定；
可以通过export声明需要输出的绑定。
看上去差别并没有很大，但是实际上，模块和脚本差别大主要体现在模块的解析和加载上。
解析的差异
在ESLint上，最常被问起的关于ES6模块化的问题里有这样一个：
为什么在解析之前必须先声明一个文件是模块？就不能自己去找import或者export嘛？
我在网上到处看到这个问题被重复提起，人们一直纠结，想弄明白为什么引擎和工具不能自动检测一个文件表示的是模块而不是一段脚本。乍一看，只要检查到出现export或者inport就可以确定一个文件包含模块了，但是事实上还远远不够。
试图去猜测用户的意图是危险且不严密的玩法，猜对了还好，猜错了就可能会出大问题。
解析存在的挑战
为了自动检测程序中的模块，你必须先解析整个文件。模块不是一定会出现import的，唯一能确定一个文件是模块的有用的标志，可能是在最后一句使用了export。所以为了判断一个文件是不是模块，就避免不了解析整个文件。
但是，模块是要运行在严格模式下的。严格模式并不只有运行时的要求，同时也规定了下列情况属于语法错误：
函数的重名参数
八进制数字字面值 （比如 010）
重复的属性名 （仅存在于ES5，ES6修复了这个bug）
把 implements、 interface、 let、 package、 private、 protected、 public、 static 和 yield 当作保留字
运行在非严格模式下，这些都不是语法错误。如果仅仅在文件的最后一句放个export来指明模块，那么就需要重新再解析一次整个文件，以确保在严格模式下没有语法错误。之前的那一次非严格模式下的解析也就白白浪费了。
如果一定要从文件内容中判定模块，当然也可以强制把文件一直当作模块来解析。既然模块的语法就是严格模式 + import和export，我们就需要默认允许使用import和export。如果在非严格模式下解析，那import和export又成了语法错误。也可以交替创建不同的解析模式，然后把非严格模式与import和export组合起来。但是这种组合模式的解析结果不能运行，所以仍然需要再走一遍流程来确保正确。
什么时候判定模块？
在上面的讨论中我们漏掉了一种情况，模块并不是必须使用import和export的。有的模块可能根本不需要输入或者输出什么，比如要在全局作用域内修改什么东西。看这个例子，当浏览器里触发window.onload的时候，你想输出一条消息，可以这样定义一个模块：
// 这是一个合法的模块
window.addEventListener(&load&, function() {
console.log(&Window is loaded&);
这个模块可以被其他模块加载或者直接运行。从源代码来看，没办法知道它是个模块。
总之，出现import和export可以表明是个模块，没有import和export并不能清楚地判定一个文件不是模块。所以在解析的时候没有行之有效的办法来自动检测一个文件是个模块。
加载的差异
模块的解析差异是有点微妙的，加载差异却不是。当一个模块加载完毕，import语句会触发指定文件的加载。引入的文件必须在解析和加载（没有报错）完成后，模块才开始执行。为了尽可能地提升速度，加载（【译者注】这里是指引入文件的加载）在import语句解析完成后就开始了，要早于模块剩余部分的解析。
依赖文件加载完成之后，还有额外的一个步骤，就是确认引入的绑定确实存在于依赖文件中。如果你从foo.js模块引入了foo，在继续执行之前，引擎需要验证foo,js确实输出了foo。
怎样加载模块
讲到这里，对于为什么需要在解析和加载前声明一个文件是模块，希望你已经清楚明了了。在浏览器里，可以这样加载模块：
&script type=&module& src=&foo.js&&&/script&
&script&标签和平时一样，但是type属性设置为&module&[1]。这样会通知浏览器，这个文件需要被加载为模块。如果foo.js里import了其他的依赖，都会被动态地加载。
在Node.js里，ES6模块应该怎样加载还没有定论。最新的建议是使用一个特殊的文件扩展名来声明文件是ES6模块，比如.jsm，以确保Node.js可以正确地加载它[2]。
脚本和模块之间的差别是很微妙的，开发者们很难理解提前声明一个JS文件的制约因素。我希望这篇文章可以讲清楚一些东西，为什么不能通过检查源代码来自动检测模块，为什么ESLint等工具需要执行前先声明文件类型。将来有一天，ES6模块将成为主要的文件类型，脚本文件仅仅存在于历史遗留应用。到那时候，或许各种工具就会默认把文件当模块对待了。而我们当下正在经历的，就是脚本和模块混杂的艰难时期，青春期总会经历点儿疼痛的。
( 注 ): 这篇文章之前的版本提到import语句必须出现在文件的开头，这是不对的，被删掉了。
(whatwg.org)es6 jquery 怎么结合_百度知道